Now that we've created our first Div. we can explore CSX declarations that allow us to customize the
look and positioning of our div.
The first item of discussion is CSX I.D. CSX I.D. are similar to classes they are defined in your style
sheet and referenced in your HDMI elements.
The primary difference is that once an I.D. has been referenced in an HMO element it cannot be used
again within the same HMO file you might recall that when we created classes we could use that class
as many times as we needed for multiple HMO elements.
This is not the case with I.D. I.D. are generally used for layout elements that will only be needed
once a great place to use I.D. is for defining CSF rules for divs divs are considered layout elements
because they contain content such as graphics text and media that make up our webpage each div normally
requires its own unique set of attributes.
One example is the position attribute in most cases when designing CSF layouts.
You wouldn't have to divs in the same location on the web page.
For this reason we would need to I.D. that define unique position attributes for each div 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 reference it as an I.D..
We need to declare it in the style sheet
let's create our style tags and define the I.D.
We'll call this I.D. Div 1
and when defining an I.D. you need to place the number sign in front of the name
this particular I.D. now contains 4 style definitions the div will be 80 percent of the width of our
content area it will have a 3 pixel block border the background of the div will be yellow and any text
contained in the div will be blue
And we'll also mention again that the style rule for our ideas reference begins with a no sign unlike
our classes which began with a period
with our idols created.
We can now reference this I.D. in our devoted we'll go ahead and apply the idea here.
We need to reference the idea by name and since we named it Div 1 will plug in Div 1.
Now let's go ahead and save our file and preview it in our web browser to see the final result.
So here we can see we have a three pixel block order the background of the div is yellow the text contained
within the div is blue and the div itself is 80 percent of the width of the full content area.
In addition to referencing an I.D. In our div tag we can also create a class and apply it to the div
as well let's say we want in all the text in our div to be underlined.
Well first we need to create the class
so remember that your class starts off with a period followed by the class name
and this is the CSF syntax for
underlined text.
Next will apply.
This class in our div tag.
So just make a space type.
Class equals.
And then in your quotations put the name of the class underlined.
Now we can save or file preview it again
and we can now see that the class has been applied and all the text within our div is underlined.