CSS Design Primer: How to outline keyboard keys in html

CSS  / HTML Design:
To outline the keys in this document, the same css rules as wikipedia were applied, shown here with the help of syntaxhighlighter (if javascript is enabled in your browser) :

.kbKey {
 border: 0.2em solid;
 background: #EEE;
 padding: 0 0.4em;
 font-size: 0.85em;
 white-space: nowrap;
 font-family: inherit;
 border-color: #DDD #BBB #BBB #DDD;
}

Note: Wikipedia holds its content to the Creative Commons Attribution-ShareAlike License, so direct usage of content is fine, as long as the content is credited accordingly and modified content shared under the same or similar license unless explicit waivers for any of those two liabilities have been granted.
To outline a F12 key in the browser use for instance the following code:
<span class="kbKey ">F12</span>

To indent words, a <span> element with a width rule such as width: could be used; The height of the element will be inherited and inline with the rest of the text. The <div> element wouldn't work since it is natively defined with the css-rule clear:both; resulting in line breaking to the element's left and right;

Alternatively html-entities such as &nbsp; (nobackspace) can be used and is in this case preferable since it won't invoke an DOM object instance by the browser.
This does make a considerable difference in memory footprint when dynamically generating thousands of html lines in loops. In such cases dynamically generating the content in accordance with the current view of the user is state of the art (e.g. User quickly scrolled to the middle).
It is much to AJAX's credit that a breath of fresh air was brought into the school of thought regarding dynamic web content and web user interfaces.

In an upcoming article I will discuss MVC, an acronym based on the trinity of Model, View and Controller architecture.

Note: Tabulators are only retained in preformatted text (<pre>text</pre>).