Horizontal lists

This tutorial explains how to create horizontal lists and use list items as links in order to create a horizontal navigation bar. The result will look like the image below. …

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour. A linear gradient can …

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and …

CSS nth-child selector

In a couple of the previous tutorials, we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to …

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the …

Pseudo classes

Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour …

Parent/child elements

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body …