Cascading Style Sheets (CSS); Learning More
By
William
Bontrager
In the
"Cascading
Style Sheets (CSS) -- Getting Started" article, the first in this series,
you learned how to use an external style sheet. You simply include one line
of code on your pages to affect the entire page with the style specified
in that external style sheet.
This article will show you how to embed a style sheet directly into your
web page. It will also show you how to define custom styles, styles not
associated with any particular HTML tags.
There are four ways a style can be applied to a web page:
1. Styles are specified through the use of an external file, a method called
"external style sheet" or "linked style sheet." 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. This is the method you learned in the first article in
this series.
2. Styles are specified in the HEAD area of each page the style is applied
to. This method is called "embedded style sheet" and is the method you'll
learn in this article.
3. A style is specified in the actual HTML tag where the style is applied.
This is called an "inline style." This will be addresses in a future
article.
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." This will be addresses in a future article.
Using an Embedded Style Sheet
To use an embedded style sheet, create a test page and insert these seven
lines into the HEAD area:
<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE {
font-family: sans-serif;
}
-->
</STYLE>
There is no need to upload the test
page to your server. It can be tested right from your hard drive.
That's all there is to it. The text on your test page is "magically" converted
to a sans-serif font according to the style you've defined.
Note: If you have FONT tags specified in the source code of your test page,
those will need to be removed so the CSS style can do its job.
You can specify exact font names instead of the generic sans-serif, serif,
or monospace. 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.
You've undoubtedly noticed that the method of defining a style is exactly
the same whether you're using the embedded style sheet presented in this
article or the external style sheet presented in "Cascading Style Sheets
(CSS) -- Getting Started"
If you used the CSS definitions presented in that previous article and made
them into an embedded style sheet, this would be the result:
<STYLE TYPE="text/css">
<!--
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;
}
A:hover {
text-decoration: none;
color: purple;
background: pink;
font-size: 22px;
font-weight: bold;
}
-->
</STYLE>
The method of specifying styles
is the same whether you embed the style sheet or use an external file.
Using an external style sheet, all the style definitions are contained in
one file. Using an embedded style sheet, each page has it's own definitions.
With the former, you can change the style of many web pages by changing only
the one file containing the style definitions. With the latter, you can change
the style of individual pages with no effect on others.
Defining and Using Custom Styles
Regardless of what type of style sheet you use, you can define your own custom
styles.
When you create a custom style, the name you give the style must not match
any HTML tags. When you define the style, the name must begin with a period,
but when you use the style then don't type the period.
Here is an example of a basic style for common text tags and a custom
style:
<STYLE TYPE="text/css">
<!--
BODY, TD, P, LI, BLOCKQUOTE {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}
.reallybad {
font-size: 24px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: #CCCCCC;
background: #333333;
}
-->
</STYLE>
Custom styles are used within HTML
tags to change the style of the entire tag -- DIV, SPAN, P, TD, etc. A custom
style, once defined, is called a "class." Thus, to use a certain style, you
use the "class" attribute and the class name as the value. When you specify
a style in an HTML tag, it overrides whatever style, if any, that was previously
defined for that tag. Here are a couple examples:
<p class="reallybad">Hello everyone!</p>
<p>Hello <span
class="reallybad">everyone!</span></p>
In the first example line, the entire paragraph is printed with style
"reallybad". In the second line, only the word "everyone!" is printed with
that style ("Hello" being printed with whatever style is defined for the
P tag).
You can define and use as many different custom styles as you please.
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
