Skip to end of metadata
Go to start of metadata

Headings CSS

This short tutorial shows you how to change the heading styles using CSS...By default, Confluence puts a grey background behind most heading styles (h2. to h6.) - this rarely fits with your organisations design guidelines so it's time to take some action...

All Heading Levels

The most common first step when customising headings is to choose a font that more closely matches that of your design guidelines and remove the background and bottom border from the headings.

Here's an example of CSS that will do just that:

h1, h2, h3, h4, h5, h6 {
font-family: trebuchet ms, arial, verdana, lucida grande, sans-serif;
line-height: normal;
font-weight: bold;
background-color: transparent;
border-bottom: none;
}

This CSS modifies all heading styles to ensure that:

  1. When specifying the font, always remember that the person viewing the page might not have that font installed. As such, you should specify alternative fonts (in order of priority) to try and at the end of your list have either sans-serif or serif.

Specific Heading Levels

After deiining the common features for all headings, the next thing to do is define each individual heading (if required).

Because each heading is actually wrapped in an anchor (so that you can link to it), you need two separate styles - one for the heading itself and another to correct any oddities that may appear when the mouse is over the heading.

Example:

h1 {
font-size: 22px;
color: #003366;
padding: 0px;
padding-bottom: 4px;
padding-top: 12px;
margin: 12px 0px 4px 0px;
}

h1 a:hover {
border-bottom: none;
}

The first style sets the overall design for heading level 1 (h1) wheras the second (h1 a:hover) corrects any visual glitches that you may see when the mouse is held over the heading.

The most useful settings for each heading level are: Padding, Margin, Text Formatting and Font.

Common heading font-sizes are:

Heading Level

Size

h1

22px

h2

16px

h3

14px

h4

14px

h5

12px

h6

16px

You've no doubt got a couple of questions about the table above:

Q

Why are h3 and h4 the same size?

A

They are usually different colours or one may be bold whilst the other isn't. For example, while h3 is likely to be different to the body text colour, h4 is normally the same as the body text colour. You can see an example in our Headings tutorial.

Q

Why is h6 so big?

A

We normally style h6 to look exactly the same as h2 so that we can use h6 to add "Preface" or Introduction" headings, etc., on pages that use the toc macro. This way, it's a lot easier to stop the table of contents showing the headings that preceed it by simply using h6 for those hadings.

1 Comment

  1. Unknown User (tstrugar@wwf.org.au)

    I am trying to change the style of h1 as it is being applied to the page title in the Title panel. I changed its text-size, colour, etc, but the only thing that changes is the colour. What to do? (TB 3.2.0, Conf 2.7.3)

    Also the only way I found to change the heading styles as they appear in the body of the page was to use .wiki-content h1 etc.