Cascading Style Sheets - Part 2
Examples of the DISPLAY Property
In this example, we've changed the default value of some elements and turn block-level elements into inline elements. In other places, we turned inline elements into block. You may or may not see all these effects because browser versions render them differently. In general, the newest browsers (version 6 and up) do the best job.
Changing Section Headers
In this example, the section header's DISPLAY property is changed from its default (block-level) to and INLINE value. Note how the text in this paragraph appears immediately to the right of the section header.
Changing the Display of Links
Normally, an A element is an inline. That's why you can include links inside your text without getting extra spacing. But here, we draw attention to the links by changing their display to BLOCK so that each displays on its own line.
NetMechanic Newsletter Archive
NetMechanic Home Page
HTML Toolbox
DIV Tags as Inline Elements
This div should appear on the LEFT side of the browser window
This div should appear in the MIDDLE of the browser window
This div should appear on the RIGHT side of the browser window
The INVISIBLE Section Header!
The above section header has a class called "invisible" applied to it, so it shouldn't display at all. If you DO see header text that says "The INVISIBLE Section Header!" then your browser doesn't support that value. If you DON'T see it, then view the source code of this page to see how the element is included inside the HTML code.
The code for the above display - note use of DISPLAY
<html>
<head>
<title>Block and Inline Element Examples</title>
<style type="text/css">
body {font-family:arial; color:navy;}
h1,h2 {color:maroon;}
.sectionHead {background-color:navy; color:white; display:inline;}
.divColumn {border-style:solid; border-color:maroon; border-width:2px; padding:5px; width:30%; display:inline;}
.invisible {display:none;}
a {display:block;}
</style>
</head>
<body>
<h1>Examples of the DISPLAY Property</h1>
<p>In this example, we've changed the default value of some elements and turn block-level elements into inline elements. In other places, we turned inline elements into block. You may or may not see all these effects because <b>browser versions render them differently</b>. In general, the newest browsers (version 6 and up) do the best job.</p>
<h2 class="sectionHead">Changing Section Headers</h2>
<p>In this example, the section header's DISPLAY property is changed from its default (block-level) to and INLINE value. Note how the text in this paragraph appears immediately to the right of the section header.</a>
<h2>Changing the Display of Links</h2>
<p>Normally, an A element is an inline. That's why you can include links inside your text without getting extra spacing. But here, we draw attention to the links by changing their display to BLOCK so that each displays on its own line.</p>
<p>
<a href="http://www.netmechanic.com/news/">NetMechanic Newsletter Archive</a>
<a href="http://www.netmechanic.com">NetMechanic Home Page</a>
<a href="http://www.netmechanic.com/maintain.htm">HTML Toolbox</a>
</p>
<h2>DIV Tags as Inline Elements</h2>
<div class="divColumn">
<p>This div should appear on the LEFT side of the browser window</p>
<p><br><br><br><br><br></p>
</div>
<div class="divColumn">
<p>This div should appear in the MIDDLE of the browser window</p>
<p><br><br><br><br><br></p>
</div>
<div class="divColumn">
<p>This div should appear on the RIGHT side of the browser window</p>
<p><br><br><br><br><br></p>
</div>
<h2 class="invisible">The INVISIBLE Section Header!</h2>
<p>The above section header has a class called "invisible" applied to it, so it shouldn't display at all. If you DO see header text that says "The INVISIBLE Section Header!" then your browser doesn't support that value. If you DON'T see it, then view the source code of this page to see how the element is included inside the HTML code.</p>
</body>
</html>
Back to the CSS Page where you were
