Ukieweb

Class Notes

Notes for Students

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a separate language used in collaboration with HTML to change how the page is displayed to the user. CSS can be located in a different file which means it can be used on multiple pages without duplicating code. To do this you will need to create a new file and save it in the same folder as the rest of your website as "style.css".

Linking CSS to HTML

We must also link the CSS to the HTML page so that the browser knows where to get the file from. To do this, we add this line into the head section.

<link rel="stylesheet" type="text/css" href="style.css" />

Changing the background colour

Now that we have a CSS page, we can add some code to change the way our page looks. The following code will

body{
	background: blue;
}
As you can see in the example above, we have three main sections of a CSS statement.
  • The element which is the body tag
  • The attribute which is the background
  • The value which is blue tag

Changing the font

This time we will target the <h1> tag. We can change multiple things at once with one statement.

h1{
	background: red;
	color: yellow;
	font-family: "Comic Sans MS";
}

My Heading

It is worth noting that the word "colour" is spelt "color" which reflects the american design of HTML/CSS.

Activity

Below is an activity to test your HTML knowledge so far. Give it a try.


                            
Exercises
  1. Change the background of the BODY to BLUE
  2. Give all H5's orange colour font