ptg16476052194 LESSON 8: Using CSS to Style a Site
There are several other attribute selectors that you may find useful as well. The ^= attri-
bute selector matches elements with attributes that start with the supplied value. The *=
attribute selector matches elements with attribute values that contain the value passed
to the operator. You can match attribute values that end with a certain string using $=.
Finally, the |= operator matches any value in a hyphen-separated list of values.The Tag
I’ve already mentioned that you can adjust the margin, padding, and border of a page by
applying styles to the <body> tag. More important, any styles that you want to apply on
a page-wide basis can be assigned to the page’s body. You already know about setting
the background color for the page by using style="background-color: black" in your
<body> tag. That’s really just the beginning. If you want the default font for all the text
on your page to appear in the Georgia font, you can use the following style:
body { font-family: Georgia; }
That’s a lot easier than changing the font-family property for every tag that contains
text on your page. You can modify the background and text colors of your page like this:
body { color: white;
background-color: black; }One of the main advantages of taking this approach, aside from the fact that it’s how the
standard says you should do things, is that then you can put the style into a linked style
sheet and set the background color for your whole site on one page.
Many layouts require that elements be flush with the edge of the browser. In these cases,
you need to set the margin to 0 for your <body> tag. To turn off margins, just use this
rule :
body { margin: 0px; }Summary
In the preceding lessons, I’ve given you a taste of how to use CSS. You didn’t get the
full flavor because I used them only within the context of the style attribute of tags. In
this lesson, I discussed how you can create style sheets either as part of a page or as a
standalone file that can be included by any page. I also moved beyond properties that dis-
cuss text formatting to explain how to use CSS to lay out an entire page.
By understanding how browsers render pages and how you can affect that process using
CSS, you can achieve the effects you want without writing loads of markup that’s diffi-
cult to understand and maintain.