Styling HTML Documents With CSS

So far we have been learning how to structure the content of our pages with HTML. We have learned that it is important to separate the information in our HTML from the presentation, or styling, of that content. If we do that, we maintain the maximum flexibility available to us – we can access the content information in many different ways and we can also specify many different ways of styling the content.
We may wish to style our content in various ways depending on where it is to be displayed. For example, we can create a style for viewing the pages on a standard desktop monitor, another style for viewing on a mobile phone, another style for printing the page on a printer, and yet another style for a screen reader to speak the page for a blind user. For the moment, let’s just look at how to create a style for a standard screen. We will write the style in a way that will allow our pages to display well on other screens too – such as palm-tops and mobile phones.

What is CSS?
CSS stands for Cascading Style Sheets.

The HTML we have written is like a heirarchy of different elements: The body element contains h1 elements and p elements; the p elements may contain a elements, img and ul elements; the ul elements contain li elements that may contain a, strong or em elements, etc. When we create a style for any element, the style cascades down to all the other elements contained within it. This is a powerful technique that makes it very easy to create and modify styles in our pages.

Where To Write CSS Styles
There are three places in which we can specify our styles:

  • In the head element of each HTML document – the styles specified here will affect all HTML in that document.
  • Inside a specific element within the document – the styling will affect only that element.
  • In a separate file, called an external stylesheet, which we can link to any page on our website – the stylesheet will then affect every page that links to it.

We will usually want to create an external stylesheet. This gives us the maximum flexibility when creating styles for our website. With a single change to a style in the stylesheet, we can change the look of our entire website. It is not generally advisable or necessary to specify a style within specific elements in the HTML. By doing so, we miss out on the advantages of separating presentation (or styling) from content.

Creating A Style Element
Let us start by learning how to style a single HTML document. We will place the styles in the head of the document. If we want, we can later cut and paste these styles into an external stylesheet so that we can affect all the pages on our website. Inside the head element, we place a style element. We also need to add an attribute, type, with the value text/css to tell the browser what kind of style code we are writing:

<head>
<title>My Page Title</title>
<style type=”text/css”>
</style>
</head>

All of our CSS code then gets written within the opening and closing tags of the style element.

color, Our First Style
Here is a typical piece of CSS code. It makes the text within any h1 elements on the page blue in colour.

h1 { color:blue; }

Yes… the word “color” is spelled without a “u”. All spellings in HTML and CSS is in American English.

Let us look at each part of the CSS code above:

  1. We first specify what we want to apply our style to – in this case, the h1 element.
  2. We then open the style information for that element with a { curly brace.
  3. We then write the CSS property that we want to apply – in this case, color.
  4. We separate the property from its value with a : colon.
  5. We give the property a value, blue.
  6. We end the color statement with a ; semicolon.
  7. Finally, we close the h1 style with a } curly brace.It does not matter whether or not there are spaces or line breaks between any of the words or punctuation in the code. You should write the code so that it is easy for you, the web designer, to read and understand it.

Not Enough Words For The Colours Of The World
In the above example, we gave the color property a value of blue, which makes text within our web page blue in colour. Colour values such as blue can also be used to specify the colour of backgrounds, borders and more. There are a number of pre-defined colour values like blue available in CSS: there is white, black, yellow, red, green and more. But what do we do if we wish to specify a very particular shade of a particular colour? There are not enough words to describe all the possible colours that exist, so instead we need a way to specify exactly which colour we want… To explain this properly, we must take a glance at a couple of fundamentals in Physics and Mathematics.