|
What are Style Sheets?
Cascading Style Sheets provide a method of controlling how HTML
documents appear. Replacing a web site's style sheet can radically alter
the way it appears. Our templates usually have 4 main things you will
need to control. That will be the four main colors of the template.
There are MANY different places on the internet that will help you learn
every section of your .css. Learning the different aspects of your .css
will give you the power to change many aspects of your website.
The place we recommend to learn about Style Sheets is:
http://www.w3.org/Style/CSS/
How to read your 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:
- .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.
- 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!
- 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.
- Find the corresponding tag in the correct Style Sheet (see the
table at the top of this page).
- 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! |
