Cascading Style Sheets for
Better Web Design
by Case Stevens
In cascading style sheets you can specify how your web pages will
be presented on the screen by simply predefining page elements such
as fonts, headers and links.
You can add these predefined elements in the head-section of your
pages, but more interesting is to use them in a single .css file
and include that file in every page on your site.
All you have to do is include in your HTML header. (the path in
the href must point to the place where your .css file is stored)
There are two main benefits to using css sheets in a separate file:
1. more flexibility; only one (1) file to update
2. less HTML coding and easy replacement of deprecated HTML. I'll
explain more of this below.
First, let me tell you I am NOT a cascading style sheet professional.
I just use it.
If you want to become one, there are great css resources and tutorials
out there.
Just go to
http://www.w3.org/Style/CSS/learning http://www.htmlhelp.com/reference/css/
to mention a few, but there are many more. Type 'cascading style
sheets' in your favorite search engine and you get plenty of information.
But just being a layperson in css emphasizes the importance of
this web design tool. I started using cascading style sheets in
its most elementary form. All you have to do is name the page element
that you are going to specify and add its specifications in curly
brackets. Here's my first css file:
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt;
font-style: normal; line-height: normal; font-weight: normal; text-decoration:
none; color: #000000 }
By simply saving this code in a style sheet file and including
it in my webpages I suddenly didn't have to define FONT statements
in the body of my pages any more. Wow, that saved me a lot of coding!
Big advantage (no. 2).
AND .....
I had fewer errors in my HTML, because I didn't have to close that
awkward FONT tag (at the wrong place). Big advantage (no. 2).
When I discovered this, I immediately began adding definitions
for other tags like H1, H2, linktext (not visited, visited and hover)
and special colors in text.
If I want to change the look of my H1-header, all I have to do
is change the specs in my style sheet and presto .... the H1 is
changed across my whole site. How's that for flexibility? Big advantage
(no. 1).
When I once redesigned my site I used HTML validators to see how
I was doing. To my surprise I found that some HTML commands, the
most important one being FONT, were deprecated in HTML 4.0. That
means eventually these commands will not be used anymore.
So I had to do something. Again, style sheets came to the rescue.
All I had to do was define how my fonts would look like in my style
sheet and I had the problem solved. Big advantage (no. 2).
Now I use css to define headers, footers, special text colors,
special fonts and font sizes, special links etcetera. If I ever
discover I need some extra lay-out or style, I just add one line
to my .css file. It's so easy!
Try it. Start using style sheets. You're more flexible and it will
save you lots of time.
Wish you success.
Case
Stevens
Case Stevens, owner of AnOwnSite
Internet Marketing, is experimenting with different marketing
techniques, websites, traffic and lead generation. He publishes
his experiences in a newsletter featuring understandable, successful
low cost Internet marketing techniques, ideas and strategies, articles,
news, tips & tricks and interesting (free) downloads.
Subscribe at Affordable
Online Strategies
Article Source: http://EzineArticles.com/
Return to the
Resources Archive
|