<div> Tag Tutorial
Thinking Inside The Box...
A <div>, quite simply and literally, is a box.
In its default state, a div is transparent and expands/contracts to fit it's content.
Div's have many uses and a myriad of style attributes can be applied to them. For example, all of the code and comment boxes that you've encountered in these tutorials are done with div's that take their attributes from my stylesheet. This is what the CSS looks like for the code boxes you've been seeing...
width: 546px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-style: dashed;
border-color: #CCCCCC;
background-color: #FFFFFF;
text-align: left;
padding: 0px;
}
.somecode p {
width: 526px;
margin: 10px;
line-height: 100%;
font-size: 1em;
font-family: 'Times New Roman';
color: #AAAAAA;
}
When I implement them it looks something like this...
<div class="somecode">
<p>
The code that you see is in here.
</p>
</div>
Notice the use of the "nesting" thing again in the second set of declarations (.somecode p). The paragraph tag is only effected by those style rules when it's inside of the CSS class "somecode". Any paragraphs outside of the <div> are not affected. I had a few reasons for why I did it that way, but they aren't important to know at this point.
Don't get intimidated by the many declarations. If you look at them, most of them are pretty self-explanatory and all of them will be explained in other sections. To the contrary, you should be excited in having that much control! Once you learn what you can do, you can make the page look EXACTLY like you want instead of settling for the closest thing that the WYSIWYG editor will give you!
Creating a div Class...
While you could apply your style declarations to the div selector like this...
div {border-width: 1px;}, every time the browser encountered <div> ALL of them would behave the same way. Chances are that you'll have several different div's, and so you'll want to create a separate class for each one.
Let's create an outlined box for one of the paragraphs on the first page (index.html). But first, we need to create a link back to index.html from pagetwo.html...
<head>
<title>ChangRox.com-(page two)</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p>Here are some heading tag examples...</p>
<h1>Large Heading on Page Two</h1>
<h2>Medium Heading on Page Two</h2>
<h3>Small Heading on Page Two</h3>
<a href="media/redheadfull01.jpg" target="_blank">
<img width="127" height="169" src="media/redheadthumb01.jpg" />
</a><br />
<a href="index.html">Home Page Click Here</a>
</body>
</html>
Save/refresh, then click the link to go back to your home page. Then, in your style sheet, add this new class...
background-color: silver;
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
a:link {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: green;
text-decoration: underline;
}
a:active {
font-weight: bold;
color: green;
text-decoration: underline;
}
a img {
border: none;
}
.redborderwhtbg {
border-style: solid;
border-width: 1px;
border-color: red;
background-color: white;
}
Now open index.html with Notepad so that you can edit it. Implement the new class "redborderwhtbg" by surrounding the second paragraph with div tags like this...
<head>
<title>ChangRox.com</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<p class="crrt">Hello World!</p>
<div class="redborderwhtbg">
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
</div>
<p>The site for extolling the virtues of Chang.</p>
<p><a href="pagetwo.html">Click here to go to Page Two!</a></p>
</body>
</html>
Save/refresh. Notice that all div's, by default, are 100% of the width of whatever they're contained in (in this case the <body>) unless another width is specified. The height defaults to the height of the div's contents (plus some padding) unless another height is specified.
Making Some Sense of Div's...
You may be thinking that if you wanted to, you could have just applied your new class to the second paragraph by adding <p class="redborderwhtbg"> and you'd be 100% correct, because paragraphs are also "box" elements. But suppose you wanted to have multiple paragraphs surrounded by the red border? Putting them inside the <div></div> tags is the best solution.
As you'll learn in more advanced tutorials, you can do all sorts of things to div's including setting positions for them on the page, layering them on top of each other, nesting them inside of each other, and on, and on. But, for right now I'm going to show you a more traditional (and controversial) way to get boxes on your page...
Basic HTML Tables Tutorial... →
© 2008 - 2011 fapmaster.com