Office Support / Office 365 Admin / Sites

Customize your public website using CSS

Your public website uses Cascading Style Sheets, or CSS, as part of its design. To make changes to the look of your website that aren’t possible using the website editor, you can modify and add styles.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

In this article

Change styles for the current theme

Each theme has its own style sheets, including one, called the alternate style sheet, that you can easily modify.

  1. Sign in to your website in Office 365.

  2. Choose a theme to use for your website. For information, see Change the look of your website.

    Note   Because changes to the alternate style sheet only apply to pages using the current theme, we recommend choosing a theme before modifying styles.

  3. Go to Site > Edit Style Sheet. This opens the alternate style sheet for the current theme. When you first open this style sheet, each style is commented out.
    Edit Style Sheet dialog box, showing commented out styles

  4. Before making changes, we recommend saving a copy of the alternate style sheet.

    • In the tip at the top of the style sheet, click here.

    • In the Do you want to open or save box, on the Save menu, select Save as, and specify a name and location for the file.

  5. Uncomment the section that you want to change, and modify the values.

For example, this table shows what the HEADER BACKGROUND section looks like before and after changing the header background to red. In the Before column, the close comment symbols (*/) are after the block of code so the code is ignored, and the background color is white. In the After column, the close comment symbols are after the description, and the color value is changed to red.

Before

After

/* HEADER BACKGROUND

#titlerow{

background-color:rgba(0,0,0,0.9);

}

*/

/* HEADER BACKGROUND, changed to red */

#titlerow{

background-color:rgba(255,0,0,0.9);

}


Note    You’ll see a live preview of your changes on the website behind the Style Sheet window, even before you’ve saved the style sheet. You can move the Style Sheet text box out of the way so that you can see your whole page, and even click links to see how the changed style impacts other pages of your site.

  1. To add your own custom styles, add them to the Style Sheet text box. Add a comment so that when you look at the style sheet again later, you can figure out what you changed.

  2. Look at the website page behind the Style Sheet text box. Make sure your changes show up and work as you intended.

    • Review all the pages of your website to make sure you didn’t inadvertently change an area you didn’t mean to change.

    • If there are problems, see Troubleshooting style changes.

  3. Click Save.

  4. If your site is available online, when you’re ready to publish your changes, select Save and Publish.

Tip   Once you’re satisfied with your alternate style sheet, make a backup. Open the style sheet again, at the top, select here, and then on the Save menu, select Save as and specify the location and file name.

Make common style changes

The alternate style sheet provides commented out examples of several commonly changed elements:

  • Header (title area) background color

  • Title font size, color and family

  • Logo height

  • Content area background color

  • Footer background color

  • Background color for full page layout pages

  • Background color for specific full page layout pages

  • Background colors for side bars two columns for content

  • Background color for two column layout

To change an element that is already in the alternate style sheet, you remove the comment symbols and modify the styles.

To make other changes, you must replace styles from the base theme style sheets. To make that easier, we’ve provided some examples of changing margins, text size, line spacing, and heading formats,

  • If the type of change you want to do isn’t listed in this section, see Identify and override a style from the theme style sheet.

  • If you need help with styles, look up “CSS reference guide” on the web.

    Change margins

    For pages with one column layout, the default margins are 74.9% for main content, and 722 pixels for full page layout. The following example shows changing the margins to 100%.

    .main-content{
    float:left;width:100%;
    }
    .fullPageLayout{
    max-width:100%;min-width:326px;
    }

    For pages with two column layout, the theme controls the width of each column. For example, in the Oslo theme, one column is fixed width, and one is variable. In this modification to the Oslo theme, the fixed width column is set to 200 pixels, and the variable width column has a minimum and maximum set.

    .twoColumnLeftLayout-left,.twoColumnRightLayout-right{
    width:200px;
    }
    .twoColumnLeftLayout-right,.twoColumnRightLayout-left{
    min-width:388px;
    max-width:100%;
    }

Change fonts

Here are some examples of changing font size:

  • You can change the base font used for every element that doesn’t have font size specified. The title and the default paragraph have font size specified, but most other site elements don’t. This example sets the base font to 14 point Arial:

    *{font-family:arial;font-size:14pt;}
  • To change the title font, find the SITE TITLE section in the alternate style sheet and change the values for .ms-core-pageTitle. Remember to move the close comment symbols.

  • To change the font for paragraphs that you have formatted with the Heading 1 style, add the following style. This example changes heading 1 text to green and makes the text bold:

    .ms-rtestate-field h1, h1.ms-rteElement-H1, .ms-rtestate-field h2, h2.ms-rteElement-H2 {
    line-height: 1.4;
    color: green;
    font-weight:bold;
    }}
  • To change the paragraph font used in most of the website, change the value of .ms-rteFontSize-3. For example, here’s how to set the text to 13 pixels:

    .ms-rteFontSize-3 {font-size:13px;font-family:verdana,sans-serif;}
  • To change the line spacing in default paragraphs, change the value of p.ms-rteElement-P. For example, here’s how to set the line spacing to one line. By default, it is set to 1.6 lines.

    .ms-rtestate-field p, p.ms-rteElement-P {
    margin: 0px 0px 10px 0px;
    line-height: 1;
    }

Change link formatting

You can change the formatting and color of links by adding a line specifying the link behavior for each state a link can be in. For example, the following styles make unvisited links purple, visited links gray, and when someone hovers over a link, the link shows as bold and underlined:

a:link {text-decoration: none;color:purple;}
a:visited {text-decoration: none;color:gray}
a:hover {text-decoration: underline; font-weight: bold;}
a:active {text-decoration: none;}

Identify and override a style from a theme style sheet

This is a little more complicated, but can still be done if you’re new to using styles. First you look up the styles used for a specific element on the web page, and then you copy a style into the alternate style sheet and modify it.

  1. Close and save the alternate style sheet.

  2. Right-click anywhere in the page you’re working on in your website, and then select Inspect element.

  3. In the DOM Explorer pane, click Select element Icon in DOM Explorer pane used for selecting text.

  4. Crosshairs will appear on the page. Adjust them to outline the element that you want to change. You can select a character, a sentence, a paragraph, an image, or any other element. This example shows selecting a link.
    Section of a public website page, showing crosshairs for selecting an element to inspect

  5. Click to confirm the selection. The Styles pane displays all the styles that apply to your selection. The tree view shows the values that are inherited from other styles. Any styles that are overridden are shown in a strike-through font.

    In this example, there are no inline styles for the link. The font size is inherited from .ms-rteFontSize-3, and the line height is inherited from the default paragraph format.

    You can copy any of these styles into your style sheet and modify them, but you need to think through the consequences. It’s easy if you want to change something at the top of the list. For example, if you want to change the color of visited links, copy the line beginning with a, .ms-link:visited. If you want to change the the font size to 16 points just for active links, but not for all text formatted as .ms-rteFontSize-3, copy the a:hover, a:active style, and add font-size;16 pt. Expect to do a little experimenting to get it just right.
    Style hierarchy for the selected page element

  6. Select the style that you want to put in the alternate style sheet, right-click it, click Copy, and then paste the style into the Style Sheet text box. Make any needed changes.

    Note    Styles in the Style Sheet text box will override styles from a theme style sheet, but won’t override styles listed in the Inline style section.

Top of Page

Troubleshoot style changes

Style sheets are extremely picky, and have rules about the order in which styles are processed. And sometimes style changes have unexpected results. Expect to spend some time testing and troubleshooting. All your changes will show up immediately in the page behind the style sheet text box.

Are there styles I can’t change on my public website?

Yes. Some formatting on the public websites is done with inline styles, and these can’t be overridden by changes to the alternate style sheet. So if you change the format using the Format Text controls, changes to styles in the alternate style sheet won’t override them.

I edited the alternate style sheet, and don’t see my changes.

Style sheets require precise syntax, and most problems are due to minor typos. Here are some common typos to look out for:

  • All sample styles in the alternate style sheet listed are surrounded by comments /* … */. Be sure you haven’t forgotten to uncomment a style that you changed. To keep yourself organized, we recommend moving the closing symbols for the comment (*/) to the end of the section title line, and including a note to yourself about what you changed. For example, here’s what you might use after changing the background color for the content to green:

    /* CONTENT: Changed background color to green */
    .ms-pub-contentLayout{
    background-color:rgba(0,255,0,1.0);
    }
  • There must be a starting and closing curly bracket ({ }) for each style definition.

  • There must be a colon ( : ) between the element and the definition, and a semicolon ( ; ) between styles.

I changed my theme and now I don’t see my custom styles.

The alternate style sheet is unique to each theme, so when you change the theme and select Edit Style Sheet you’re actually in a different alternate style sheet. You need to make the changes again.

If you didn’t make a backup, you can still find your previous alternate style sheet. Change the theme back to the one you were using open the style sheet, copy the changes into Notepad, and then return to your new theme and paste your changes into the alternate style sheet for the new theme.

A specific change I made doesn’t show up.

Styles are processed in a predefined order, and sometimes another style conflicts with changes you make.

You can use !important to make this change overrule any other styles that might apply. For example, to make this link for what happens when you hover over a link, add !important at the end:

a:hover {text-decoration: underline; color: #000000 !important;}

When formatting links, the order is important. There are four lines that govern how your links work, and they should be entered in this order:

a:link { }
a:visited { }
a:hover { }
a:active { }

Style sheet changes are not visible when the site is taken public.

Be sure to Save and Publish changes to the style sheet.

If you edit one of the theme style sheets directly, rather than copying style into the alternate style sheet, and don’t check your changes in, then you’ll see the changes when you’re working on the site, but the changes won’t be applied to the published site.

Check in the theme style sheets, and then try again.

Note    You do not have to check in the alternate style sheet.

Internet Explorer shows the style sheet changes, but Chrome and Firefox don’t.

Be sure to Save and Publish changes to the style sheet.

If you edit one of the theme style sheets directly, rather than copying style into the alternate style sheet, and don’t check your changes in, then you’ll see the changes when you’re working on the site, but the changes won’t be applied to the published site.

Check in the theme style sheets, and then try again.

Note    You do not have to check in the alternate style sheet.

Learn More

Learn more about other design options in Public Website help for Office 365.

Top of Page

Applies To: Office 365 Admin, Office 365 End User, Office 365 Small Business Admin, SharePoint Online Website



Was this information helpful?

Yes No

How can we improve it?

255 characters remaining

To protect your privacy, please do not include contact information in your feedback. Review our privacy policy.

Thank you for your feedback!

Support resources

Change language