Cascading Style Sheets (CSS); Getting Started
By Will Bontrager2003-10-01
A Bit More...
|
|
Okay, there may be just a bit more to it than that. If you currently have FONT tags specified in the source code of your web pages, then those will need to be removed so the CSS style can do its job.
Once all FONT tags removed from your page, let's experiment a bit. In the mysite.css file, change the font from sans-serif to serif:
font-family: serif;
Like magic, all your text is converted to a serif font.
A paragraph about definitions: The "font-family: serif;" line is a style element. Styles can have other elements, like size and color, and some of those are addressed below. Each style element has two parts, as you've noticed. The first part is called the "property" and the second part is called the "value." The property is followed by a colon and the value is followed by a semi-colon. The property must be specified before the value, and they must appear together. Thus, "font-family: serif;"
So far, we've specified the generic sans-serif and serif fonts. These allow the browser to use its default sans-serif or serif font.
You can, however, specify exact font names, and if the font name is available on the user's computer then it will be used. Arial and Helvetica are common sans-serif fonts for PC and Mac desktop computers. To control the exact font name to be used, with backups in case the one you specify isn't available on the user's computer, list the font names in order of preference, separated with a comma. Example:
font-family: arial,helvetica,sans-serif;
The above line in the style sheet will cause the browser to use font Arial if it's available on the user's computer. If Arial is not available, Helvetica will be used. If neither Arial nor Helvetica are available, the browser will choose a sans-serif font that is available. And if no sans-serif font is available, the browser will use its internal default font, whatever that may be.
While you're changing the font family specifications, let's also specify the font size and text color. Your mysite.css file can now have these five lines:
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}
The above specifies a font size of 14 pixels ("px") in height. Font sizes can also be specified in points ("pt") and other measurements. However, use the pixel measurement; pixel measurement maintains the most consistent size among different monitors and operating systems.
The above also specifies a text color. The color can be specified either as a hexadecimal number preceeded with a "#" character (like the example) or by a color name such as "black".
Once you upload the above style sheet, your pages will have black, 14 pixel sized text, Arial font. Change the color to
color: blue;
and suddenly all your text is blue. Change the size to
font-size: 55px;
and your text is huge. Just one simple change in mysite.css changes every page that has the one-line <LINK REL="stylesheet" ...> tag in the HEAD area.
Tutorial Pages:
» Getting Started
» A Bit More...
» Got You Wondering?
» The One Exception
» Another A Tag
Copyright 2004 Bontrager Connection, LLC
|
