 |
Building a Web Site Part
II
Style Sheets |
Style Sheets provide a way to standardize the appearance of many
pages in a web site and make adjustments to all the pages.
FrontPage 2000 provides tools to "automatically" create style
sheets. It may be simpler to just type in the commands for the
style sheet as shown below rather than using the "automatic"
style creation tools of FrontPage 2000.
Here is the basic premise: We create a file called a
"Style Sheet" that contains special commands such as the
fonts, text size, and background for our document. Then, we
include a special HTML command to link to the "Style Sheet" at
the beginning of each web page that uses the style definitions.
Steps to create a style sheet and to incorporating it in each
page in your site.
- Create a new document with the web page editor - it will not be a
typical html page, it will be a "css" document - a
cascading style sheet.
- Save the document using "Save As" and select
"Hypertext Style Sheet" from the "Save As"
menu. Give the file a name such as "mystyles".
The computer will add the ".css" suffix.
- Enter the style sheet text as shown below.
P
{ font-family: arial, helvetica, geneva}
P { font-size: 10 pt}
Table { font-family: arial, helvetica, geneva}
Table { font-size: 10pt}
UL {list-style-type: square}
body {
background-image: url('images/ltblue.gif') } |
- Save the file again now that it is complete.
- Here is a quick explanation of each of the lines in the document
shown above.
| Style Sheet
Command |
Task Performed |
| P { font-family:
arial, helvetica, geneva} |
Each time the "P" (paragraph) marker is
encountered in an HTML file, the font is set to "arial,
helvetica, geneva". |
| P { font-size:
10pt} |
Each time the "P" marker is encountered,
the font size is set to 10 point. |
| Table {
font-family: arial, helvetica, geneva} |
Each time the "Table" command is
encountered, the text will be set (as above) |
| Table { font-size:
10pt} |
Each time the "Table" command is
encountered, size is set to 10 point. |
| UL
{list-style-type: square} |
Each time the "Unordered List" (UL)
command is encountered, the bullet style is set to be a square. |
| body {
background-image: url('images/ltblue.gif') } |
When the "Body" tag is encountered, the
background image is set to be a file in the images folder named
"ltblue.gif". |
Linking the Style Sheet in another document
- Open a web page to which the style definition is to be applied.
- Click the HTML tab at the bottom of the page.
- Insert the command shown below just below the <head> tag:
- "<link REL=stylesheet
href="mystyles.css"
TYPE="text/css">"
- Repeat the process of inserting the
<link> tag at the beginning of every HTML document in a web
site.
- If done correctly, here is what the
HTML version of the page will look like. The line we've added
is bold:
<head>
<link REL=stylesheet
href="mystyles.css"
TYPE="text/css">
<meta http-equiv="Content-Language"
content="en-us">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="GENERATOR"
content="Microsoft FrontPage
4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<title>Using Style Sheets</title>
</head>
<body> |
Closing Note: It is possible to put style definitions
within a single document without using a <link> tag. That is
called an "embedded" style sheet.
There are many other style adjustments
that are possible. Some of those commands are on our Styles
Reference Page. Additional style sheet commands may be found on
the Internet at Network
Communication Design's web site. Still another good site for
information about style sheets is Webreview.com's
Style Sheet Tutorials and Articles. Be aware, though, that the more
technical style sheet commands are likely not to work with browsers
before version 4.0 of either Netscape or Internet Explorer.
This site copyrighted (2005) by
Dr. Blake West - Please credit when linking to
the
site!
Kansas NEA - 715 SW 10th Ave. Topeka, KS 66612.
|