{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Display Property Tutorials

The CSS display property allows you to specify how HTML elements should be displayed or to not have HTML elements be displayed.

CSS Display Properties

The CSS display property values are listed below.

Property Description Values CSS level
display Is used to specify how an element is displayed, if it is displayed none
block
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption 		CSS level 2

Display block

The CSS display property with a value of block will display an HTML element as a block. Block elements have a line-break before and after the HTML element. No other HTML element is displayed next to it along the line of flow of content unless specified otherwise, for example, by floating another HTML element next to the block element. For example, headers and paragraphs are displayed as block elements by default.

The code example below shows you how to have HTML elements be displayed as block elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { display:block; width:200px; height:200px; margin:10px; } div.black { border:2px solid black; } div.red { border:2px solid red; } div.green { border:2px solid green; } </style> <body> <div class="black"> This is some content. </div><!-- end class black --> <p> This is a paragraph. </p> <div class="red"> This is some more content. </div><!-- end class red --> <div class="green"> This is even more content. </div><!-- end class green --> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

Display inline

The CSS display property with a value of inline is used to have HTML elements be displayed inline, within the HTML block in which it is currently contained. Inline elements shrink to the smallest possible width. For example, list items are displayed as inline elements by default.

The code example below shows you how to have HTML elements be displayed as inline elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { display:inline; width:200px; height:200px; margin:10px; } div.black { border:2px solid black; } div.red { border:2px solid red; } div.green { border:2px solid green; } </style> <body> <div class="black"> This is some content. </div><!-- end class black --> <p> This is a paragraph. </p> <div class="red"> This is some more content. </div><!-- end class red --> <div class="green"> This is even more content. </div><!-- end class green --> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

Display inline-block

The CSS display property with a value of inline-block places HTML elements inline, however, the HTML element behaves as a block element.

The code example below shows you how to have HTML elements be displayed as inline-block elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { display:inline-block; width:200px; height:200px; margin:10px; } div.black { border:2px solid black; } div.red { border:2px solid red; } div.green { border:2px solid green; } </style> <body> <div class="black"> This is some content. </div><!-- end class black --> <p> This is a paragraph. </p> <div class="red"> This is some more content. </div><!-- end class red --> <div class="green"> This is even more content. </div><!-- end class green --> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

Display none

The CSS display property with a value of none causes the HTML element to not be displayed at all.

The code example below shows you how to have HTML elements be displayed using the display property with a value of none.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.none { display:none; width:200px; height:200px; margin:10px; border:2px solid red; } div.black { display:inline-block; width:200px; height:200px; margin:10px; border:2px solid black; } div.green { display:inline-block; width:200px; height:200px; margin:10px; border:2px solid green; } </style> <body> <div class="none"> This is some content. </div><!-- end class none --> <div class="black"> This is some more content. </div><!-- end class black --> <div class="green"> This is even more content. </div><!-- end class green --> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

Display Property and List Items

List items are, by default, displayed as inline elements. However, they are commonly displayed as block elements.

The code example below shows you how to have list items be displayed inline by specifying the display property with a value of inline. Not specifying the display property with a value of inline, will also display list items as inline elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> ul li { display:inline; list-style-type:none; } </style> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

The code example below shows you how to have list items be displayed as block elements by specifying the display property with a value of block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> ul li { display:block; list-style-type:none; } </style> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> </body> </html>

The web page that the code example creates is here: CSS Display Property Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends