Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet

This is Part Two of the ‘Changing a Website Colour Scheme’ series. Still need to read Part One? Go to Changing a Website Colour Scheme: CSS Basics and learn everything you need to use this cheat sheet.

Basic Colour Options

There’s three main ways to declare colour in CSS: hex, RGB, and colour name.

Hex is most common among web designers. A hex code breaks a colour down into a six-figure code, ranging from #000000 (pure black) to #ffffff (pure white). Hex colours are declared by putting something like ‘color:#ff0000;’ in the appropriate place in your CSS.

RGB produces the same colours as hex; in fact, hex is a form of RGB itself. The first two digits in a hex code are red, the second two green, and the last two blue. Hex, however, uses letters as well as numbers, whereas RGB only uses numbers: pure black RGB will be 0,0,0 and pure white will be 255,255,255. This makes RGB codes a bit longer and less efficient to type out, but if you’ve found a colour listed only in RGB and don’t want to convert it to hex, RGB can be useful. RGB is declared with ‘color:rgb(255,0,0);’

Want to make something transparent? Change your declaration to ‘rgba(255,0,0,0.5);’. The last number is for alpha transparency, and can vary from 0.0 (completely transparent) to 1.0 (completely opaque).

Colour names are more limited than hex and RGB – hex or RGB can produce over 16 million different colours, but there’s only 147 different colour names which will work in CSS. Still, 147 is plenty of colour, and it’s much easier to remember ‘color:SeaGreen;’ than ‘color:#2e8b57;’. If you want precise control over your colours, hex or RGB is better, but if you just want a generic navy blue, names will work just fine. W3Schools has a list of colour names supported by all browsers to help you out.

Declarations Used to Change Colour

Background or background-color: will change the colour of the background. This doesn’t need to be used just for the overall background; ‘background’ can also be used to change the colour of a single element, such as a sidebar, navigation menu, paragraph, or link.

Color: despite the rather generic name, ‘color’ only changes the colour of text. It can be used in the body{ selector to change text throughout an entire webpage, or used in other selectors to change the text colour in a single element.

Border: puts a border around an element. You’ll also want to list size and type of border, for example ‘border:2px solid #ff0000;’. Borders can also be dotted or dashed, and you can make different borders on each side of an element by using ‘border-top’, ‘border-right’, ‘border-bottom’, and ‘border-left’ in place of ‘border’.

If you’re using borders on paragraphs or other text-heavy elements, you may also want to use the ‘padding’ declaration to give the text a little extra room (e.g. ‘padding:2px;’). Otherwise the text at the edges might bump up against the border and be difficult to read.

Sample Selectors & Declarations

body {background:#ccccff; color:#000033;} – changes the background of the overall site and all the main text
a {background:#cccccc; color:#333333;} – turns links dark grey and places them over a light grey background
p.alert {background:#ffffcc; color:#330000; border:2px solid #330000; padding:2px;} – for any paragraphs classed ‘alert’, changes the background to yellow and the text to red, and surrounds the alert with a red border
p.tip {background-color:#F0E9A7; padding:6px;}
p.tip strong {color:#07608E;}
This is what i use for my little yellow ‘tip’ paragraphs (like the one below, pointing you to Part One of this series). Without any extra styling, the HTML element <strong> only makes text bold, but it can be styled separately for different paragraph classes. In my ‘tip’ paragraphs, i’ve changed <strong> to a different colour from the rest of the text in order to make it stand out even more.

This is Part Two of the ‘Changing a Website Colour Scheme’ series. Still need to read Part One? Go to Changing a Website Colour Scheme: CSS Basics and learn everything you need to use this cheat sheet.