Cascading Style Sheets

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 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. 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. 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 Sheets Cascading Style Sheets: CSS1, CSS2 Tutorials, Books, Resources, Help Web Style Sheets Home Page

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 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.

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:

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:

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 Sheets

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

Web Style Sheets Home Page