CSS: Top Secret Classification
(Page 1 of 4 )
This article will self-destruct in twenty seconds. Okay, not really; it will probably take you longer than that to read it, and you may even want to use it as a reference. In this mind-blowing episode, we discuss the many classification properties in CSS, all of which give you the ability to determine how and where your elements are displayed.
Displaying Elements
There are quite a few ways to display elements in CSS: inline, block, run-in, compact -- the list goes on and on. All those terms are probably a whole bunch of jibba-jabba to you at the moment, but don't worry fool! With the help of my good buddy Mr. T, we will clear it up for you in a jiffy:
<html>
<head>
<style type="text/css">
h3
{
display: inline
}
</style>
</head>
<body>
<h3>A Horse is a horse</h3>
<h3>Of course, of course</>
<h3>Unless that horse is at McDonald's<h3>
<h3>In which case it's lunch.</h3>
</body>
</html>
The above uses an inline display, which shows the elements without any distance between them. The above displays as:
A Horse is a horseOf course, of courseUnless that horse is at McDonald'sIn which case it's lunch.
In the next example we will use the display block to force several spans to appear on several different lines, as opposed to together:
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>A Horse is a horse</span>
<span>Of course, of course</span>
<span>Unless that horse is at McDonald's</span>
<span>In which case it's lunch.</span>
</body>
</html>
There are other ways to use the display properties, and here they are in a list:
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row
table-row-column
table-row-group
table-header-group
table-footer-group
table-column-group
table-column
table-cell
table-caption
Note that browser support of display is iffy, so be sure to check that your page looks right in multiple browsers (you should really be doing this anyway, you elitist swine!)
Next: Floating Elements >>
More Style Sheets Articles
More By James Payne
