Creating CSS cascading style sheets for HTML
Part six of a seven-part series of blogs

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.

  1. An Introduction to CSS Style Sheets
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance
  4. Margins and Padding in CSS
  5. Measurement Units for CSS Styles
  6. Colours in CSS Style Sheets (this blog)
  7. Float Styles

This blog is part of a larger online ASP.NET online tutorial series.  For training courses for businesses, see our ASP.NET training pages, or have a look at our Visual Basic or Visual C# courses.

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!

Using Hexadecimal

Colours in HTML are specified by their red, green and blue components, using a notation called hexadecimal.  Here's an example:

/* has blue background */

body

{

background-color: #BBDDFF;

}

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:

Navy colour for heading class

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:

Colour code for navy

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:

Building 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:

Choosing a colour

Choose a colour by following the numbered steps.

The steps shown above are:

  1. Choose what aspect of the style you want to change (here it's the background).
  2. Choose to change the colour.
  3. Choose to show more colours than are initially visible (this brings up a dialog box allowing you to choose from a custom palette).
  4. 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:

.heading

{

background-color: Navy;

border: 1px solid #000;

text-align: center;

font-size: 1em;

font-weight: bold;

color: #fff;

width: 200px;

margin: 10px auto 10px auto;

padding: 5px;

}

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:

Header style

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!

This blog has 0 threads Add post