The CSS Style Sheet macro allows you to add custom style sheets to a page or import from an external URL.

The CSS Style Sheet macro now supports Confluence Whitelist. Confluence Whitelist has been implemented so that you can limit which URLs can be used. To use a URL in a CSS Style Sheet macro (either as a macro parameter or part of the macro body), it must be included in Confluence Whitelist.

To learn more about configuring a URL Whitelist, see Atlassian’s Configuring the Whitelist.

This macro is designed to allow a single page to have custom styles applied to it. The style sheet can optionally be restricted to specific media types and can optionally import an external style sheet from a URL.

If you want to define styles for an entire Space when using the Builder theme, please use Builder - CSS Custom Styles in the theme configuration.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the CSS Stylesheet macro from the provided list.

    The Macro Browser with the CSS Stylesheet macro available.
  5. Complete the desired fields.

    ParameterDescriptionTypeDefaultRequired

    Media

    The media to apply this style sheet to, for example all, print, screen, or speech.

    string

    All

    Import

    Optionally specify a URL to import an external style sheet

    string

    none

  6. The macro will then appear on the page.

    The placeholder for a CSS Stylesheet macro.

Examples

Define a Style Sheet

The following style sheet will make text on the page look green and larger:

A placeholder for a CSS Stylesheet macro, with example CSS.

Resulting in:

Example text, formatted with the CSS Stylesheet macro, to be green.

Importing an External Style Sheet

To import an external style sheet, use the "import" parameter as follows:


With Import parameter set to "http://someurl.com/mystyle.css".

Which results in the following HTML:


<style type="text/css">
@import url(http://someurl.com/mystyle.css)
</style>

Don’t include quotes around the URL as that will cause the import to fail in several web browsers.

Set up a style page with your style sheets, then use the include macro to embed it on other pages. This way you can change your styles in one central location and have everything that imports the page get updated.

If desired you can include the style macro several times on a page to include different CSS for different media types, etc.

Frequently Asked Questions:

Q: Where can I learn more about style sheets?

A: The http://www.w3schools.com website is a good place to start.