Using Custom CSS

Where Custom CSS Gets Inserted

Anything entered into the custom CSS field gets put into an external style sheet that will be included in the <head> of the document. This external stylesheet is inserted after the main stylesheet so that you can override styles as you see fit.

Check out our Customizations Cookbook for helpful code snippets to customize your page!

Notable Existing CSS Classes

There are several CSS classes defined by default that you'll want to be aware of

// defines the width of the content
.container {
    width: 90%;
    max-width: 850px;
}

// the default font-size used on the page
.font-regular {
    font-size:1rem; // 16px
    line-height:1.5rem;
    @media screen and (max-width: 650px) {
        font-size:.875rem; // 14px
        line-height:1.3125rem
    }
}

.font-large {
    font-weight:500;
    font-size:1.25rem; // 20px;
    line-height:1.875rem;
    @media screen and (max-width: 650px) {
        font-size:1.125rem; // 18px;
        line-height:1.6875rem;
    }
   @media screen and (max-width: 450px) {
        font-size:1rem; // 16px
        line-height:1.5rem;     
    }
}

.font-largest {
    font-weight:500;
    font-size:1.75rem; // 28px;
    line-height:2.625rem;
    @media screen and (max-width: 650px) {
        font-size:1.375rem; // 22px;
        line-height:2.0625rem;
    }
    @media screen and (max-width: 450px) {
        font-size:1.125rem; // 18px;
        line-height:1.6875rem;
    }
}

A Note About Security

For security reasons, we can't show your custom CSS on an activated public page when using the subdomain URL (e.g. companyname.statuspage.io).

If you have a live public page, you must set up a custom domain (e.g. status.companyname.com) for us to show the custom CSS.