divs and spans
« Previous: Pseudo-class selectors | Next: Border, margins and padding »
<div> and <span> are general-purpose HTML elements which can be used to attach different style rules. On their own they don’t do anything, but with the application of a little CSS they can be extremely useful in achieving finer control over the appearance of a page, particularly for creating page layouts.
<div>
<div> (short for division) is a block-level element - it can contain any other tag (within the <body> tag), including other divs. <div> tags can be used to divide a page into logical sections by placing different parts of your code inside them. For example, consider this simple page:
<body>
<h2>Navigation</h2>
<ul>
<li><a href="page1.html">Page One</a></li>
<li><a href="page2.html">Page Two</a></li>
<li><a href="page3.html">Page Three</a></li>
</ul>
<h1>Page One</h1>
<p>Here is the content of Page One...</p>
<p>This website was designed by Fred Bloggs</p>
<p>Last updated Monday, 19 November 2007</p>
</body>
Looking at this page, we can see that it could be divided into three sections - there is a navigation menu, the main content area, and finally a footer section. We can define these sections using divs:
<body>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="page1.html">Page One</a></li>
<li><a href="page2.html">Page Two</a></li>
<li><a href="page3.html">Page Three</a></li>
</ul>
</div>
<div id="content">
<h1>Page One</h1>
<p>Here is the content of Page One...</p>
</div>
<div id="footer">
<p>This website was designed by Fred Bloggs</p>
<p>Last updated Monday, 19 November 2007</p>
</div>
</body>
This has placed each element within the page into an appropriate section,
which adds a more meaningful structure to the page. However, as it is,
these changes have made no visible difference to how the page looks.
To make proper use of the divisions, we need to create style rules for them,
using their different ids to distinguish between them.
So we could add the following CSS to the <head> element of that page (or an external stylesheet):
#navigation a:link {
color: #090;
}
#content {
color: #333;
background: #eee;
}
#content p {
font-family: Georgia, serif;
}
#footer p {
font-size: 0.9em;
text-align: center;
}
This applies different styles to the different <div> elements, as well as to the elements within them. Chopping pages into divisions in this way provides a powerful and versatile framework for CSS-based designs.
Before you start using divs, be sure and inoculate yourself against divitis, a condition common among newcomers to CSS that causes their pages to become sprinkled with copious and unneccessary <div> tags. If you can apply a desired style to an already existing element, then you should do that. For example, if there was only one paragraph in the footer, we could just use <p id="footer"> on that paragraph.
<span>
<span> is an inline element - it can only contain other inline elements - so it is less poweful than <div>, but can still be useful if you need to apply styles to smaller titbits within the page. For example:
| Code | Output |
|---|---|
<p>Five commonly used fonts on the web are
|
Five commonly used fonts on the web are Arial, Georgia, Times New Roman, Trebuchet MS and Verdana. |
« Previous: Pseudo-class selectors | Next: Border, margins and padding »