Cascading Style Sheet
A Cascading Style Sheet sets the style for all html pages that are linked to
it. They are useful for large websites because they allow the webbie to
encode style specifications only once, instead of individually for each page in
the site. This can drastically reduce the webbie's redundant
workload. Style Sheets can set the background color or pattern, the font
face, color, and size for the whole document or for parts of the document, the
characteristics of all of the font tags, like <H1>, <B>, <em>,
<strong>, and so forth. They can determine the placement of
background images, whether or not those images are tiled vertically or
horizonatally, or both. They also allow the webbie to create boxes and
divisions in which the formatting specifications mentioned above are different
from the rest of the page.
Below is a copy of the style sheet used to format all of our pages.
HTML pages are linked to style sheets by including
the following line in the
<HEAD> of your HTML documents: <link
rel="stylesheet"
type="text/css"
href="style.css">
(the href="style.css"
changes, depending on what you named your style sheet).
Our Web Site's Style Sheet
|
|
<STYLE TYPE="text/css">
<!--
A:link { color: #8cdcdb; text-decoration:none; font-family: Arial;
font-weight: bold; font-size: 16px; }
A:visited { color: #3b4948; text-decoration:none; font-family: Arial;
font-weight: bold; font-size: 16px; }
body { font-family: Arial, Verdana, sans-serif; font-weight: bold;
background-image: url(womenBG.jpg);
background-repeat: repeat-y; margin-left: 120px; }
P { line-height: 150%; margin-right: 170px; }
B { color: #a23847; font-weight: 900; }
H1 { font-family: Arial, Verdana, sans-serif; font-weight: bold; font-size:
36; text-align: center; }
H2 { font-family: Arial, Verdana, sans-serif; font-weight: bold; font-size:
22; text-align: left; }
H3 {font-family: Arial, Verdana, sans-serif; font-weight: bold; font-size:
16; text-align: center;}
div.box01 {border: none; background-color: #b5cfcc; float: right; margin-top:
12px;
width: 150px; }
div.head {border: none; margin-top: 12px; margin-bottom: 36px; text-align:
center; margin-right: 160px; }
div.todo {margin-right: 160px; }
-->
</STYLE>
|
The first word of each
specification identifies the element (often a familiar HTML tag) whose qualities
are being defined:
Element
|
What It Does
|
|
A:link |
defines the characteristics of links |
|
A:visited |
defines the characteristics of visited links |
| body |
defines the standard text and background characteristics of
the body, as well as its margins |
| P |
defines the standard text characteristics of paragraphs, as
well as their margins |
| H1 |
defines the characteristics of H1 level headings |
| H2 |
defines the characteristics of H2 level headings |
| H3 |
defines the characteristics of H3 level headings |
| div.box01 |
defines the standard text and background characteristics of
a division labeled box01, as well as its margins |
The brackets enclose all of the
characteristics of each respective element. There is usually a space
between the characteristics and the opening and closing brackets. The
brackets do not have to be on the same line as the characteristics, and often
appear like this:
P
{
line-height: 150%; margin-right: 170px;
}
The characteristics for each element
always appear in two parts. The first part is the class of characteristic,
and the second part is the particular value chosen from the class. (Think
of the class as a gene, and the value as an allele of that gene.) In the
example below, the class is "font-size" and the particular value is
"16px". Classes are always separated from their values by a
colon and a space.
font-size: 16px;
The end of a characteristic is always
signaled by a semi-colon. Some characteristics can contain a string of values,
separated by commas; the characteristic doesn't end until the semi-colon.
font-family: Arial, Verdana, sans-serif;
Class
|
Sample Values
|
Explanation
|
|
color:
|
#8cdcdb; #000000; blue; #0c0; |
determines the colors of fonts; can be used in
all elements that involve fonts (P, body, div, &c.) |
| font-family:
|
Arial, Verdana, sans-serif;
French Script, Amazone, Gigi, cursive; Hollyweird, Curlz,
Transistor, Fantasy; |
sets the fonts for elements that have
fonts. Since users' computers come with different fonts, webbies
generally include several fonts in this command, and conclude with a
general font family (cursive, serif, sans-serif, fantasy, monospace). |
|
margin-right:
|
170px; 7%
|
determines how far the right border of the
element should be from the edge of the page. There are also
margin-left, -top, and -bottom elements. |
|
float:
|
right; left; center;
|
positions elements and allows text to flow
around them (except for the center value) |
| text-align:
|
center; left; right;
|
aligns the text in an element |
|
background-image:
|
url(womenBG.jpg);
|
specifies the filename/address of a background
for a division, paragraph, or body |
| background-repeat:
|
repeat-y; repeat-x; repeat-none |
determines how/if the background image is
repeated. (By default, they are tiled both vertically and
horizontally). This is especially useful for:
- Making a small tile into a border on the left or right
- preventing backgounds with lefthand borders from repeating to the
right on very large monitors.
|
For more information on this subject,
see WDG's tutorial, WebDesign
101's simple explanation of boxes, and W3C's
"Adding a Touch of Style".
Back to How
to Code
This page was written by Melanie Ulrich, and is maintained by Melanie Ulrich.
This page was last updated Saturday, 18-May-2002 08:28:12 CDT
|
