| Cascading Style Sheets Basics | | | | A cascading style sheet is a separate file that |
| If you're not a web designer, but have nevertheless | | | | contains all the style rules that tell a browser how to |
| experimented with HTML or popular editors like | | | | display a web page. |
| FrontPage to try to build a website, if you didn't use | | | | You can use a style sheet to define the attributes |
| cascading style sheets you probably came across | | | | that are common to all pages, for example, the |
| most of the common problems that cascading style | | | | background, the link colors, the font type and size, |
| sheets were created to solve. | | | | the width and borders of your tables, the size and |
| If you don't use cascading style sheets: | | | | color of your headings, etc. You can also use them |
| You will have to define the different web page | | | | to create specific attributes (called "classes") that you |
| attributes in each and every page you build, in order | | | | can refer to from any of your web pages at any |
| to preserve your site's look and feel. This means that | | | | moment. |
| every time you create a new page, you will have to | | | | How do I use a style sheet? |
| specify the background color, the font type and size, | | | | A style sheet is saved as a separate document. If |
| the color of your links, the type, size and color of | | | | you want a web page to follow the rules outlined in a |
| your headings, the width and borders of your tables, | | | | style sheet, it must contain a link to the style sheet. |
| etc. | | | | When a browser requests a web page, the web |
| As a consequence of (1), the size of your pages will | | | | page will link to the style sheet, which will in turn |
| turn out to be many kilobytes more than if you didn't | | | | instruct the browser to display the web page using |
| have to repeatedly specify all those attributes in | | | | the style attributes defined in the style sheet. |
| every page. | | | | What are the advantages of style sheets? |
| As a consequence of (2), you will incur in higher | | | | Style sheets ensure visual continuity throughout a |
| hosting costs, since you will need more server space | | | | site. By referring to the same style sheet, all pages in |
| and a higher data transfer allowance. In addition to | | | | a site can display the same stylistic qualities. |
| that, your pages will take longer to load. | | | | Style sheets simplify your site's maintenance. By |
| However, the biggest problem will come when you | | | | concentrating your style definition in one external file, |
| decide to make a change in the look and feel of your | | | | any change you implement in your style sheet will |
| site (for example: to change the color of your links). | | | | instantly apply to all the web pages linked to it. |
| You will have to open each and every page you've | | | | By pulling the style definitions out of your pages, you |
| ever built and manually change the link colors. | | | | will make them smaller and faster to download. This |
| At this point, you've probably concluded that there | | | | will allow you to make more efficient use of your |
| must be a better way. Fortunately, there is, and that | | | | web server space and your data transfer allowance. |
| better way is to use cascading style sheets. | | | | For more in-depth informaton about cascade style |
| What are cascading style sheets? | | | | sheets, read our cascade style sheets tutorial. |