Edit a style sheet.

When you modify a style sheet, you are modifying the look and layout of all the pages that use this style sheet. This means that any pages created from the template set that used this style sheet as the default, or any pages to which you have attached this style sheet, will reflect changes to the style sheet. Follow the steps below to edit a style sheet:

1. From the SimpleSite Home page, select the site with which you want to work from the drop-down menu of available Web sites, and then select Manage the stylesheets for this Web site, and click Next.
2. In the following page, select the style sheet you want to edit from the "Available style sheets" drop-down menu.
3. Select Edit this style sheet, and then click Next. You will move to "Edit stylesheet..." page.
4. Make the desired changes to the style options for each layout area and/or section of your Web pages. See the section below for detailed instructions for choosing styles for your Web page.
5. Preview your stylesheet, and then click Save. When finished, click Save and Close.
   The Cancel, Save, and Save and Close buttons apply to the entire style sheet, and are just placed between every section for your convenience. Wherever you are on the style sheet editor, clicking Save will save all of the changes you made to the style sheet.

Choose style options on the style sheet.

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; these vary depending on the template set you are currently using.

For the classic course templates, these are the sections on the style sheet editor:

Body:	The main content area of the page.
Banner:	The optional banner that runs horizontally across the top of the page.
Navigation bar:	The column on the left of the page that contains links.
Table of contents:	The anchor links to sections on the page that are created automatically in the navigation area by SimpleSite.
Page title:	The course information located in the top center of each page (e.g. Department, Course Number, etc.).
Section heading:	The title of each content section in the main area of each page.
Paragraph:	The text area of each content section in the main area of each page.
Fine print:	The text that appears in the footer of your page (the last updated and course email address).

For the enhanced template sets, these are the sections on the style sheet editor:

Page body:	The font used in all sections of your Web page.
Header:	The horizontal area at the top of your page.
Header links:	The links in the horizontal area at the top of your page.
Subheader:	The second horizontal area at the top of your page.
Subheader links:	The links in the second horizontal area at the top of your page.
Left column:	The vertical area at the left of your page.
Left column links:	The links in the vertical area at the left of your page.
Center column:	The vertical area in the center of your page.
Center column links:	The links in the vertical area in the center of your page.
Right column:	The vertical area at the right of your page.
Right column links:	The links in the vertical area at the right of your page.
Footer:	The horizontal area at the bottom of your page.
Footer links:	The links in the horizontal area at the bottom of your page.
Navigation elements:	The boxed borders around links in the header, subheader, left, and right columns.
Highlighted navigation element:	The background color of the current page in the navigation elements.
Titles:	The title of any content section, image gallery, journal, or journal entry on your page.

Below is an explanation of the various style options available on the style editor:

background-color:	Sets the background color of the layout area or section. Enter the hexidecimal code for a color, or click Open palette and select a color from the palette.
border-color:	Sets the color of the boxed borders around links in the header, subheader, left, and right columns. Enter the hexidecimal code for a color, or click Open palette and select a color from the palette.
border-width:	Sets the width of the boxed borders around links in the header, subheader, left, and right columns. Select a width from the drop-down, or enter a number and select a unit of measure from the drop-down menu.
border-style:	Controls the appearance of the borders around links in the header, subheader, left, and right columns. Select a style from the drop-down menu.
color:	Sets the color of the text in the layout area or section. Enter the hexidecimal code for a color, or click Open palette and select a color from the palette.
padding:	Controls the amount of space between the borders of a layout area or section and the content contained in that section. Enter a number and select a unit of measure from the drop-down menu.
font-family:	Sets the font-family used by the page, layout area, or section. Select a font-family from the drop-down menu.
font-size:	Sets the size of the font in the layout area or section. Select or enter a number and select a unit of measure from the drop-down menu.
font-style:	Controls the appearance of the font in the layout area or section (italic, oblique). Select a style from the drop-down menu.
font-weight:	Controls the appearance (bold) of the font in the layout area. Select a style from the drop-down menu.
text-decoration:	Controls the appearance (underline, strikethrough) of the font in the layout area. Select a style from the drop-down menu.
text-align:	Controls the alignment of the text in the layout area or section. Select an alignment from the drop-down menu.
vertical-align:	Controls the vertical alignment of the content in the layout area or section. Select an alignment from the drop-down menu.
width:	Controls the width of the left, center, and right columns in the enhanced templates. Enter a number and select a unit of measure from the drop-down menu.