In previous lecture notes we
learned how to use the style attribute to change
the color, font-size, and
font-family of text within an element.
This is called an inline style, because the style
is right inside the tag to which it is being applied.
This approach is fine as long as we are applying styles to
only a few things. But what happens if we have a page like this,
and we want all the definitions to be green. (You should cut
and paste this markup into the <body> of a copy
of your template file so that you can try it
for yourself.)
<p>Typically, an <dfn>input/output bus</dfn> contains <dfn>expansion slots</dfn>, which are designed to accommodate <dfn>expansion cards</dfn>, also called <dfn>adapters</dfn>. <!-- text with twenty more definitions --></p>
Clearly, adding a style="color: green;" to
every <dfn> tag is not a good approach. Rather,
we would like some way to apply our style to all the <dfn> elements within the document. We do
this with a local stylesheet or
embedded stylesheet. To create an embedded
stylesheet, insert the following into the head of your document:
<style type="text/css"> </style>
Your style information will go between the tags. There’s
one problem, though—really old browsers don’t recognize
the <style> element, and will display anything
between the tags as part of the page. To stop this from happening,
we will put an XHTML comment between the tags.
<style type="text/css"> <!-- --> </style>
Style information consists of selectors, which tell which elements we want to style, and the visual property that we want to change, and the value for that property. This takes the form:
selector { property: value; }To be specific, in this case, we want to select all the
<dfn> elements. The visual property that we want
to change is the color, and the value should be green. Our stylesheet will look like this:
<style type="text/css">
<!--
dfn { color: green; }
-->
</style>Try it and find out. Notice that there are no angle brackets around the selector, and no quote marks around the property and value. That’s because stylesheets have their own syntax (grammar rules), and they aren’t the same as the ones for XHTML.
Let’s add another selector. We want all paragraphs to be in 12-point Arial, Helvetica, or sans-serif font. Notice where we have put the curly braces in the following stylesheet; normally, you want the curly braces on lines by themselves if you have more than one property or value to set. Although whitespace doesn't matter to the browser, it does make things easier to read if you indent properly. Notice also that each property/value pair ends with a semicolon. Technically, the last pair doesn't need one, but putting one in makes your markup more consistent.
<style type="text/css">
<!--
dfn { color: green; }
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
-->
</style>When you looked at the result of the previous stylesheet
(you are trying it out, aren’t you?!), you saw that the definitions also appeared
in 12-point Arial font. Because the <dfn>
elements are nested within the <p>, they
inherit all of their parent’s visual properties.
“But wait,” you say. “What if there’s a conflict?” Change the stylesheet as follows, and see what happens.
<style type="text/css">
<!--
dfn {
color: green;
font-size: 14pt;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
-->
</style>You see that the definitions inherit the
font-family (where
there is no conflict), but the font-size on the
definition overrides the setting on the paragraph.
There are properties besides color, text size,and font family that you can set in a stylesheet. Many of these are summarized in the book in Appendix B.
One very common mistake is for people to specify
font-style: bold;; this does not work because
bold indicates the font’s weight, not its style.
Another common mistake is to try to specify font-color;
there is no such thing. It’sjust plain color.
Here is a very good reference for CSS.
You can do more than specify a background-color
for an element. You can specify an image which is to be
tiled, that is, repeated horizontally and vertically
to cover the element’s area. It's called tiling because it's like
putting identical tiles on a floor to cover it.
Let's say you have a light brown tile like the one you see at the right,
stored in a file named tan_tile in the pictures
directory. The following stylesheet shows how to
tile the entire body of the document; we are tiling the area to show
what it looks like:
<style type="text/css">
body {
background-image: url(pictures/tan_tile.jpg);
}
</style>You must put the parenthesis directly after the word
url; no spaces allowed! You do not need to put quote
marks around the filename unless it contains blanks, but you know
better than to put blanks in filenames anyway.
But wait, there’s more! With modern browsers, you can tell the browser to tile only in the vertical direction or in the horizontal direction, tell where the image should start relative to the top and left of the screen, and whether the background should scroll with the content or stay in a fixed position on the screen. You can experiment with all these properties if you are using a standards-compliant browser such as Mozilla, Internet Explorer 6, or Opera.