Help Version: 2.12
Last Update: 02/26/01

Quikstore Style Sheet Overview

Probably one of the easiest and most powerful features of Quikstore is the use of Style sheets. With style sheets, you can literally change the look of the entire store in a matter of 5 minutes. If you take a little time to learn about style sheets, you will see just how powerful and beneficial they can be. 

To quickly change the overall appearance for your store, the first place to start is with the styles.css file.  This file contains a list of HTML tags with properties that define the font, size, color, etc.  If you change one of the properties in the styles.css, all of the pages that contain the specified tag will be updated. So, if you change the properties for the <P> tag, ALL of the Quikstore templates that have a <P> tag in them will also be updated to use the properties you set in the styles.css file. 

Simply put, with style sheets there is no need to define these properties for EACH page and each paragraph. The style sheet does this for you when the page is displayed in the browser. We have also found that using style sheets helps to make the pages display more consistently in both Netscape and IE browsers.

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. It's a 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. 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 search.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 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">
</head>

In this case above, the styles.css is located in your document root directory. You could also put the entire URL to the file like this example:

<head>
<link rel="stylesheet" type="text/css" href="http://www.quikstore.com/styles.css">
</head>

 

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 A LOT 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

 

Continue to Database Templates

 


Copyright 1997-2003 iSoft-Solutions, inc.