Change Headings and Font Style
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO
In this tutorial, you'll learn to change the font style for your publication's headings.
Change the heading font
Changing the headings font style isn't much more difficult than changing the body background color. You should still have the global template opened and a browser window with your publication.
To change the font color for your publication's headings, follow theses steps:
- Locate the h1, h2, h3, h4, h5, h6 selectors;
- Change the color attribute from #243F400 to #000000.
- Save the file (and leave it open);
- Refresh the page in your browser window.
You now have a white background in the browser window.
The headings selectors
The headings (h1 to h6) elements in HTML are somehow hierarchical and can help bring structure to your documents. The options you set in this CSS selector apply to the collection as a whole.
Here's how headings selector block could look like in a simple stylesheet.
h1, h2, h3, h4, h5, h6 {margin:0px; padding:0px; color:#243F40;
font-family:Tahoma, Helvetica, sans-serif; font-weight:bold; }
h1 {font-size:1.5em; margin-left:0px; margin-top:12px; margin-bottom:4px;
clear:both;}
h2 {font-size:1.25em; margin-left:2px; margin-top:8px; margin-bottom:2px;
clear:both; text-decoration:underline;}
h3 {font-size:1.2em; margin-left:4px; margin-top:6px; margin-bottom:2px;}
h4 {font-size:1.1em; margin-left:6px; margin-top:4px; margin-bottom:2px;}
h5 {font-size:1.0em; margin-left:6px; margin-top:4px; margin-bottom:2px;}
h6 {font-size:0.9em; margin-left:6px; margin-top:4px; margin-bottom:2px;}
In the above sample, notice how selectors are first grouped to set the shared properties for all the headings. Combining selectors this way is a very helpful CSS feature.
If you'd like to increase the headings font size, try inceasing the font-size of all the selectors. You can also render some headings in italic with the font-style:italic; property.
CSS properties are separated by ";" while a property and it's value are separated by ":".
The headings elements
HTML has the corresponding <h1>, <h2>, <h3>, <h4>, <h5>, <h6> elements to help you structure your web documents.
While the HTML standard allows for six heading levels, it is strongly discouraged to use them all. In fact, you should only used second level headings (<h2>) in your topics. The first level heading (<h1>) on your published page is created by the template which uses the topic title as the heading text.
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO