catalyst said:
Thats a whole lot of job, it means long .css sheet
Not at all.
For example you appear to want every link on the page to be
cornflowerblue (whatever that is). (also see below)
Remove all of the <font> elements color properties and insert a CSS rule:
a {color: cornflowerblue}
Do the same with font-family and font-size and pretty soon you have
Yes, but how to do that with .css ?
<a href=... class='hoveredlink'>
..hoveredlink {color: blue;}
..hoveredlink:hover {color: green;}
Lets extend this. Your navigation lives in a navigation <div> and must be
coloured blue and must be larger and must be green when hovered, however
links that are not part of the navigation (outside that navigation div)
are normal size. The navigation links are also a different font:
<div class=nav>
<a href=...>...</a>
<a href=...>...</a>
<a href=...>...</a>
</div>
<p>Other links: <a href='..'>...</a></p>
a:link {color: blue;}
a:hover {color: green;}
div.nav a {font-size: 2em; font-face: impact}
Three CSS rules (in three lines) to replace a conglomeration of font
elements. And nowhere in the HTML is anything mentioned about colour or
fonts. It's all in the CSS in exactly one place, and not exactly one
place for the HTML page in question but exactly one place for every HTML
page on the site. Want to change the colour of every link on the entire
site? Change one CSS rule.
In general CSS makes everything *simpler*.
Go over to the Zen Garden
http://www.csszengarden.com/
and look at what they do with CSS. Use the "select a design" navigation
bar.
This is not an example of what you should do, but rather what can be
done. It is also a very good example of seperating the presentational
aspects of a page from the content.
There is exactly one HTML file, containing the content. There are many
different CSS files, each presenting this same content in a very
different fashion.