Web technologies: CSS

Cascading Style Sheets (CSS)

Can you put a price on the worth of a well designed web page? It turns out that you can.

How about a redesign of a website form which resulted in an extra $300 million worth of sales in a year?

Design considerations are so important in web page development, that they get their own technology to work alongside HTML in the form of CSS. This is another text based file format that is rendered by a browser with its associated HTML.

A quite important concept in software development is the idea of separation of concerns. This principle states that we should keep things apart that don’t really belong together, and let each separate part do its own job in a self contained way. In this case, HTML is concerned with the structure and content of a page, whereas CSS is responsible for the way the page will look. That includes colours, font styles, layout and other details of the design.

OCR A Level

Once again, the OCR A Level exam requires specific knowledge of certain aspects of CSS that you will need to memorise for the exam:

Inline styles in the form of style attributes:

<h1 style="color:red;">

Internal and external style sheets 
Rules for elements, classes and identifiers:
h1{
    color:red;
}
.infoBox{
    background-color: white;
}
#menu{
    background-color:#A2441B
}

The following properties could be examined:

background-color
border-color
border-style
border-width
color (using names or hex values)
font-family
font-size
height
width

Inline styles

There are actually 3 ways to style pages:

  • inline styles
  • inline style sheets
  • external style sheets

Inline styles are created within the opening tag of HTML elements like this example:

<p style="font-size:160%;">This is a paragraph.</p>

This sort of styling is not recommended because it breaks the principle of separation of concerns by mixing content and structure with visual design. But let’s do more of it!

Activity 1

Using one of your existing pages, add inline styles to do the following:

  1. change the background colour of the page (hint: use an attribute in the body tag)
  2. change the font on two different parts of the page (have at least two different fonts)
  3. change the size of the fonts on the page.

Block and inline elements

HTML elements can be block or inline.

<div> is a container for content that is at block level. An example of use would be to group several paragraphs together, or an image with a caption below it. It could also be used to group together items on a page that belong together in a footer or menu bar.

<span> is a container for content that is smaller than block level, called inline. An example would be a word or words within a sentence.

Activity 2

  • Create sections on your page that use <div> and <span> twice each
  • Embed styles into each <div> block and inline <span> and note the effect of changing background colour, font size and font face within each element.

Inline stylesheets

Inline stylesheets group all of the styling information for a page within a single HTML <style> tag rather than in style attributes within other tags. These styles will then be applied to the relevant part of the page. This way we are keeping the visual design details in a separate area of the page from the content – moving closer to the ideal of separation of concerns.

Activity 3

  • Create an inline style sheet on one of your web pages by embedding styles inside a <style> tag
  • Create a <div> and <span>, apply styles from your internal style sheet to these elements.

External stylesheets

Best practice is to keep content (HTML) separate from design (styles).
To achieve this, it is best to keep style information in a separate file.

The file can be linked to the HTML using a <link> tag like so:

<link rel="stylesheet" href="style.css">

The style.css file in the example above contains all the style rules for the page. The beauty of this is that the same file can be used on every web page that belongs to a particular web site. If the styles need to change there is only one file to change (the .css file), and every web page on the site will change in appearance.

Activity 4

Move the styles created previously internally in your HTML page inside the <style> tags and move out into an external file.

Create the CSS file in your text editor, then link the HTML and CSS using the <link> tag within the HTML

Activity 5

Add all of the following style attributes onto your page at least once:

background-color
border-color
border-style
border-width
color (using names or hex values)
font-family
font-size
height
width

Activity 6

Attempt the exam question 3a and 3b from the 2021 A Level Paper 1, and question 4dii) from the 2023 Paper 1.

Knowledge Check

  • What are the 3 ways of styling a web page?
  • Which one involves the use of the <style> tag?
  • How do you specify a class selector?
  • How do you specify an id selector?
  • What are two advantages of external stylesheets?

Next lesson: Javascript