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):
(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 12 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, 12 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 effect, tags separated with a comma. In this
case, it effects 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 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.
“WillMaster Possibilities” ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com