What
are Cascading Style Sheets (CSS)?
|
Cascading
Style Sheets are an automated way to apply formatting to multiple or
selected pages within a website. They
are written by using a variant of HTML (HyperText Markup Language).
All of the functions that can be
used within the CSS document, can also be placed in the original HTML
source of your webpage. Adding
the same HTML to vast amounts of pages would become a long and
laborious task, and in theory would be impractical.
This is where Cascading Style Sheets come into play; you designate
how the presentation of your web pages should look, then apply the CSS
file to all the pages. The
next time you view your web pages, you will see the results, all of your
pages will have applied the same formatting.
|
How
do I create a CSS? |
Using
FrontPage 2000, File, New, Page.
In the new dialogue box that is opened, select the Style Sheets
tab, and double click Normal Style Sheet
When the new page is
opened, just above where the text curser is located you will see new_page_1.css
|
CSS
Commands
|
All
CSS command start with a tag for a specific function. For example the letter a is in
reference to hyperlinks, the letter p
paragraphs. Next
:<value> may follow. Not
all are followed by an extra value. For
example:
If
you were to type:
a:link
{ color: #FFFF00 }
a:visited {
color: #FFFF00 }
a:active
{ color: #FFFF00 }
- a:link
refers to the standard colour of any hyperlinks on your webpage
- a:visited
refers to links that have previously been followed
- a:active
refers to the link that has last been selected and is thus
active
- Colour:
any colour using the HEXADECIMAL code, most paint packages will tell
you this code.
a {
text-decoration: none }
This
removes the underline from hyperlink, something that you can see I have
used on the design of this site.
|
Commands for more complex
formatting |
To
apply formatting to the main body of your page you would have to do the
following:
body
{ font-family: Verdana, Ariel, Helvetica;
font-size: "2"; color: #FFFF00; background-color: #000000 }
-
font-family:
Specifies, in order of preference, which fonts the user is
presented with when viewing your page. If, the case above, Verdana isn’t available, then Ariel
would instead be used,
-
font-size:
How large your font will appear,
-
color:
What colour the text will be,
-
background-color:
The background colour of the page.
Other
commands that can be used when formatting text are:
font-style:
font-variant:
|
What now? |
This has only been a basic starter into
cascading style sheets, more information will be added shortly, but in the
meantime please visit the link below. This site has more detailed
information and a comprehensive list CSS functions
http://www.w3.org/TR/REC-CSS1
|
|
© 2001. A Snooze UK
Production. All rights reserved |
|