Cascading Style Sheets


What is a cascading style sheet?

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 are no font tags used. The pages now become very clean and easy to work on.

Click Here to see what this same page looks like without the style sheet applied.

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.

Example one:

A typical <P> or Paragraph tag might look like this:

p {
   font-family: Verdana;
   color: #5C4033;
   font-size: 10pt;
}

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. 

Example two:

A typical td (table cell) tag in a style sheet may look like this:

td {
   font-family: Verdana;
   color: #5C4033;
   font-size: 10pt;
}
   .cartRow{
      background-color: #F5F5F5;
   }

The first section defines the font type, color, and size for all TD tags on 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:

    <td class="cartRow">...</td>

When this cell in the table is displayed, it will have a light gray background

Linking to the style sheet

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:

    <head>
    <!--<link rel="stylesheet" type="text/css" href="../../styles.css">-->
    <link rel="stylesheet" type="text/css" href="%%web_site_url%%/styles.css">
    </head>

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.

It will look just like this if you don't uncomment that line.

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 automatically replaced with your web site url when the page is displayed.

More Information About Style Sheets:

Using style sheets is VERY easy to do and saves an enormous amount of time in the design of your pages. While we have given you a brief overview of the process here, there is ALOT more you can do with style sheets and there are a bunch of great web sites related to this subject. Here are a few that we thought might be helpful:

Guide to Cascading Style Sheets

Cascading Style Sheets: CSS1, CSS2 Tutorials, Books, Resources, Help

Web Style Sheets Home Page