|
If you've been putting off using CSS because you have some uncertainty about exactly how to use it, then today is the day you'll get started. You'll see the simplicity of CSS. You'll realize that making style changes to your site's web pages is not only quick and easy, but also fun.
There are four ways a style can be applied to a web page. Only the first method is presented in this Getting Started article. The other methods are mentioned so you're aware they exist.
- Styles are specified through the use of an external file, a method called "external style sheet" or "linked style sheet." This is the method you'll learn in this article. There is one file on your site that specifies the styles. Then, one line in each of your web pages links to that file. To change the style on all your web pages, simply change the external file.
- Styles are specified in the HEAD area of each page the style is applied to. This method is called "embedded style sheet."
- A style is specified in the actual HTML tag where the style is applied. This is called an "inline style."
- A combination of embedded and external style sheets. For this, each page has an embedded style sheet. Within the embedded style sheet are certain codes that import one or more external style sheets. This method is called "imported style sheet."
To create an external style sheet, make a file named mysite.css with the following three lines:
BODY, TD, P, LI, BLOCKQUOTE {
font-family: sans-serif;
}
Upload mysite.css to the same directory on your server where you have your main index page.
Now, in the source code of one or more of your web pages, in the HEAD area, put this line (make a backup of the pages before changing, in case you want to restore to the original):
(The above assumes your web page is in the same directory as the style sheet file, but that situation isn't required. The HREF="__________" URL can be a relative URL or an absolute http://... URL.)
That's all there is to it. Every page with the above line in the HEAD area will have it's text "magically" converted to a sans-serif font.
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.
For 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 tag in the HEAD
area.
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:
The one exception is the anchor tag, often referred to as the "A" link tag, the tag you use when you create a link on a web page. The A tag can have three different styles, one for each of it's states: link, active, and visited. To see how it works, change your mysite.css style sheet file so it has these thirty 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;
}
A:link {
color: yellow;
background: red;
font-weight: bold;
}
A:active {
text-decoration: underline;
}
A:visited {
color: red;
background: yellow;
font-style: italic;
text-decoration: line-through;
}
With the above, your linked text will be bold, colored yellow, and with a red background. When the link is active (while it's being clicked on), it will be underlined. Once the linked page has been visited, the text will be italic and have a line through it, the text color will be red, and
the background will be yellow.
Note that the "active" and "visited" behave differently in different browsers. If you specify font changes in the "active" style, the change might or might not display. Changing the font style to italic in the "visited" style causes the font to be italic; however, in some browsers the font weight remains bold as specified in the "link" style and in other browsers the font weight becomes normal.
Another A tag style you may wish to utilize is "hover" style. This style becomes effective when the mouse cursor hovers above the linked text. The "hover" style works in IE 5+ and in Netscape 6+. The style has no effect for browsers that don't support "hover". Here is an example "hover" style:
A:hover {
text-decoration: none;
color: purple;
background: pink;
font-size: 22px;
font-weight: bold;
}
The above causes any underlines or line-throughs to disappear, turns the linked text color purple with a pink background, changes the text size to 22 pixels, and makes the text bold.
Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.
About the Author:
Will Bontrager produces the "WillMaster
Possibilities" ezine.
More Interesting Articles
|