Applying Style Sheets

SharePoint uses cascading style sheets (.css) to control the fonts and the background and foreground colors used by the sites on the SharePoint server. The default style sheet is OWS.css which is found in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033\STYLES.

Changes to OWS.css affect all SharePoint sites on the server. For example, making the following change turns all of the body text on the server red:

    body {
        font-family: verdana, arial, helvetica, sans-serif;
        background: white;
        color: red;
    }

Sites using themes are also affected by THEME.css found in the .\TEMPLATES\THEMES\* folders. You can edit THEME.css to change the styles applied by a specific theme. For example, the following change to THEME.css in the NewTheme folder changes the page title font color for the theme created in the preceding section:

    .ms-pagetitle{
    color:black;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:bold;
    }

Changing styles in a theme doesn't immediately change existing sites based on that theme, because style sheets are cached on the client. If you don't see the changes you've made, force a full refresh of the page by pressing Ctrl+F5.

Identifying the class name of styles that SharePoint uses on a page can be difficult. One way to determine the class name of the items on a page is to change the body element of default.aspx (or any other SharePoint page) to include the following event procedure:

 <body marginwidth="0" marginheight="0" ...

Get Essential SharePoint now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial