Cascading Style Sheets (CSS); Learning More
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:
-
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.
-
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.
-
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.
-
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
©2002 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
