Style Sheets

To get to the Styles screen, log in as an administrator, click Settings, and choose Styles from the Look & Feel menu.

What are Style Sheets?

The Styles section of Site Settings allows administrators to customize the "look and feel" of the Skin currently applied to their site. While Layouts control the basic positioning of content on the site, and content that appears on every page, style sheets control the fonts and colors of content on your site, as well as the placement of elements defined in the Layout. Skins are a bundled combination of a Style sheet and a Layout.

Style sheets use a formatting language called CSS. See this Introduction to CSS and related tutorial and reference for more information.

Note: Since most browsers cache style sheets, you will have to force a refresh the page without caching (hold the Crtl key down and press F5 in Internet Explorer) after applying a new style sheet. Closing and reopening your browser usually works, too.

Style sheets are managed just like normal pages on your site. The following characteristics make a page usable as a style sheet:

• The  "Serve raw page content" box must be checked in Page Properties, available on the Edit screen.
• The Type drop-down in Page Properties must be set to "Cascading Style Sheet".
• The "Edit this Page as Plain Text" box should be checked in Page Properties.

Edit Your Site's Current Style Sheet

You may have one or more style sheets listed. New style sheets are installed when you apply Skins to your site. You can also create new style sheets from scratch by following the rules for style sheets outlined above. The style sheet labelled "Current Default" is the one currently used by your site. While individual pages can over-ride the style sheet they use, in most cases the Current Default is the style sheet being used to format your site. To edit this style sheet, simply choose the Edit action from the Actions dropdown.

You can change your site's default style sheet by selecting the Make Default action from the Actions drop-down. 

Testing Style Sheet Changes

To test a change to a style sheet, you can display any page on your site using any style sheet listed on the Styles page by selecting the "Test with Page" action from the Actions dropdown. A new window will open showing the specified page using the style sheet you want to test. You can also set the style sheet for an individual page in Page Properties (on the Edit screen) and view that page for testing.

Managing Style Sheets

Style sheets are managed just like normal pages on the site. You can access all the page commands, such as Edit, Versions, Attachments, Copy and Rename from the Actions drop down for any of the style sheets listed. 

Getting Help

See this [[http://www.w3schools.com/css/css_intro.asp Introduction to CSS]] and related tutorial and reference for more information.

See http://www.htmlhelp.com/reference/css/ for another excellent guide to cascading stylesheets.

If you come up with a style sheet you'd like to share with other EditMe customers, visit the Stylesheets page on the EditMe wiki and post it!