[All Adaptavist Apps]
Wiki Markup |
---|
{scrollbar:no-css=true} |
Excerpt |
---|
This short tutorial shows you how to change the heading styles using CSS... |
...
Here's an example of CSS that will do just that:
No Format |
---|
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;
}
|
...
{footnote}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}}.{footnote} Wiki Markup
Footnote |
---|
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 |
...
Footnotes Display |
---|
...
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:
No Format |
---|
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;
}
|
...
Common heading font-sizes are:
Center | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
Wiki Markup | ||||||||||||||
{center}
||Heading Level||Size||
|| h1 | 22px |
|| h2 | 16px |
|| h3 | 14px |
|| h4 | 14px |
|| h5 | 12px |
|| h6 | 16px |
{center} |
You've no doubt got a couple of questions about the table above:
...