CSS Display (CSS Advanced Topics part 7)

One of the most difficult aspects of creating a page without the use of tables is learning how to control the line breaks. Up to this point we haven't taught you how to use CSS to simulate a <br /> after the use of an element. Additionally, we have not shown how to remove line breaks that automatically occur with some elements (headers, list elements, paragraphs, etc).

All these issues and more are addressed with the display property. In this lesson you will find a brief overview and example for the most commonly used CSS Display values.

Display Block and Inline

As you have seen in our CSS Examples, we were able to create many looks for our menus. A few of the examples have no line breaks in the HTML, but we made each anchor tag have a break on specific examples. These line breaks are created with the block value.

CSS Code:

a { display: block; }
p { display: inline; }

HTML Code:

<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web
</a>
...
<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web
</a>
<br />
<p>These paragraph </p>
<p>elements</p>
<p>have been </p>
<p>inlined.</p>

Display:

Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web Tizag.com - Learn to Whip the Web

These paragraph

elements

have been

inlined.

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus. This topic is beyond the scope of this lesson, but feel freevto check out O'Reilly's - Hierarchical Menus. Below is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none".  Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a display value of "block".

Using display correctly is key to CSS-heavy website designs and once you you've mastered using it on your HTML your websites will be much more flexible than you ever imagined!