How to use Page Headings
Headings (h1 - h6) are used on a webpage to split text into manageable chunks arranged in a logical, meaningful order. The different heading tags have semantic meaning as well as being styled differently. So it is important to use them correctly, rather than simply thinking, 'I would like some bold blue text now, so I'll use the h4 setting' (if you want to style a piece of text in a particular way then use a custom format).
There should only ever be ONE h1 on the page. This is the overall title of the page, and should be relevant and meaningful. It is used by search engines to assess the pages relevancy to particular topics.
This might be followed by any number of h2s. An H2 can be followed by any number of h3s, etc. It is semantically incorrect to have a h3 follow a h1, without an intervening h2:
H1 headings can be added to a page using the heading element. Remember this should only be used once on the page.
H2 - h6 headings can be applied to any line of text in a content editor, using the Style drop down box in the page editing toolbar. H2 headings are also automatically created when you add a title to a panel, page lister, tab panel, and certain other page elements.
UPDATE: in Easysite 7 you get the option to choose which level of title is used in panels, etc. For instance, it might be that certain panels should have h3 titles, rather than h2.
Styling a heading in multiple ways
It is likely that you would want to style panel titles differently to the ordinary page headings (for instance, they might be white text on a coloured background, rather than black text on a white background).
You can easily distinguish between ordinary headings and those automatically generated by page elements by targeting their enclosing element:
/* target all h2s */
h2 { font-weight: bold; font-size: 1.6em; }
/* target only h2s inside Content Editors: make title dark grey */
.ContentEditor h2 { color: #333; }
/* target only h2s inside panel style four: make title white */
.panel-delta h2 { color: #fff; }
You can further distinguish between an h2 which is the panel title, and h2s which are entered into a Content Editor within the panel:
/* target only panel four title h2s: make title blue */
.panel-delta .panel-header-outer h2 { color: #0099ff; }
/* target only panel four content area h2s: make title smaller */
.panel-delta .panel-body-outer h2 { text-size: 1.2em; }
Where to style page headings
You will find the basic CSS for headings 1-6 in the file ContentEditor.css. But CSS relating only to headings in particular page elements might be in another file, for instance, RenderEngine.css (in Easysite 6) or lib.panels.css and lib.apps.css (in Easysite 7).
If uncertain where a piece of CSS is coming from use your browser's developer tools to highlight the area of the page and examine the CSS. It should tell you the name of the file as well as what rules are being applied.
