|
Using CSS In Your Web Site
By Les Goss
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 in many creative ways 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.
| 
Free Downloads
RSS Feed