Cascading Style Sheets (CSS); Getting Started
By
William
Bontrager
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.
1. 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.
2. Styles are specified in the HEAD area of each page the style is applied
to. This method is called "embedded style sheet."
3. A style is specified in the actual HTML tag where the style is applied.
This is called an "inline style."
4. 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):
<LINK REL="stylesheet" TYPE="text/css" HREF="mysite.css">
(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. 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 preceded 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.
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.
Will Bontrager
About the Author:
Copyright 2003 Bontrager Connection, LLC
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
