[All Adaptavist Apps]
Page History
| Wiki Markup |
|---|
{scrollbar:no-css=true}
h1. |
Headings
...
CSS
...
This short tutorial shows you how to change the heading styles using CSS...Excerpt
...
By default,
...
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:
| 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; } {noformat} |
This
...
CSS
...
modifies
...
all
...
heading
...
styles
...
to
...
ensure
...
that:
...
- They
...
- use
...
- a
...
- specific
...
...
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 {{sans-serif}} or {{serif}}.{footnote}
...
- Their
...
...
- is
...
- normal
...
- (so
...
- our
...
...
...
...
- doesn't
...
- make
...
- them
...
- look
...
- odd)
...
- Their
...
...
...
- is
...
- set
...
- to
...
- bold
...
- so
...
- they
...
- stand
...
- out
...
- from
...
- any
...
- other
...
- text
...
- of
...
- a
...
- similar
...
- size
...
- Their background-color
...
- is
...
- transparent
...
- (ie.
...
- remove
...
- that
...
- grey
...
- background)
...
- Thier border-bottom
...
- is
...
- removed
...
- (to
...
- remove
...
- the
...
- blue
...
- or
...
- grey
...
- line
...
- that
...
- appears
...
- under
...
- some
...
- heading
...
- styles)
| Wiki Markup |
|---|
{display-footnotes} h2. |
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
...
...
(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; } {noformat} |
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:
...
...
,
...
...
,
...
...
...
and
...
...
.
Common heading font-sizes
...
are:
| 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:
...
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 |
...
|
...
is |
...
likely |
...
to |
...
be |
...
different |
...
to |
...
the |
...
body |
...
text |
...
colour, |
...
|
...
is |
...
normally |
...
the |
...
same |
...
as |
...
the |
...
body |
...
text |
...
colour. |
...
You |
...
can |
...
see |
...
an |
...
example |
...
in |
...
our |
...
...
tutorial. |
...
Q | Why is h6 so big? |
|---|---|
A | We normally style |
Overview
Community Forums
Content Tools
Apps