Year 10 · ICT · Summer 2

Website authoring and images; the Year 10 mock · Lesson 3 of 5

CSS stylesheets

Practical21.3a CSS: rules, classes, backgrounds and fonts21.3b CSS: page styles, tables and the cascade

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

You will learn to

  • Write CSS rules with selectors, properties and values.
  • Create an external stylesheet and attach it with a relative path.
  • Set colours in hex, font families with a generic fallback, sizes and alignment.
  • Apply the cascade to predict which style wins when an inline style is added.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Success criteria

You have got it when you can say:

  • I can attach my stylesheet and see the page change.
  • I can set h1 to a hex colour and a font with a generic fallback, like sans-serif.
  • I can explain why an inline style beats the external stylesheet.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Retrieval starter

Questions from before. Write your answers, then show them.

  1. Last lesson

    Keeping the aspect ratio means…

    A Only the width changesB The image is croppedC Width and height change together so nothing stretches

    C. Width and height change together so nothing stretches

  2. Last unit

    VLOOKUP's last argument FALSE means…

    A An exact match is requiredB An approximate matchC Case-sensitive

    A. An exact match is required

  3. Earlier this year

    Job sharing means…

    A Working nightsB Two people share one full-time jobC Working from home

    B. Two people share one full-time job

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Key words (1 of 4)

HTML
HyperText Markup Language: the language of the content layer of a web page.
CSS
Cascading Style Sheets: the language of the presentation layer, which sets how a page looks.
Tag
A word in angle brackets, such as `<p>`, that marks the start or end of an element.
Attribute
Extra information inside an opening tag, written name="value", such as src or alt.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Key words (2 of 4)

Head
The part of a page holding information about it: title, meta tags, stylesheet links.
External stylesheet
A separate .css file attached to pages with the link element.
Inline style
CSS written in a style attribute inside one tag; it affects only that element.
Class
A label given to elements with the class attribute so CSS can style them as a group.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Key words (3 of 4)

Selector
The part of a CSS rule that says which elements it styles, such as h1 or .note.
Generic font family
A fallback type of font (serif, sans-serif, monospace) used if named fonts are missing.
Cascade
The rules that decide which style wins when two styles set the same property.
Relative path
A file location described from the current file's folder, such as images/logo.png.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Key words (4 of 4)

Absolute path
A full file location from the very start, such as a full URL or C:/...
Padding
The space inside an element or cell between its border and its content.
Alt text
Alternative text for an image, read by screen readers and shown if the image fails.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 1 of 11 · part 1 of 3

How a CSS rule is written

A CSS rule has a selector (what to style), then curly brackets { } holding one or more declarations.

Each declaration is a property, a colon, a value and a semicolon: `color: #8B4513;`.

Comments go between /* and */. The browser ignores them. Use them to explain your styles.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 1 of 11 · part 2 of 3

How a CSS rule is written (continued)

/* Café Retiro: main headings */
h1 {
    color: #8B4513;
    text-align: center;
}

/* one rule for two selectors */
h2, h3 {
    color: #2E7D32;
}

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 1 of 11 · part 3 of 3

How a CSS rule is written (continued)

!Watch out

CSS uses American spelling: color and center. colour and centre are not recognised, and the browser ignores that whole declaration.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 2 of 11 · part 1 of 3

Inline styles and external stylesheets

An inline style goes inside one tag, in a style attribute. It affects only that element.

An external stylesheet is a separate .css file attached with `<link>`. It can style every page.

An internal stylesheet sits in a `<style>` element in the head. It affects only that page.

Use external stylesheets for a whole site. Use inline styles only when the question asks, or for one exception.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 2 of 11 · part 2 of 3

Inline styles and external stylesheets (continued)

<!-- inline: only this heading -->
<h1 style="color: #8B4513; text-align: center;">Café Retiro</h1>

<!-- in the head: internal and external -->
<link rel="stylesheet" href="styles/cafe.css">
<style>
    h2 {
        color: #1565C0;
    }
</style>

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 2 of 11 · part 3 of 3

Inline styles and external stylesheets (continued)

/* styles/cafe.css: CSS only, no <style> tags */
h2 {
    color: #2E7D32;
}
!Watch out

Never put `<style>` tags or any HTML inside a .css file. The browser stops reading the rule they break, and the styles fail.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 3 of 11 · part 1 of 3

Classes in CSS

A class selector starts with a full stop: .note styles every element with class="note".

p.note styles only paragraphs with that class. Other elements with class note are not affected.

A class name is case-sensitive and has no spaces. In the HTML it has no full stop.

e.g.Example
The first paragraph is brown and bold. The second has two classes, so it is brown, bold and italic.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 3 of 11 · part 2 of 3

Classes in CSS (continued)

<p class="price">Café con leche €1.80</p>
<p class="price note">Prices include VAT.</p>
.price {
    color: #8B4513;
    font-weight: bold;
}

p.note {
    font-style: italic;
}

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 3 of 11 · part 3 of 3

Classes in CSS (continued)

!Watch out

Writing class=".price" in the HTML is wrong. The full stop belongs only in the CSS selector.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 4 of 11 · part 1 of 3

Backgrounds: colour and image

background-color fills an element with a colour. Colours can be names (white) or hex codes (#FDF6EC).

background-image uses url() with a relative path. The path starts from the CSS file, not from the HTML page.

background-repeat controls tiling: repeat, repeat-x, repeat-y or no-repeat.

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 4 of 11 · part 2 of 3

Backgrounds: colour and image (continued)

body {
    background-color: #FDF6EC;
    background-image: url("../images/beans.jpg");
    background-repeat: repeat-x;
}

.offer {
    background-color: #FFF3E0;
}

21.3a CSS: rules, classes, backgrounds and fonts · The explanation · step 4 of 11 · part 3 of 3

Backgrounds: colour and image (continued)

?Why?

cafe.css is in the styles folder, so it goes up one folder (../) to reach images. Setting a background colour too means the page still looks right if the image fails to load.

!Watch out

A hex code has # and six hex digits (0–9, A–F). #FDF6E is only five digits and is ignored.

The explanation · 7 more steps

More on the lesson page

The lesson page has the rest of the explanation, step by step:

  • Fonts: family, size, colour, alignment, bold, italic
  • A full stylesheet for h1, h2, h3, p and li
  • Table borders: thickness, colour, collapse, invisible
  • Cells: padding, spacing, size, colour and alignment
  • The cascade: which style wins
  • How website marks are lost
  • Giving evidence

Open the lesson page

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Quick quiz · 1 of 3

Zip compression is…

  1. A Neither
  2. B Lossy
  3. C Lossless

C. Lossless

Every byte comes back when you unzip.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Quick quiz · 2 of 3

Exporting means…

  1. A Deleting
  2. B Saving in a format another program can open
  3. C Printing

B. Saving in a format another program can open

Importing is bringing a file in.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Quick quiz · 3 of 3

A stylesheet is attached with…

  1. A <link rel="stylesheet" href="styles.css"> in the head
  2. B <css>
  3. C <style> in the body

A. <link rel="stylesheet" href="styles.css"> in the head

The exact file name matters.

Year 10 · ICT · Website authoring and images; the Year 10 mock · Lesson 3 of 5

Exit ticket

Answer on paper before you go. Then check.

  1. An anchor (bookmark) link…

    A Jumps to a place on the same pageB Opens a new siteC Opens an email

    A. Jumps to a place on the same page href="#top" jumps to id="top".

  2. font-family: Arial, Helvetica, sans-serif; means…

    A Only sans-serifB Use Arial; if missing, Helvetica; otherwise any sans-serifC Use all three at once

    B. Use Arial; if missing, Helvetica; otherwise any sans-serif Fallbacks, ending with a generic family.