MaKo 4 CSS: CSS Basics - DIV and SPAN

This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

The Basics

<DIV> and <SPAN>

<div> is short for division [within a document], that means it is a container, a block level element that has a wide variety of uses.

<div> (and <span>) have no inherent properties of their own, and that makes them so well suited for applying classes to block level elements (the <div>) or inline elements (the <span>), even if there is no existing HTML tag to apply the classes to.

You can use the <div> to position and style whole selections and these sections can contain other elements.

Example: You create a special class named "box" with CSS:

.box {/*this is a box */
  background: #FFFFFF;
  color : #000099;
  font-family : Arial, Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  padding : 2px;
  margin: 2px;
  border-color : #FF0000;
  border-style : groove;
  border-width : 2px;/* the border property in longhand*/
  }

Now you apply this in your document, via the <div> tag, like:

<div class="box">content of box</div>

Back to the Top

The fascinating part now is that you can place other HTML elements into this box, *even other block level elements*, like <p>, <ul> or whatever:

<div class="box"><p>The fascinating thing about the <div> tag 
is that you can apply the declared styles to other elements within 
the <div>, even block level elements, like:
</p>
    <ul>
    <li>the <p> tag</li>
    <li>the list elements, like
    <ol><li> the <ul> element</li>
           <li> the <ol> element</li>
    </ol>
    </li>
    <li>and all other elements within the <body> 
    of a document</li>
    </ul>
<p>Isn't that great?</p>
</div>

.... and it still offers you the possibility to apply styles to the elements within the <div> tag.

CSShark - Basic Div and Span Usage The CSS Know-How Site

The Basics

<DIV> and <SPAN>

CSShark - Basic Div and Span Usage
The CSS Know-How Site