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.
- What is CSS?
- Rule format
- Why "cascading"?
- External stylesheets
- Colours
- Other properties
- 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:
- Name the tag you want to change (without the angle brackets), such as "body". This is called the "selector" because it "selects" the tag that will change
- Open a curly brace { below the tag name. The instructions you enter must be enclosed in curly braces, so it's usually a good idea to put the closing one in before you forget as well. This is called the "declaration block" because it is a block of instructions you will declare
- Write the name of the property you want to change, such as "background-color". Please note that spelling must be American, and there are no capitals or spaces
- Write a full colon : after the property name
- Write the value you want to change the property to. Again, there are no capitals or spaces, so light blue would be written as "lightblue"
- Place a semi colon ; at the end
- If you haven't already, add the closing brace
An example would look like this:
"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:
- Tags will prefer the most specific rule containing them. For example, the font in a table will prefer rules for the table over rules for the entire page
- Tags will prefer the most recent rule they see, meaning rules near the bottom will overwrite rules for the same tag above them
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:
- It separates the work, allowing you to focus on one thing at a time
- It's less writing - you only need to write it once
- It is easier to maintain - if you want to make a change on all of your pages you only need to do it once
- It's easier to understand - if you have multiple stylesheets named appropriately, it will be easier to tell what style each page uses
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.
- 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
{
}
- We want to change the background colour. For the property name, write "background-color", making sure to spell it American:
body
{
background-color
}
- Place a full colon after the r in color
- 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:
- 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: