Changing a Website Colour Scheme, Part One: CSS Basics

The best way to change an entire website’s colour scheme is by using CSS. For those who are unfamiliar with it, CSS (or Cascading Style Sheet) is a method of consistently styling websites. A cascading style sheet can be saved as a separate file (usually style.css or something similar) and then linked to in the code of a website, meaning the same style sheet can be used for multiple web pages, or even multiple sites. Making a change in a style sheet which is used across a website will then change the entire website. Especially for large sites, it’s much more convenient to use one style sheet than to change every single page individually.

Selectors, IDs, Classes (and other things you don’t care about)

If you’re only recolouring a pre-existing site, you don’t need to know much about selectors, IDs, and classes. Use a tool like Firebug to find what you want to edit; it’ll show exactly what selector you need to change, as well as any relevant IDs and classes.

Firebug can help you find your CSS selectors - just click the 'inspect' button and then mouse over what you want to change. The name of the element will instantly be highlighted, showing you what you need to change in your CSS.

Basically, a selector is something which can be changed using CSS, such as a paragraph, heading, or blockquote. Some selectors also have a class – for example, if you need a specially-styled paragraph for important announcements, you might create an ‘announcement’ class, and every paragraph classed as an announcement would look like your ‘announcement’ class, rather than a regular paragraph. IDs are similar to classes but more specific, usually used for something which will only appear once on a page, such as the main header.

Declarations (the bit you do care about)

Declarations are the changes you’re making to your selectors – the declaration of what you’re changing.

Example:

blockquote {background-color:#fe09a7;}

Here, ‘blockquote’ is the selector and ‘background-color’ is the declaration – basically, we’re declaring an intent to change the background colour of every blockquote on the site.

External Style Sheets

There’s several ways to put CSS in a website, but using an external style sheet is the most convenient for making sitewide changes. An external style sheet is a file consisting entirely of CSS selectors and declarations, and is linked to in pages by putting <link rel=”stylesheet” type=”text/css” href=”yourstylesheet.css” > between the <head> tags at the top of your site.

If you’re recolouring an existing site, all the work of creating and linking an external style sheet is already done. Just find your old style sheet – it will end in .css and will probably be named something like style.css. Save a backup copy so you can revert if necessary and edit away.

Advanced tip: once you know how to create external style sheets, you know everything you need to start making WordPress child themes. Child themes allow you to customise a WordPress theme without worrying about losing your customisations if the theme is changed or updated. Creating a child theme is as simple as adding a special header to a CSS file and uploading it to your site as a theme.

And now, a confession: I am maybe a bit too much of a CSS geek to be writing this sort of thing. I’m quite certain there’s one or two (or ten) things i skimmed over as ‘too obvious’ which aren’t obvious to everyone else. So what can i do to make this ‘basic’ article clearer to you?

Still deciding where to start? Check out Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet now for a colour-centric list of CSS selectors and declarations.