You can probably guess that we will now be discussing how elements are displayed, or more precisely, how visible is element is or is not, and how much space an element will take up on the page.

In case you are not familiar with "block-level" and "inline" elements we will summarize them. Block-level elements stand out, using up 100% of the available width and forcing line breaks before and after the element. Inline elements do not interrupt the flow of the elements surrounding them, and only take up as much room as they need.

CSS allows you to over-ride an HTML element's default and specify whether or not the element is block-level or inline. An example of this is:

For Inline CSS:
  <p style="display: block;"> </p>
  <b style="display: inline;"> </b>
For Internal or External CSS:
  p { display: block; }
  b { display: inline; }


So what would this example mean? Not much! The paragraph element is, by default, a block-level element and the bold element is inline. Switching the display type, however, forces the paragraph to become inline and the bold element to become a block-level element. Hmmm, the possibilities... will become more clear as we continue.

In the meantime, another display option is available. The use of "none" as a display value will cause the contents of the element to not appear on the webpage.

<p style="display: none;">I want a hair cut please.</p>
<p style="visibility: hidden;">Certainly, which one?</p>


Neither of the above elements will show up on a webpage, but the element containing "visibility: hidden;" will take up space on the webpage, while "display: none;" will not take up space. Again, rarely useful, but now you know!

In many cases, using the HTML <div> element as a container for other elements will be sufficient to create a block-level effect, while the <span> element can be used for inline formatting. Knowing the display properties will, however, be necessary for more advanced effects.