Using CSS In Your Web Site
How would you like to have a tool that could make your web site
load faster? What if it could also allow you to make changes across
you entire site with just a few keystrokes? And while we're at it,
let's make it the standard for new browsers, so that your site will
still work properly in the future.
Well, that tool is here now and it's called Cascading Style Sheets
(CSS). CSS is the part of the code that defines the appearance of
a web site.
HTML 4 is the current version of the markup language that is used
to control the structure of a web page. It was created by the World
Wide Web Consortium several years ago, and one of the main goals
of this version was to separate the structure of a web page from
its presentation. This means that HTML is used only to create the
overall structure of a web page, which includes things like headlines
and paragraphs. This leaves CSS to describe what different size
headlines should look like, and how paragraphs will appear on the
screen.
The problem with many sites today is that they were constructed
before HTML 4 had been released, or by designers who hadn't yet
made the transition. These sites are more difficult to debug or
update because the HTML was used i many creative way to do define
the presentation as well as the structure, and it wasn't designed
to do that. They also contain a lot more code, since each headline,
paragraph and other text had to have its font, font size and color
defined. This extra code adds to the time it takes to download a
web page into someone's browser.
These sites are time-consuming to update, as well. If you decide
to make all your largest headlines red instead of blue, each one
has to be changed one at a time. If enough changes need to be made,
there's always the chance one will be missed, or perhaps changed
incorrectly.
CSS to the Rescue!
The CSS for your web site is in a text document separate from the
rest of the HTML code. In the head, or invisible, part of the page
code, is a line that links that web page to the style sheet. When
a browser reads the code, it uses the information in the CSS to
define the way the page looks.
So for instance you might write your CSS to make your largest headlines
with a size of 20 pixels, in blue, using the Verdana font. The CSS
code to create this looks like this:
<#h1 { font-family: Verdana, Helvetica, Arial, san serif; font-size:
20px; color: blue;}>
(The pound signs are only used in these examples so you can see
the code.)
Remember, this will be just part of the CSS code that is in a text
document that might have been typed up using Notepad, or any other
word processor. The reason several fonts are listed is because HTML
can only use fonts that are already on the visitor's computer, and
since we can't know for sure what everyone has, we give the browser
choices. If the browser has Verdana, that's the font this headline
will use. If it doesn't have Verdana, it checks for Helvetica, and
so on. If the computer doesn't have any of the first three, it will
use whatever default san serif font is on that machine.
When a headline is created for a web page, the code might look like
this:
<#h1>Buy Now!<#/h1>
If the page with this code is linked to the style sheet with the
code we showed previously, this headline will be in 20 pixel blue
Verdana on every computer that views the page. Without using CSS,
this code will look different in different browsers, depending on
what defaults have been set. On my computer, this would be in 24
pixel New Times Roman, and it would be black.
In the days before CSS, in order to get this headline the way we
wanted it, we'd have to specifically spell out every feature, and
the HTML code, which we saw a moment ago was so short, now would
look like this:
<#h1><#font face="Verdana, Helvetica, Arial, sans-serif" #color="blue"
#size="20px">Buy Now!<#/h1>
Make Things Simple with CSS
That's quite a bit of extra unnecessary code, especially when you
multiply it by the number of headlines, paragraphs, lists, captions
and links that also need this treatment. It's so much easier to
define each type of text in CSS once and let all the pages linked
to it use those settings.
You can now see why modifying a site would be so much easier with
CSS. Without it, if you wanted the headlines changed from blue to
navy, and the text in each paragraph made slightly larger, every
headline and paragraph in the entire site would have to be changed
individually.
With CSS, you make a small change to the headline code, another
small change to the paragraph code, and your whole site is quickly
and uniformly changed! This is just one simple example of the many
ways CSS can be used in a web site.
Conclusion
Older browsers don't recognize all the current CSS standards, so
many of its most powerful features don't work in them. As newer
browsers are developed they are including more and more support
for CSS standards, so in the future we can look forward to having
more control over the layout and appearance of our web pages.
Les Goss
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Les Goss is el presidentŽ of ZebraMoon Web Design, where he educates
his business clients as he builds their web sites. To subscribe
to the free email newsletter list or to find out more about how
we can serve you, please come to: http://www.zmoon.com/.
Return to Beginning HTML Tutorial Index
|
WEBSITE101 TUTORIALS
HTML Tutorial
| CGI
tutorial | Email
Tutorial | Spam
Tutorial | Cookies
Tutorial | Privacy
Tutorial | Windows
Tutorial | DreamWeaver
Tutorial | Domain
Name Tutorial | Business
Plan Tutorial | Search
Position Tutorial | Online
Advertising Tutorial | Ecommerce
Essentials Tutorial
|