The following is a list of the core CSS properties related to typography and text styling.
color
You can apply colour to a font with the simple color
property. It accepts RGB (Red, Green, Blue) colours most commonly in the form of hexadecimal colour codes. (CSS uses International English thus color
not colour
as used here in old blighty, where we also walk on pavements and eat chips.)
Example:
color: #FF0000;
font-family
Takes a list of fonts so that the first font listed is tried first, then the next etc. You are advised to end any font-family
listing with the name of the font-family
you wish to use ie serif, sans-serif. Fonts with white spacing in the name need to be placed in quotes.
Example:
font-family: "Courier New", sans-serif;
Tip: Many web sites use sans-serif fonts like arial, verdana and tahoma. This is because there some evidence that these font are read easier on a computer screen than fancier serif fonts like Times New Roman. You can also use @font-face to load non-standard fonts to make your pages more individual – see custom fonts with @font-face
font-size
Used to set the font size. There are a range of unit of measurements that you can use when setting font-size
. For our purposes we will use pixels.
Example
font-size: 12px;
font-weight
Used to apply subtler levels of ‘boldness’ to those available in normal HTML. These name be numeric values 100 through to 900 and descriptive values bold
, bolder
, lighter
and normal
the default.
Example:
font-weight: 500;
Warning: The ability to use numeric values depends on the font in use.
font-style
Used to apply italics (as opposed to em
), without semantics.
Example:
font-style: italic;
font-variant
Used to apply small capitals.
Example:
font-variant: small-caps;
text-align
Used for text alignment. Accepts the values center
, left
, right
, justify
and inherit
.
Example:
text-align: center;
text-decoration
Used for adding text decoration such as underlines. Accepts the values blink
, inherit
, line-through
, overline
, underline
and none
. The blink
only works in Firefox. The none
value can be used to remove the underline from links as seen in our discussion of pseudo-classes.
Example:
text-decoration: none;
text-indent
Used for indenting the first line of text in a paragraph.
Example:
text-indent: 12px;
line-height
Used for adding line spacing in typography ‘leading’. Takes value in various units of measurement ie px, ems %. If no unit of measurement is used then the line-height
is based on the current font size. That is if the font-size is 12px then adding a line-height
of 1.5 will apply a 18px (12 + 6) line-height.
Example:
line-height: 1.8;
letter-spacing
Adds space between individual text characters (similar though not strictly kerning).
Example:
letter-spacing: 5px;