Home arrow Style Sheets arrow CSS: Top Secret Classification

CSS: Top Secret Classification

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.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
April 14, 2008
  1. · CSS: Top Secret Classification
  2. · Floating Elements
  3. · Floating Text for a Fairy Tale Look
  4. · Creating a Menu

print this article

CSS: Top Secret Classification
(Page 1 of 4 )

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:



<style type="text/css">



display: inline





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



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:



<style type="text/css">



display: block





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



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!)

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials