What is a cascading
A cascading style sheet is a small text file that defines the visual appearance of
ALL of the web pages on your site. Simply put, it's one separate file that
defines all of the "styles" used on your web pages. For
Quikstore, we call it "styles.css".
A link (defined below) to this file is inserted into the <head>
tags of the pages where you want to apply the styles. This eliminates the
need to define the font attributes, and many other details, on EACH of
your pages. Everything is in one place so that a change in the style sheet
affects a change on all pages that link to it. It's an awesome way to make
fast, global changes to the appearance of your web site.
Even the page you are reading right now is using the styles.css to
define the appearance. Just take a look at the source code of this page.
You'll quickly notice that there is no font tags used.
The pages now become very clean and easy to work on.
Why should cascading
style sheets be used?
The idea behind cascading style
sheets is to separate the appearance, or style, from the structure, thus
allowing HTML to do what it was intended to do, which is define structure
independent of appearance or browser types.
With a cascading style sheet,
you can control not only the font attributes, such as type, face, size,
and color, but also the line height, letter and word spacing. One style
sheet can be used for all the pages in your web site, which saves
formatting time, reduces document size, and brings a uniform design to
your pages. Because the pages are leaner, download time is decreased
creating a faster site.
Probably one of the biggest benefits of using style sheets is a much
more uniform look between browser types. Yes, the look of your pages will
be almost identical in both Internet Explorer and Netscape as well as the
other browsers. This saves a tremendous amount of time formatting the
pages so they display correctly in both browsers.
How does it work?
Let's take a look at an example definition that you would find in a
typical cascading style sheet. QuikStore 2.11.00 and above uses a style sheet
file called styles.css that is
located in the document root directory. This is the same directory as the quikstore.html
page. We strongly suggest opening this file in a text editor like notepad
and taking a look at it. Inside this file you will find a list of HTML
tags and their attribute definitions.
typical <P> or Paragraph tag might look like this:
This entry defines the font attributes for ALL <P> tags used in
your pages. You'll notice it defines the font-family as Verdana, The color
as #5C4033, and the size to be 10 point.
When the browser loads the
page, it will use these definitions to set the attributes of the text inside
all <P> tags used on the page.
A typical td (table cell) tag in a style
sheet may look like this:
The first section defines the font type, color, and size for all TD
the page. The second, highlighted section, defines the background
color for all of the td tags that have a "class" of cartRow.
"Classes" allow you to define sub-attributes but only for
special uses. We don't want all TD tags to have this background color,
just those that we specifically identify as using the cartRow class.
A TD tag that uses a "class" would look like this on the page:
When this cell in the
table is displayed, it will have a light gray background
Linking to the
In order to implement a style sheet on a page you need to add a line to
the header section of the page that looks like this:
<!--<link rel="stylesheet" type="text/css" href="../../styles.css">-->
<link rel="stylesheet" type="text/css" href="%%web_site_url%%/styles.css">
You'll notice that the first line is
commented out. We did this because Netscape Browsers will error out on
this entry. That line is there so that when you edit your pages using an
HTML editor, you can see what the page looks like when the style is apply.
You MUST uncomment this line when
you are editing the page or the editor will use all of the default
settings and the page will be pretty ugly.
Don't forget to
comment that line back before uploading it to your server. The second
line is used when the page is on the server; %%web_site_url%% is
replaced with your web site url.
More Information About Style Sheets:
Guide to Cascading Style
Style Sheets: CSS1, CSS2 Tutorials, Books, Resources, Help
Web Style Sheets Home Page