HTML & CSS: Basic Text Styling

Since CSS is all about styling different aspects and properties of elements on your page, you need to know which properties (and values) exist so that you can style different things. This tutorial aims to introduce you to some of the basic CSS properties for styling text.

color

As has been shown in previous tutorials - text colour is set for an element by using the color property in CSS. This can be set to any CSS supported colour values, including hex colours (#FF0000, or in this case, #F00 for short), RGB colours (rgb(255, 0, 0)), and word colours (red). An example of the color property is simply setting the body text to red (as we've done in previous tutorials):

1
2
3

body {
	color: red;
}

font-family

Another really important customisation for text is setting the font. Setting the type (or 'family') of the font is done using the font-family property in CSS. You usually set this property to a list of fonts - this consists of the font you'd ideally like to display if the user has it on their computer (note that fonts with spaces are usually surrounded in single or double quotes, for example 'Myriad Pro'), and then the font you'd like if they don't have that, then if they don't have that, and eventually going down to a really general font that the user is likely to have (if they don't have any of the fonts in your list, the browser will take over font control - we usually don't want this!). A common font for the last fallback is sans-serif.

In the following example, I want the font in the body section to be 'Myriad Pro' if possible, if they don't have that then 'Helvetica', and if they don't have that then 'sans-serif':

1
2
3

body {
	font-family: 'Myriad Pro', Helvetica, sans-serif;
}

font-size

The size of text is also very important and usually varies from element to element. You can specify text/font size using the font-size property. This can be set to a value in units such as em (size based around the default font size), pt ('point' font size), and px (pixels).

Remember that because you'll often want different font sizes for different elements, you will probably want to specify the font-size in many of the elements in your CSS (whereas you might only do the font-family once in the body). The following example shows some simple sizing on all as:

1
2
3

a {
	font-size: 2em;
}

line-height

Setting the space between lines (or the line height) is also very important for text on modern webpages. Giving text space to breathe by using a higher than usual line-height is very common in the modern web at the time of writing this tutorial - it can really add something special to a page. The line height is set using the line-height property and can be set using a variety of units, although usually ems or pxs -- I most commonly use ems. An example of using this property is simply setting the line height for the body:

1
2
3

body {
	line-height: 1.3em;
}

font

As a quick aside, there is a really useful shorthand property for setting the font-size, line-height and font-family at the same time using only one property! The font property does exactly this and is commonly used for establishing base text properties for the whole page, commonly used in the body. The format is as follows:

1

font: font-size/line-height font-family;

For example setting some base font/text properties for the body section of our webpage:

1
2
3

body {
	font: 1.2em/1.3em 'Myriad Pro', Helvetica, sans-serif;
}

text-align

We can also set the text alignment by using the text-align property. This can have a few different values:

  • left - left alignment.
  • right - right alignment.
  • center - centered alignment.
  • justify - all lines are of an equal length.

An example of the text-align property is setting the body text alignment to be centred:

1
2
3

body {
	text-align: center;
}

text-decoration

We can set the decoration of the text (underline, overline and some other decorative properties) of text by using the text-decoration property. We can set this to a couple of preset values:

  • underline - an underline
  • overline - an overline
  • line-through - a line through
  • none - no decoration

An example of the text-decoration property is removing the default underline on links (a elements) by setting the decoration to none:

1
2
3

a {
	text-decoration: none;
}

text-transform

We can transform text in various ways using the text-transform property. This can be set to a few preset values:

  • uppercase - uppercase text
  • lowercase - lowercase text
  • capitalize - capitalized text
  • none - 'normal' text

An example of the text-transform property is setting all the as to be uppercase:

1
2
3

a {
	text-transform: uppercase;
}