CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the actual center of excellence meaning implementation of the language. Independent companies and organizations create that software.

When working with HTML and CSS a block, inline and inline-block may be confusing. Below are some examples of each of these attributes to give a better understanding of how each of them work.

CSS display: inline

In our first example, we start by using a <span> tag, which by default is an inline element. As can be seen in the example below, the span text is red and is contained on the same line (inline) of the text before and after the span.

Example text to give an example of how span text can be as an inline, block, or inline-block element and how it can change the appearance of text.

<span style=”color:red;”>span text</span>

CSS display: block

In the next example, we’ve changed the default of the <span> tag to display as a block. Because a block element occupies its own line, it gives the appearance that an enter or return was pressed after “how” and “text” in our example.

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

<span style=”color:red; display: block;”>span text</span>

CSS display: inline-block

Finally, in the next example, we’ve changed the default of the <span> tag to display as an inline-block. Unlike a block element an inline-block remains inline with all text around the element and appears the same as an inline.

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

<span style=”color:red; display: inline-block;”>span text</span>

Why would I use an inline-block instead of inline?

After seeing the above examples, you may immediately ask yourself why would I want to use a block or inline-block element? By making an element a block element, you get the free widgets for websites ability to have a vertical height to that element as shown below.

Inline span with height:

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

<span style=”color:red; background-color:yellow; height:60px;”>span text</span>

Inline-block span with height:

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

<span style=”color:red; background-color:yellow; display: inline-block; height:60px;”>span text</span>

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.