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 …

Child selectors

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 …

ID Selector

In the previous tutorial, we looked at a few different types of CSS Selectors and we used the class selector to apply a style to all elements that used that …

Divs and Spans

The div and span tags are made for CSS. A div is a section or a ‘division’ in a web page. A div can be thought of as a block. On …

CSS Font properties

In this tutorial we will look at how to use CSS font properties in an external style sheet. We will look at how to change the font-weight (eg. normal or …

HTML & CSS Layout Template

You can use the code below to set up an HTML document with a CSS layout including header, footer, sidebar, horizontal navigation menu, and single-column main content area. Here is …