Skip main navigation

Styling content

Learn how to style content in HTML.

You can use external CSS to control nearly everything about a web page. To help you familiarise yourself with CSS attributes, let’s start with styling some basic HTML elements: fonts, text layouts, lists, and links. As you work through this activity, you will see many of the same attributes that you learned about in the previous weeks. But instead of specifying them in the HTML, you will add them to your external CSS instead.

Fonts

Fonts are set using the <font-family> property. This property is used to specify a font, or list of fonts to choose from, to apply to the specified element.

p {
font-family: Helvetica, Arial, sans-serif;
}

In this example, all instances of <p> will be rendered in the Helvetica, Arial, sans-serif font family.

Web browsers can only apply the fonts they have available; as such, it’s best to stick with ‘web-safe’ fonts that are most commonly available in almost every device.
In the example above, we provided a ‘font stack’. The browser works through these fonts from left-to-right until it finds one that is available and uses this to display text on the page. In this case, it will first try to use Helvetica, then Arial, or, failing that, a generic sans serif font that is available.
The following table shows some common, web-safe font stacks, depending on what you want your page to look like. Note that font names with more than one word must be wrapped in quotes when used in CSS (e.g. ‘Courier New’).
Font type Font stack
Wide sans-serif Verdana, Geneva, sans-serif
Narrow sans-serif Helvetica, Arial, sans-serif
Wide serif Georgia, Utopia, Charter, serif
Narrow serif Times New Roman, Times, serif
Monospace Courier New, Courier, monospace
You can specify the size of your font using the <font-size> property. This property can take values in different formats. The following table shows three common units for specifying font size.
Unit Description
<px> Describes the height of the font in pixels.
<em> Describes the size of the font relative to the font size for its parent element, with 1 em being the same size as the parent element.
<rem> Describes the size of the font relative to the font size for the root element of the document (i.e. the <html> element you learned about in Week 1).
So far this week and in Week 2, our examples have applied fonts to a specific element, which could get tedious if you have lots of different text elements on the page, such as paragraphs, lists, captions, and block quotes.
To set the default font across your page, try adding the following snippet, which applies your font setting to the entire document:
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
colour: black;
}
You can override these default settings by specifying different values in the CSS for particular elements, such as lists or links.

Text layout

Use properties related to the text layout to adjust things like spacing between text and its alignment within the content box.
To space text vertically, you can adjust the <line-height> property. This property takes most units of length and size (e.g. <px> or <em>), but can also be unitless, in which case the value acts as a multiplier. Unitless values are generally considered the best option, and behave similar to a word processor where you might set a line height of 1.5 or 2 (i.e. double-spaced).
To set a line height of 1.5, you’d use line-height: 1.5 To vary the horizontal spacing of text (between letters and words) you can use the <letter-spacing> and <word-spacing> properties. These are less common than adjusting vertical spacing, but may be useful in certain circumstances. Both of these properties take common units of length or size; they do not work with unitless values.
Much like using a word processor, you can align text to the left, right, or centre of its content box, or spread the text out to make every line the same width. All this can be done using the <text-align> property, along with the respective values:
  • <left>
  • <right>
  • <center>
  • <justify>.

Lists

When styling lists, it’s common to adjust the list spacing to match any surrounding text. Like other text elements, the <line-height> property can be used to adjust this.
Other list-specific styles include:
  • <list-style-type>: sets bullets to be squares or circles in unordered lists (<ul>); sets an ordered list (<ol>)to display items with numbers, letters, or Roman numerals; or hides the bullet entirely.
  • <list-style-position>: positions bullets inside or outside a list item.
  • <list-style-image>: specifies a custom image for a bullet.
Note that setting <list-style-type:none;> might come in handy when you style your list items and you don’t want to display a bullet point.

When browsing the web, you might notice some links appear differently depending on whether you have visited the link or not, or when you hover your mouse over them.

Last week, you learned about the class attribute that you can use to identify customised elements for styling purposes. As an element, links have their own set of pseudo-classes to indicate the state of a link. These pseudo-classes are built in, but you can also customise their attributes with CSS. They are identified in CSS using a colon.

This table outlines the pseudo-classes and how they work:

Link state/class Default style and behaviour
Unvisited link This is the default state, but can be specifically styled using <:link>. By default, all links are underlined.
<:visited> When a link exists in the browser’s history. Visited links are purple.
<:hover> When a mouse pointer hovers over a link. Hovering a link makes the mouse pointer change to a different icon.
<:focus> When a link has focus, either by a keyboard, or has been programmatically selected. Focussed links have an outline around them (like a border, but it doesn’t take up space).
<:active> When a link is clicked on. Active links are red.

You can vary this behaviour by altering the <color>, <cursor>, or <outline> properties. (When dabbling with <outline>, be aware that this property is a useful accessibility aid, and you should ensure that focus is equally visible with your own styles.)

In the following example, we have removed the underline and disabled the outline, replacing it with a solid bottom border and background colour when the link has focus, or is hovered over.

a {
outline: none;
text-decoration: none;
}
a:focus {
border-bottom: 1px solid;
background: #FFFCC2;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}

Try adding this code to the CSS in JSFiddle and then create a hyperlink in the HTML. Once you get it working, try adjusting the CSS to change the style of your hyperlink.

In the previous example, you can also see the cascading nature of CSS. Think of :focus and :hover as subclasses of a. This means they both inherit the basic attributes of a (outline and text-decoration cascade down to each subclass automatically) and add their specific attributes (border-bottom and background) to those common features. CSS uses a hierarchical structure to organise these variations under their overarching style class. This useful feature avoids repetition and results in leaner, more efficient code: you only need to specify the common attributes of the subclasses once in the parent class.

This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education