A
<div> divides a page into separate sections. Simple as that. It’s how you tell these sections how to behave that makes the magic happen. You can adjust margin, padding, background and font colors, borders, width, height and a lot of other basic parameters without much fuss. They are very handy for keeping things tidy.
With the use of CSS Classes you can have more than one style per HTML element. So if you want one block of text to be white and another block to be grey, it’s as simple as adding an extension to your CSS code and make sure you specify this extension in your HTML.
Now, IDs differ from Classes in the way that retail products differ from their serial numbers. So you may set up a Class that is used in several elements, but you may only have one unique ID in any one HTML document for things to function properly.
In this example he has created a simple page with HTML:
- <html>
- <head>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <div id="navigation">
- <ul>
- <li><a href="index.html">Home</a></li>
- <li><a href="about.html">About</a></li>
- <li><a href="portfolio.html">Portfolio</a></li>
- <li><a href="contact.html">Contact</a></li>
- </ul>
- </div>
- </body>
- </html>
And then he has styled it with CSS:
- #navigation {
- width: 100%;
- height: 60px;
- background: #3e3e3e;
- position: absolute;
- top: 0;
- left: 0;
- }
- #navigation ul {
- margin: 0;
- list-style-type: none;
- }
- #navigation a {
- color: #FFF;
- text-decoration: none;
- }
- #navigation a:hover {
- color: #1dbaf8;
- }
- #navigation ul li {
- float: left;
- line-height: 60px;
- margin-right: 10px;
- }
