blog top 101 other stuff

getting started with cascading style sheets in golive

When the web and HTML were first invented, site designers had few options for formatting their pages - a few font sizes, and little else. People who were used to having a variety of formatting tools in their desktop publishing and word processors quickly became very frustrated with the limitations of HTML.

And that is the whole idea behind Cascading Style Sheets (CSS). Just like style sheets in programs like PageMaker and Word, CSS allows you to create a set of rules on how to format text in a document (or any other aspect of how the page is displayed) that can be applied to one, two or all the pages in your site. Basically, CSS allows you to separate the content of a page from its format.

In a simple example, suppose you have a site in which you want the header text on all the pages to be a certain size, color and alignment. You could just format the header on each page with all the attributes you want as you build the page. Of course, if you decide to change something about the header, you would have to open each page and make the changes. However, by using a style sheet for the pages of your site, changing just the attributes of the sheet will change every page it has been applied to.

There are two different ways to apply style sheets to your web pages. Internal Style Sheets are part of the code in a single page so that all the rules apply only to the individual page. Although the rules don’t affect other pages, GoLive makes it possible to export the code to make an external style sheet which then can be applied to other pages.

The second method for using CSS, and the best method for site-wide design, is to create an External Style Sheet. This is a separate document within your site which contains the formatting rules. This allows you to apply any or all of the rules to any page in the site. External sheets are the most flexible and is the method shown in this starter tutorial.

As with everything else in web design (or computers, for that matter), there is much more to CSS than this. But follow along with this short example to see the basics of how you can use CSS.