|
Changing and Using this Template's Style Sheets Following are quick, simple tips for understanding and changing the Style Sheets we use in this Template... This is not an extensive lesson in Style Sheets and CSS — just enough info to help you change THIS template! |
How to read the Style Sheets:
Open any of the Style
Sheets in your HTML editor — FrontPage, Dreamweaver, etc.
The first sets of
HTML code (the "a" tag, "body", "table, td, P, etc") are there to
set the default fonts, colors, hyperlinks, Heading tags, tables,
etc. So is the "table.amain" — this tag dictates the SIZE of the
layout, its borders, etc.
If you want the backgrounds or default font colors
to change, this is the place to do it!
The rest of the tags exist to define "special"
tables and cells... for example:
1. .navigation
= the bars where the top and
bottom navigation are located... the tag BELOW this, with the
"hover, link, etc.", is what defines the special hyperlink
qualities for ONLY the Navigation bars!
Note: The
same basic rule applies to the ".copyright" tag and
the tag located below it — you'll find several main
tags that work like this. It's the beauty of a
Style Sheet! Using these tags allow us to set up unique
areas with different formatting.
2. You'll see
several tag names, such as ".guide",
".highlight", ".navside".
Each of these tags corresponds with one or more tables or cells
in the Template.
To find out
which tag goes with a cell or table, simply right click in
it, choose "Properties", then click on the STYLE button on
the bottom left of the table or cell property screen. You'll
immediately see a block called "Class". Whatever is in that
block is going to match with a tag in the Style Sheet!
If there is
NOTHING named in the Class block, that probably means that
it is using the "default" format for the "body".
Changing the Style Sheet:
It's easy!
1. Just locate
the CORRECT STYLE
SHEET for the page you're
working on, then look at the Style/Class in the table or
cell properties screen.
2. Find
the corresponding tag in the correct Style Sheet
(see the table at the top of this page).
3. Change the
font, background, cell padding, style, etc., to whatever size or
HEX colors you have chosen, then SAVE the .CSS page back
into the directory of your web site Template!
WARNING:
Do NOT remove formatting codes like "}, {,
;" — these codes are CRITICAL to whether or not the Style Sheet
works! |
