You’ve used the style attribute to
change the visual presentation of a single element, and the
<style> element to create an embedded stylesheet
to control an entire page. But what if you have twenty pages,
and you want the same stylesheet to apply to all of them. You
could copy and paste the embedded stylesheet to all twenty pages,
but then if you needed to make a change in the style, you’d
have twenty documents to change. What you want is a way to put
the stylesheet into one file and have all twenty pages reference
that stylesheet. Here’s how it works:
Presume you have an HTML document with an embedded
stylesheet which you have tested, and which looks the way
you want.
Take everything between the <style> and
</style> tags except for the HTML
comments (which were used to hide the style from older browers),
and paste it into a file. Give that file an appropriate name.
For example, you would copy and paste all the information
shown below in black into a file called mystyle.css
The extension does not have to be css, but it’s
the one that most people use, and it leads to less confusion if
you follow that standard. In the following example, you would
copy everything in black, leaving out the text in gray.
<style> <!-- body { font-family: arial, helvetica, sans-serif; background-color: white; } p { line-height: 125%; text-indent: 0.5em; } h3 { font-style: italic; color: red; } --> </style>
Since you have copied the information, you may now get
rid of the entire <style> element in your
original HTML document.
Now place the following in the <head> of
every document that should be controlled by that stylesheet:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
The href attribute points to the place where the
stylesheet can be found. You should use a relative path name, so if
a document in a subdirectory needs the stylesheet, you may have to
write something like href="../mystyle.css" to get
to the correct directory.
That’s all there is to it. Now any change that you make
to mystyle.css will be reflected in all the pages
that link to it.
Sometimes you will use style constructs that don’t work
well in older browsers (or don’t work at all). If
you import a stylesheet, it does the same as the
<link>, but it works only in newer browsers.
The folowing example shows a document that uses two stylesheets.
The first one, all_browser_styles.css is linked in,
so all browsers will use it.
The second one, new_browser_styles.css,
is imported, so only the latest browsers will use the specifications
in that stylesheet.
<head> <link rel="stylesheet" type="text/css" href="all_browser_styles.css" /> <style type="text/css">@import "new_browser_styles.css";</style> </head>
id as a selector
We have discussed the use of classes
to apply styles to specific elements within a document For example,
you can have three paragraphs that all have class="warning".
Sometimes you
want a style to apply to one element, and only that one
element.
For example, what if you wanted a “banner section” that occurred
only once on a page? In that case, you would set up a <div>
with an id attribute. The value of the id
attribute must start with a letter, and it must be unique. If you
say <div id="banner">, then you cannot have
another element of any kind anywhere else in that document that also
has id="banner". To associate a style with an
id, you use the # notation, much as you did for
within-page links. In our example, we might say:
#banner {
font-size: 200%;
background-color: #cff;
font-style: italic;
border: 4px solid teal;
padding: 0.25em;
}
Note: If you look at the source for this page, you’ll see that
we have a <div id="top-navig"> for the navigation
bar that appears only once at the top of the page. Its corresponding
style specifier is #top-navig.
We want to create a page layout as shown in the diagram below, with fixed dimensions for each section of the page. This is known as an “ice” design—no matter how big or small the browser window becomes, the sizes of the columns stays fixed.
| Banner | ||
|---|---|---|
| Middle column | Center column | Right Column |
To specify exactly where an element must appear on the screen,
we use the position: absolute specification, and
then specify the left or right, and
top or bottom location of the element,
as well as its width and, where applicable,
height. Here is a stylesheet that
restricts the page content to a total of 640 pixels width:
#top {
position: absolute;
top: 5px;
left: 5px;
height: 60px;
width: 635px;
padding-bottom: 2px;
border-bottom: 2px solid green;
}
#left {
position:absolute;
top: 70px;
left: 5px;
width: 200px;
}
#middle {
position: absolute;
top: 70px;
left: 210px;
width: 200px;
border-left: 1px solid gray;
border-right: 1px solid gray;
padding-left: 2px;
padding-right: 2px;
}
#right {
position:absolute;
top: 70px;
left: 420px;
width: 220px;
}Note: according to the standard, the width refers
only to the content width, and does not include the
border, padding, and margins. Netscape 6, Mozilla, and Opera all
follow the standard. Internet Explorer, on the other hand, includes
margin, padding, and border as part of the width. Thus,
this page that uses the stylesheet will
not look exactly the same on Internet Explorer as it does on the
other browsers.
Here is an example of a layout that has a fixed width for the left and right columns, but has a middle column that shrinks and grows along with the browser window. Here is an example with borders shown on the columns to make the relationships of the segments clearer.
By using percentages for widths, it is possible to make a completely liquid design. Here is an example, but it is not one that will appear “pixel-perfect” in all browsers. For more details on multi-column layouts that will work well in all browsers, see http://glish.com/css, http://www.bluerobot.com/web/layouts, or http://www.state.ky.us/kystandards/templates/
See the sidebar at the right? It works because we have set the
float presentation attribute to right, which
pulls the text out of the flow and puts it at the right side of the
screen (much as align="right" does with an image).
You can float an element to either the left or right, but make sure you set a width, otherwise it will take up the entire width of the browser window.
Just as <br clear="right">
ensures that the next paragraph begins after a floated image, you
set the clear: right; style to make paragraphs (like this
one) start after the sidebar is finished.
If you are using constructs like float, which don’t
work in older browsers, you will probably want to import the stylesheet
rather than link it. You might also want to consider putting this
into your stylesheet:
.please {
display: none;
}
And this into your HTML document, to tell your readers why it doesn’t look beautiful.
<html> <head> <style type="text/css">@import "mystyle.css";</style> <title>Example</title> </head> <body> <p class="please"> This site’s design is only visible in a graphical browser that supports web standards, but its content is accessible to any browser or Internet device. </p> <p>The rest of your document goes here</p> </body> </html>
The first paragraph won’t show up in the
newer browsers, since they will import the
stylesheet and display none
of the paragraph. The message will show up in the old browsers that cannot
handle @import.