Design Primer 5: Styles and Divs
So divs were mentioned in Part 3 and then there's been nothing on them yet. What's up with that? Good question - we'll have a bit of fun with divs here.
The Purpose of Divs
Divs allow us to divide web pages into sections, enabling us to apply styles to all the content in the div by just adding a style to that div.
We'll do a simple example (we'll use embedded style sheets for simplicity's sake, but this will work just as well with an external style sheet).
Example: Simple Div Styling
<html>
<head>
<title>Divs Are Fun!</title>
<style type="text/css">
h1 { color: red; }
.pageTop { color: green; font-size: 15pt; }
.pageBottom { color: blue; font-size: 10pt; }
</style>
</head>
<body>
<h1>Using Divs!</h1>
<div class="pageTop">
<p>This paragraph is in the top div.</p>
<p>So is this one.</p>
<p>And this one!</p>
</div>
<div class="pageBottom">
<p>This paragraph is in the bottom div</p>
<p>Also in the bottom div</p>
</div>
</body>
</html>
See how all the paragraphs in a div have the same style? We didn't even need to include p in our style sheet.
Now for some real fun - we'll get into moving the divs around the page for different layouts. Ready? Let's do it! So we can see what's happening, we'll add a border around the divs and give them a fixed width (otherwise they are as wide as the web page).
Example: Positioning Divs
<html>
<head>
<title>Divs Are Fun!</title>
<style type="text/css">
h1 { color: red; }
.pageTop { color: green; font-size: 15pt; position: relative; top: 40px; left: 100px; }
.pageBottom { color: blue; font-size: 10pt; }
div { border: 1px solid red; width: 300px; }
</style>
</head>
<body>
<h1>Using Divs!</h1>
<div class="pageTop">
<p>This paragraph is in the top div.</p>
<p>So is this one.</p>
<p>And this one!</p>
</div>
<div class="pageBottom">
<p>This paragraph is in the bottom div</p>
<p>Also in the bottom div</p>
</div>
</body>
</html>
Cool, huh? Here is what happened:
- The top div has moved 40 pixels down and 100 pixels to the right (top: 40px; left: 100px; inserted 40 pixels above and 100 pixels left of the div, pushing it down and to the right)
- The divs are outlined and have a width of 300 pixels because we added the div { border: 1px solid red; width: 300px; }
- The position: relative tells Internet Explorer to move the top div starting from where it would appear on the screen normally. As a result, the two paragraphs actually overlap one another
- If we had used position: absolute, it would position the top div 40 pixels to the right and 100 pixels below the top-left corner of the screen. Try it for yourself:
Example: Absolute Positioned Divs
<html>
<head>
<title>Divs Are Fun!</title>
<style type="text/css">
h1 { color: red; }
.pageTop { color: green; font-size: 15pt; position: absolute; top: 40px; left: 100px; }
.pageBottom { color: blue; font-size: 10pt; }
div { border: 1px solid red; width: 300px; }
</style>
</head>
<body>
<h1>Using Divs!</h1>
<div class="pageTop">
<p>This paragraph is in the top div.</p>
<p>So is this one.</p>
<p>And this one!</p>
</div>
<div class="pageBottom">
<p>This paragraph is in the bottom div</p>
<p>Also in the bottom div</p>
</div>
</body>
</html>
Now the top div overlaps the web page heading as well. Crazy stuff, eh? There's lots more you can do with CSS, but that's beyond our scope for today. That's it for CSS: you now know the basics. Good job! All that's left is to introduce you to some common styles and their usage in the CSS Quick Reference article (a good place to refer back to when starting out!).
