Return To CS 100 Home

Colour Theme   Font Size Options
 
   
   
   

Basic Styling With Cascading Stylesheets

Last week, we added colour to our index page by attaching the "default.css" file using the link tag. In this class, you are expected to use stylesheet files like this one instead of writing style into the HTML page. Failure to do so may result in losing marks.

  1. What is CSS?
  2. Rule format
  3. Why "cascading"?
  4. External stylesheets
  5. Colours
  6. Other properties
  7. Lab exercise

Video Summary


What is CSS?

A Cascading StyleSheet is a page that defines how your HTML page will look in the browser, such as fonts and background colours. Cascading stylesheets have their own format which is completely different to HTML - you should never have HTML code in a stylesheet file or it will likely break the entire thing.

CSS pages have what are called "rules", which alter the appearance of a specified tag. For example, you could make rules to change the font colour of your header and paragraph tags. Since you are gathering all your rules on one page, it is called a "style sheet".

Creating a new stylesheet is just like creating a new HTML page: create a new, blank page and then save it as name.css. The ".css" makes it a stylesheet file.


CSS Rule Format

The process for creating a new rule is as follows:

An example would look like this:

A picture highlighting the various parts of a css rule. Em is at the top as the selector, with background:yellow; enclosed in curly braces


"Cascading" - How Precedence Is Determined

HTML often has tags within tags. For example, you could have a paragraph tag in the body tag. Tags often inherit style properties from their "container", the tags surrounding them. This means if you made a rule setting the font colour to green for the body tag, the paragraph tag within it would also turn green. If you didn't like this, you could make a new rule specifically for the paragraph tag setting it to a different colour. Similarly, if you make rules for a tag twice, the rules at the bottom will overwrite the rules at the top. This is where the "cascading" comes from - it refers to the way properties are inherited and overwritten. This sounds very confusing, but really there is only two things to remember:


External Stylesheets

CSS in a separate file is called an external stylesheet. While you can do style at the top of a page, or even within the tags themselves, it is always more efficient to use an external one because:

If that isn't enough to convince you, then it is also because external stylesheets are easier to mark and not using them makes the marker grouchy, which is not good for you


Colours

There are three ways to specify colours. It doesn't matter which you use for this class.

By Name

For simple colours, you can just use the name you want, like red, orange, aqua, chartreuse, and mediumspringgreen. OK, the last two are not simple, but they do work. CSS3 has 147 named colors which you can find here. As you look at the list you will see Hex Values and R,G,B values for the named colors. Both methods allow you to select between over 16 million different colors.

Red Green Blue (RGB) Values

On a computer screen, colours are made by mixing different amounts of red, green, and blue light. You can use this to get a specific colour by providing a number between 0 and 255 as red, green, and blue values. For example, rgb(138, 43, 226) is the RGB triplet for blueviolet.

Hexadecimal Colours

Hexadecimal(Hex) colours work in a similar way. A hexadecimal is a number in base 16, which goes from 0-F. When you name a hex colour, you provide a # followed by two digits for red, green, and blue in the form #RRGGBB. For example, #8A2BE2 is the hex colour for blueviolet.

Colour Pickers

Trying to get the colour you want in RGB or hex through trial and error would be a long and unrewarding process. To make it simple, you can use colour pickers: just find the colour you want on the picker, and it will give you the RGB or hex code for that colour (which you use is simply a matter of preference). Google has a colour picker built in if you just search "colour picker" or click here


Sizes, Positioning, and Other Properties

You can use stylesheets to change almost anything about the appearance or position of any tag. There would be far too many to teach them all in this lab. For a list of useful properties and how to change them, see the FAQ.


Lab Exercise

First, create a new stylesheet named testing.css. It is important to name it exactly this because that is what we set our HTML page to look for previously.

  1. We will create a new "rule" for the body tag. Write body, and open and close a set of curly braces below it like this:
    body
    {

    }

  2. We want to change the background colour. For the property name, write "background-color", making sure to spell it American:
    body
    {
    background-color
    }

  3. Place a full colon after the r in color
  4. We will change the background to black. Write black and place a semi colon at the end:
    body
    {
    background-color:black;
    }

    If you check what this will look like, you'll get a blank black page. This is because we have black text on a black background: if we highlighted the page we would be able to see the writing:

    A black picture with black text.  The words previously found on the page are highlighted to show that they are still there
  5. Add another property under background-color for "color", and set the value to something that is not black
    body
    {
    background-color:black;
    color:pink;
    }
    


    You should end up with a page that looks like this:

    The page from above now has pink text