CSS Display

CSS Display

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.

a { display: block; }

p { display: inline; }

 
HTML Souce
<a href="http://www.hiscript.com/" target="_blank">Hiscript.com - </a>

...

<a href="http://www.hiscript.com/" target="_blank">Hiscript.com - Web</a>

<br />

<p>These paragraph </p>

<p>elements</p>

<p>have been </p>

<p>inlined.</p>

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 OReilly's - Hierarchical Menus. Below is a simple example of how to hide an element.

p.show { display: block }

p.hide { display: none; }

 
HTML Source
<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>

 

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!