Of all the tags in the hypertext markup language, this is one of the most useful. This is because the division tag, in conjunction with CSS is used to determine the layout of much of a web page's content.
The div tag is a block element. This means it that it normally starts with a new line like the other block-level elements: <p>, <h1>, <ul>.
This is ok:
<div><a href="somewhere.html">Go somewhere.</a></div>
This is not:
<a href="somewhere.html"><div>Go somewhere.</div></a>
At its most basic, the div tag defines a rectangular area on a web page:
All of the style tags we've already talked about can be applied to a div tag - plus a lot more.
Since div tags in your document will probably not all have the same styling, you won't want to place general div style tags in the head of your document as you did with p tags.
To allow various div tags on your Web page to each have its own style, you identify them with class or id attributes:
- class - is used when more than one div will have the same styles applied to it
- id - is used when a single div will have styles unique to it
Here's how it looks with a class attributes:
.whatevernameyouwant {
border: #c00 solid 1px;
margin: 15px;
text-align: center;
background: #ddeeff;
}
.someothername {
border: #00f solid 1px;
margin: 15px;
text-align: center;
background: #ffdddd;
}
</style>
Above goes in head of doc. The "." in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:
<div class="someothername">456</div>
Any div that you give a classname of "whatevernameyouwant" will have the whatevernameyouwant styles applied to it. You can make up whatever names you want for the classes but your life will be easier if you use useful descriptive classnames like "sidebar" or "imagethumbs."
With an id attribute you would use "#" sign rather than a ".":
#whatevernameyouwant {
border: #c00 solid 1px;
margin: 15px;
text-align: center;
background:#ddeeff;
}
</style>
Above goes in head of doc. The "#" in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:
As mentioned, the id attribute is used for unique occurrences and the class attribute is used for style groups that will be used mulitple times.
