Style sheets allow you to choose the overall look and layout of your Web pages. They also make updating the look of your Web site easier, since all the information about fonts and colors is saved and updated in just one location. Each SimpleSite template set has a style sheet that defines background colors, font, link colors, and other style options. The SimpleSite enhanced templates have fourteen style sheets to choose from, each with a different color scheme.

About style sheets.

Style sheets are files that control how different Web page elements ( backgrounds, headers, body text, links, etc.) appear. Of all the ways to control the design and appearance of your Web site, style sheets are by far the most precise.

There are two kinds of style sheets within SimpleSite: global and local. Global style sheets are used to dictate styles for entire Web sites. Local style sheets are used to dictate styles for individual pages. We highly recommend that you use global style sheets instead of local style sheets. Not only do global style sheets significantly reduce your workload (you only have to create it once, rather than 10 times), global style sheets preserve the continuity between Web pages that is essential to good Web design.

Work with global style sheets.

Click thumbnail to watch a video tutorial.

1. On the SimpleSite Home page, select your project site from the "Available Web sites" drop-down menu. (To return to the SimpleSite Home page from any other SimpleSite page, simply click Home, found at the top of your browser window. )
2. Select Manage the style sheets for this Web site, and click Next.
3. In the next page, you will see an "Available style sheets" drop-down menu. Select a style sheet from the list and click Preview to view it. The preview shows the style sheet as applied to a set of sample Web pages, so you won't see your own content in the preview.
4. Choose one you like from the list, select Set as default, and then click Next. .
5. If you are satisfied with your new style sheet and don't want to edit it, then you're done. However, if you want to edit the style sheet further, you will need to return to the style sheet editor from the SimpleSite Home page.
6. To edit a style sheet, select your default style sheet from the "Available style sheets" drop-down menu, choose Edit this style sheet, and then click Next. You will move to "Edit style sheet..." page.
7. When editing a style sheet, you can change many style options for each layout area, section, or element on your Web page. The sections of the style sheet editor correspond to the layout areas or elements on your Web page. Read a detailed description of the style sheet's sections.
In order to preview your style sheet changes on your actual project site, you should open your Web site in a new browser window or browser tab. If you don't know your site's address, log into the Catalyst tools and select SimpleSite. Choose your Web site from the drop-down menu, select Work on this Web site, and click Next. Select the index page for your project site from the file tree in the left pane. The "Page summary" will appear. Click View or copy and paste the page URL into your new Web browser's address bar. Your project site's Home page should appear in your browser window. In order to see your style sheet changes reflected on your project site, click Save on the style sheet and then Refresh in the Web browser showing your project site.
8. To create a style sheet similar to the example project site, make sure to edit the styles for each section of the style sheet appropriately:
   
   Background color: Make sure to change the background colors to reflect your site color scheme. We recommend basing your color scheme on the picture you chose for your site banner. To change the default color of any part of the style sheet, click the color palette and choose from the colors listed there.
   
   Padding: Padding is used to create space between page elements. We left ours at the default of "4px".
   
   Font: San serif fonts such as Arial, Georgia, and Verdana are the best kind of type for the web. We chose "Verdana".
   
   Font size: Font size should be neither too small nor too large. We have set our fonts at "12px" (excepting Titles at "18px").
   
   Font style, Font weight: Use these to make your font italic or bold. We left these blank.
   
   Text alignment: Align your text to the left, right, or center. We left this blank.
   
   Vertical alignment: Align your links, text, content sections. We chose "Top".
   
   Text decoration (links): Choose how your links will display. We choose "None".
   
   Column Widths: Choose how wide your columns will be. We recommend that you set the width of the left column somewhere between 100-150px. That way your navigation bar won't look different when viewed with other screen sizes. You can set the width of all your columns the same way.
   
   Highlighted Navigation Element: This makes your links in the left navigation bar a different color when you're viewing the linked page. Keep in mind that this only works if you use global navigation.
9. Remember to Save often and Refresh the browser showing your project site to preview your changes on your actual pages.
10. When you have finished editing your style sheet, click Save and close.