XHTML and CSS - ID's
ID's
In this tutorial we're going to be learning about ID's. An ID are pretty similar to classes, you use ID's a lot with div tags to position boxes at different locations. For example if you had one div you wanted in the top left and another you want to go in the bottom right, first let's make two divs.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <div>This is a div.</div> <div>This is another div.</div> </body> </html>
In order to change these two divs we need to create two ID's, writing this in CSS is nearly the same as when you add a class, but rather then using a dot you use a hash, I'm just going to name these ID's div1 and div2, you can name them anything you want.
<html> <head> <title> This is the title. </title> <style type="text/css"> #div1 { } #div2 { } </style> </head> <body> <div>This is a div.</div> <div>This is another div.</div> </body> </html>
Next we're going to give our ID's some styling, for the first div I'm going to give it a red background to make it stand out more, set the position to absolute, I know I've not explained what the position property dose yet but I will be in a few tutorials, just know that we need it to move the div tags easily, next I'm going to move it 20 pixels from the top and 30 pixels from the left.
<html> <head> <title> This is the title. </title> <style type="text/css"> #div1 { background-color: red; position: absolute; top: 20px; left: 30px; } #div2 { } </style> </head> <body> <div>This is a div.</div> <div>This is another div.</div> </body> </html>
Next I'm going to be adding some styling to our div2 ID, I'm going to do nearly the same as our first ID but the background is going to be green and the div is going to be 20 pixels from the bottom and 30 pixels from the right.
<html> <head> <title> This is the title. </title> <style type="text/css"> #div1 { background-color: red; position: absolute; top: 20px; left: 30px; } #div2 { background-color: green; position: absolute; bottom: 20px; right: 30px; } </style> </head> <body> <div>This is a div.</div> <div>This is another div.</div> </body> </html>
When you view your page now you'll see that nothing has changed, this is because we have not applied our ID's to our tags yet, to do this set the attribute id to the name of your id without the hash, the hash is a mark so that CSS knows that it's a ID.
<html> <head> <title> This is the title. </title> <style type="text/css"> #div1 { background-color: red; position: absolute; top: 20px; left: 30px; } #div2 { background-color: green; position: absolute; bottom: 20px; right: 30px; } </style> </head> <body> <div id="div1">This is a div.</div> <div id="div2">This is another div.</div> </body> </html>
Now when you view your page you'll see that one div is in the bottom right of the page and the other is in the top left, the div's have the styles of that we have assigned them to.

Page generated in 0.0046 seconds.