|
Cascading Style Sheets
Including CSS Rules
A Motivational Example |
Redefining The Tags |
Including CSS Rules |
Customizing Other Tags |
Customizing Tags |
Classes
There are three different ways you can add style sheet
capabilities to a page. Each method provides a different
degree of access. You can:
- add a css rule inside a
single tag; then the rule applies only to that instance
of that tag
- put a rule in the <head>
tag of a page; then the rule can apply to the entire page
- put a rule in an external
file; then the rule can be applied to multiple pages (even
an entire web site)
Methods 2 and 3 allow us to create a new "default" version
of a tag, for a page or set of pages, respectively. Method
1 is most often used to override one of these new defaults
on a case-by-case basis, either to return to the original
browser's default version of a tag or to create a new one-time
use version of a tag. Now let's look at examples of each
of these approaches.
Method 1:
Applying a Single CSS Rule Inside a Single HTML Tag
At one extreme of css accessibility, we can arrange that
a rule applies only to a single instance of a tag. We can
do this by adding a css rule inside the particular
tag that we want to affect.
For instance, suppose we've used method 2 or 3 (we'll
see how to do this in a moment) to create a new default
version of the <h3> tag that has the charactersistics
shown in our example of the previous section: a dark
red (cc0000) bold sans-serif font at 16pt. But now,
for some reason, we decide we want one <h3> tag on
one of our pages to show the heading in dark
green (00cc00) italics.
We could always go through the procedure that we had to
use before the availability of style sheets: use the <font>
tag to specify all the characterstics we want for this particular
heading (and add <p> after the heading). But now,
since we've used style sheets to create a new default version
of <h3> we can also use css to modify only
those properties of the new default that we want to change
for this particular heading: We do this by adding css to
redefine these properties inside the tag that we want
to modify:
|
<h3 style="font-style:
italic; color: #00cc00;">
H3 Heading in Green Italics
</h3>
|
Note that we add the css rule to the tag by introducing
a new attribute for the tag: style.
The value we give this attribute is just the rule that we
want to implement, i.e., the list of new definitions that
we want to provide for the <h3> tag in order to override
its default properties. Namely, we include font-style:
italic to put the heading in italics and we include
color: #00cc00 to make the
heading dark green. As in our previous example of rules
for the various h-tags, each definition consists of the
name of the property to be defined and the value that the
property is defined to have. The property and its value
are separated by a colon. Consecutive definitions in the
rule are separated by semicolons. The entire rule (i.e.,
the value assigned to the style attribute of the tag) is
enclosed in quotes. Here's the rule in action: Example
2.
Method 2:
Putting CSS Rules on the HTML Page on Which They Are Used
Now let's see how to modify a single HTML page so that
the set of six css rules we listed previously will create
new default versions of the <h1>,..., <h6> tags
on this page. All we have to do is add the following inside
the <head> tag of our page:
|
h1 {font-family: Arial, Helvetica, sans-serif;
font-size: 24pt; font-weight:
bold; color: #cc3300}
h2 {font-family: Arial, Helvetica, sans-serif;
font-size: 18pt; font-weight:
bold; color: #cc3300}
h3 {font-family: Arial, Helvetica, sans-serif;
font-size: 16pt; font-weight:
bold; color: #cc3300}
h4 {font-family: Arial, Helvetica, sans-serif;
font-size: 14pt; font-weight:
bold; color: #cc3300}
h5 {font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; font-weight:
bold; color: #cc3300}
h6 {font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; font-weight:
bold; color: #cc3300}
|
Note that this is just the set of six css rules we defined
earlier, now enclosed inside <style>
and </style>. Also note
that <style> has an attribute here:
type="text/css"
This attribute identifies the type of style sheet being
specified (as we noted earlier, there are actually other
types of style sheets than cascading style sheets, but these
alternative types aren't widely supported). Including this
information probably isn't really necessary for newer browsers;
these browsers should be able to determine the correct style
sheet type from the syntax of the rules. But doing so is
probably a good idea since it may help older, pre-css-capable
browsers ignore the code (also see the next paragraph).
Including the attribute may also help people who examine
this part of your HTML page's coding.
Note that we've also enclosed the six rules inside an
HTML comment (just inside <style> and </style>).
It's not absolutely necessary that you do this, but it's
a good idea. This will also help make sure that older, non-css
capable browsers won't see (and perhaps attempt to display
literally) the css rules.
Here's another look at these rules in action: Example
1. After you click this link, use your browser to view
the source of the page that's loaded into the new window.
Look at how the sections headings are produced on this page:
no <font> tags, only the <h1>,..., <h6>
tags. Also notice that the six css rules creating the new
tag versions are located in the page <head>.
Note that once we have included the css rules that "reconfigure"
the <h1>,..., <h6> tags, then anytime
we use the default version of one of these tags on this
page the headings will be produced according to the specifications
of these rules. (We can still override the new specifications
on a case-by-case basis if we wish.)
Method 3:
Putting CSS Rules in an External File
Instead of putting css rules in the head of the page where
we want new versions of tags to be used, we can place the
css rules in a separate file and then refer to that "external"
file on the page where we wish to use the new tag versions.
(We call this an external file, because now the rules are
placed outside the file containing the HTML that will be
affected by the rules.)
One advantage of this approach is that we can refer to
the file with the css rules on any number of HTML pages.
This will allow us to apply a set of customized tags uniformly
to a whole group of pages (even to an entire web site if
we wish). In addition, if you later need to reconfigure
your customized tags on a large number of pages, all you'll
need to do is make the desired changes to the css rules
in one place: just edit the rules in this external file.
Then voilà, all your custom headings and/or other
tags will be automatically updated on all of the HTML pages
that refer to the external file.
The format of the external file is very simple: it's just
a list of css rules for the tags that we want to define.
If you wish, you can also include css comments to
help you remember what the rules are for, how you may wish
to use them, etc. In this external file the list of rules
should not be enclosed in a <style> tag or
in an HTML comment. In fact, you should not include any
HTML tags in an external css file.
You can include a single line comment in a css file by
preceding the comment with two forward slashes //.
You can include multiline comments by putting /*
at the beginning of the comment and */
at the end. If you use multiline comments, be careful to
use the beginning and closing symbols in pairs. If you start
a comment but forget to signal its end, things will probably
not work as you'd intended.
You can give an external css file any name that's legal
on the computer where the style sheet will be used. It's
probably a good idea to add a .css extension
to the file name; this will help you remember the purpose
of the file. The .css extension is not required for the
external style sheet files to work however.
Connecting an External
CSS File to an HTML Page
In theory, there are two ways an HTML page can refer to
an external file that contains css definitions: the HTML
file can 1) link to the css file or 2) it can import
the css file. In practice, however, import is not
yet widely supported by existing browsers, so we won't say
any more about it here.
Linking an HTML file to an external css file is extremely
simple: you just need to include a <link>
tag in the head of the HTML file. The <link> tag has
three attributes, two of which are always the same (so you
can think of them as part of the boilerplate for the tag).
The third attribute gives the name of the external file
being linked. For example, to link an HTML file to a set
of css rules defined in a file named stylefile1.css, you'd
use a link tag with these attributes:
- rel=stylesheet
(always the same)
- type="text/css"
(always the same; and optional)
- href="stylefile1.css"
This page links to style file rules in an external file:
Example
3. And here's the link tag the example HTML page contains:
| |
<link rel=stylesheet
type="text/css" href="stylefile1.css">
|
In this case the external file stylefile1.css is in the
same folder as the HTML file that is linking to it. If these
files are in different folders, the value assigned to href
should include not only the name of the css file but also
its location (path) relative to the HTML file.
A Shortcut: Eliminating
Repetition in Rules
You've probably noticed that in our above rules for the
<h1>,... ,<h6> tags there is a lot of repetition.
All of the tags are defined to use the same font face, weight,
and color; the only differences in these rules are the font
sizes. In cases like this we don't really need to repeat
all the definitions that are the same in every rule. Instead
we can use a single rule to set the common characterstics
of several tags and then use additional rules for individual
tags to specify only the ways in which we want the tags
to differ. Here's a case in which we get the same results
as before but with a more compact set of rules: Example
4. And here are these new more compact rules:
|
h1, h2, h3, h4, h5, h6
{font-family: Arial, Helvetica, sans-serif;
font-weight: bold; color:
#cc3300}
h1 {font-size: 24pt;}
h2 {font-size: 18pt;}
h3 {font-size: 16pt;}
h4 {font-size: 14pt;}
h5 {font-size: 12pt;}
h6 {font-size: 10pt;}
|
Note that to have a set of tags be governed by the same
rule we list all those tags, separated by commas, at the
beginning of the rule, just outside the braces.
|
Video Central 影像
SMJK Gallery 华中廊
