BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
This is the first of a series of 3 tutorials showing how to create and use CSS style sheets for HTML web pages. This first part explains how CSS works, a second part shows how to create styles for HTML tags and a final part gives a full worked example of creating a style sheet.
- An Introduction to CSS Style Sheets
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance
- Margins and Padding in CSS
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets (this blog)
- Float Styles
Posted by Andy Brown on 16 May 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Colours in CSS Style Sheets
You can specify colours in style sheets for borders and backgrounds in a number of different ways - here's how!
Colours in HTML are specified by their red, green and blue components, using a notation called hexadecimal. Here's an example:
/* has blue background */
In the style above, the background colour is composed of:
- Red component BB
- Green component DD
- Blue component FF
Colours range from #FFFFFF (white) through to #000000 (black). Where a digit is repeated, the second occurrence is often omitted; thus #BDF is shorthand for #BBDDFF.
When counting in hexadecimal, numbers go from 1 to 9, followed by A, B, C, D, E and F. So (for example) BBCC19 + 1 = BBCC1A, rather than BBCC20 as it would be normally.
Using Named Colours
If you're creating styles in Visual Studio, you can use a wide range of named colours:
Here we're choosing a dark blue colour for a background.
You can edit the style (as shown below) to find out what hexadecimal code will be used for the named colour you've chosen:
The hexadecimal code for navy is #000080.
Choosing Colours from a Palette
If you’re not happy typing in hexadecimal codes (sadly, you may get used to it after a while!) you can choose colours from a palette. To do this in Visual Studio, for example, first choose to edit a style:
Right-click on any style and choose to build it as shown here.
You can now choose what colour you want to use:
Choose a colour by following the numbered steps.
The steps shown above are:
- Choose what aspect of the style you want to change (here it's the background).
- Choose to change the colour.
- Choose to show more colours than are initially visible (this brings up a dialog box allowing you to choose from a custom palette).
- Review your colour, then select OK.
Other CSS editing package will allow you to change colours in a similar way.
An Example of the Use of Colours
Consider the following style:
border: 1px solid #000;
margin: 10px auto 10px auto;
This will set:
- the background colour for this class to be navy (dark blue);
- the border of the class to be a solid thin black line (#000 is short for #000000, or completely black); and
- the font colour to be white (#fff is short for #FFFFFF, or completely white)
Here's what this style looks like:
The style in use, with a white font on a navy background.
Bear in mind that colours look different on different monitors, and avoid garishness!