Now that we have created our first
<div> we can explore CSS declarations that allow us to customize the look and positioning of our
The first item of discussion is CSS IDs. CSS IDs are similar to classes. They are defined in your style sheet and referenced in your html elements. The primary difference is that once an ID has been referenced in an HTML element it cannot be used again within the same HTML file. You might recall that when we created classes, we could use that class as many times as we needed for multiple HTML elements. This is not the case with IDs.
IDs are generally used for layout elements that will only be needed once. IDs are commonly used for defining CSS rules for Divs. Divs are considered layout elements, because they contain content such as graphics, text, and media that make up our web page. Each
<div> normally requires it's own unique set of attributes. One example is the
position attribute. In most cases, when designing CSS layouts you wouldn't have two divs in the exact same location on the web page. For this reason we would need two IDs that define unique position attributes for each
Let's create a style rule for our
<div> before applying it to the
<div> we created earlier.
In order to create a style rule for our
<div> and apply an ID, we need to declare it in a style sheet. Create
<style></style> tags and define the ID.
border: 3px solid black;
This particular ID contains four style definitions. The
<div> will be 80% of the width of our content area. It will have a three pixel thick - black border. The background of the
<div> will be yellow, and the any text contained in the
<div> will be blue.
Note that the style rule for our ID reference begins with a # sign, unlike our classes which begin with a period.
Now we can reference this rule in our
<div id="div1">This is a div, with some text content</div>
Save the file and preview it in your web browser to see what the final result looks like.
We can see the black border, yellow background, and blue text.
In addition to referencing an ID in our
<div> tag, we can also create a class and apply it to the
<div> as well. Let's say we wanted all the text in our
<div> to be underlined.
First we need to create the class:
Now we can apply the class by referencing it in our
<div id="div1" class="underline">This is a div, with some text content</div>
Save your file, and preview it, to see the final result.