CSS (cascading style sheets)

If we think as Html as the nuts and bolts of our webpage, CSS is the paint job or fancy alloy wheels. It’s what makes our webpages look the way they do. From our Html lesson we have some basic functionality in our pages but it does not look very appealing. You can find CSS explained more fully using this link, W3 Schools CSS There are three ways to include CSS in your webpage, they are;

  • External CSS
  • Internal CSS
  • Inline CSS

To begin with we will be looking at External CSS and include an external style sheet to shape our Html.

Create and Link External CSS

Create a new document in Notepad and save as ‘styles.css‘, this should be saved in the css folder. We then need to add the Html to our existing pages to link the style sheet. In each of the three pages created in lesson one we need to add a <link> element to the <head> section. The link should contain the code below.

<link rel=”stylesheet” href=”../css/styles.css”>

<head>
<title>Page Title</title>

<link rel=”stylesheet” href=”../css/styles.css”>

</head>

We can see that we are using a href or hyperlink attribute, if we take a closer look at the construction of the href attribute we can see that it is a relevant URL because it is linking to a document within the same site, what is different from the earlier hyperlinks that we added is the ‘../‘ at the beginning of the URL. The ‘../’ is used because the file is in a different folder and not the Html folder, so we are telling the browser to go to the root directory, our lessonOne folder and then look in the ‘css‘ folder and then look for the document ‘styles.css‘. If you had the style sheet in the same folder as the Html then you could just use ‘styles.css’ as the attribute but it is good practise to keep your different types of documents in their own folders.

Writing CSS

We can now begin to write our CSS and by linking the document to all three pages, we need only write the CSS rule once and it will have the same effect across multiple pages. This is really useful especially when you might be building a website that could have hundreds of pages.

To start we need to understand a little bit about how to write CSS and break down it’s syntax. CSS can be thought of as a series of rules that tells a Html element how to behave or how to look. A CSS rule is made up of a Selector and a declaration block.

Selector Declaration Declaration

h1 { color:blue; font-size:12; }

The rule above would select all h1 elements and apply the colour blue to them and make them font-size 12px. The declaration will usually come in property/value pairs, color (property), blue (value).

Add this CSS rule to the styles.css document and then save the file, then we can check that it has worked by checking the homePage.html in a browser. This rule should work across all the pages that you created if the style sheet has been linked correctly.

A element styled with CSS
The CSS rule should turn the <h1> element blue.

Selectors

The first part of a CSS rule is the ‘Selector’, this selects the Html element that we wish to style. There are five different types of selectors in CSS. You can find out more about selectors at W3 Schools CSS. In this lesson we will be looking at ‘simple selectors’, these include selecting elements based upon name, id and class. In the example above we used the name of the <h1> element as a selector, h1. We can also use the <p> element as a selector, p. Add the following style rule to your styles.css file, save the file and check the result by refreshing the page in your browser:

p { color:red;}

If we break this rule down, ‘p’ is our selector, ‘color’ is the property and ‘red’ is the value.

Basic HTML with a Blue h1 element and a red p element.
The text in you <p> element should now appear red.