Cascading Style Sheets (CSS); Getting Started
By Will Bontrager
2003-10-01
Reader Rating: 
Got You Wondering?
By now, you've probably been wondering about the
BODY, TD, P, LI, BLOCKQUOTE {
line in file mysite.css. That is a list of tags that the style will affect, tags separated with a comma. In this case, it affects the BODY tag (which is everything in the page BODY that doesn't otherwise have a style), the TD tag (table data cell), the P tag (paragraph), and the BLOCKQUOTE tag.
Let's add another style, one for the H1 tag. Your mysite.css file should now have these twelve lines:
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}
H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
background: blue;
}
The above will cause the H1 text to be 36 pixels in size, bold, centered, colored red, and with a blue background. The font face will be Arial because that's what's specified for BODY, and H1 didn't specify any different.
Once you upload mysite.css, all your web page's H1 text will be the specified style.
A note about degradation: Some users have style sheets turned off in their browsers. Some browsers are unable to process style sheets at all. Although the percentage of those is likely to be tiny, it's still a good idea to design your style sheets so your pages degrade gracefully for such users. In other words, if you're going to specify a font size of 24px, that's closer to a non-style sheet H2 size than it is to H1 or H5. So, if you can, use H2 for that particular font size because it would degrade with more grace than H1 or H5 would in that situation.
Your mysite.css file can contain specifications for any HTML tag. The file can be named something else, if you wish, although by convention it should have the .css file name extension.
Yes, there is a lot more to be learned. Even with just this small amount of knowledge, however, you have the ability to specify the font attributes for any and all HTML tags that contain visible text -- throughout your site. Except one.
Copyright 2004 Bontrager Connection, LLC
If you found this article interesting, you may want to read these as well:
» Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)
» Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)
» Cascading Style Sheets (CSS); Learning More
|
