Which layer of a web page is CSS used for?

the presentation layer. It controls appearance.

What is an advantage of an external stylesheet?

One file can control the appearance of every page of a site. A change in one place updates the whole site.

Which takes priority if they conflict?

an inline style. Inline styles override attached stylesheets.

What is a class in CSS?

a named set of styles applied only to chosen elements. The same class can be used on different elements.

Why does a font family list end with a generic font such as sans-serif?

so that a similar font is used if the named fonts are not available. Not every device has every font.

Which file format is an external stylesheet saved in?

.css. Cascading stylesheet format.

Website authoring: CSS and the presentation layer · Cambridge IGCSE Information & Communication Technology

In plain words

HTML says what is on a page. CSS says what it looks like. Keeping the two apart means a whole website can be restyled by changing one file.

8 things to know

CSS (cascading stylesheets) is the language of the presentation layer. It sets fonts, colours, backgrounds, alignment, spacing and the borders and sizes of tables.
An external stylesheet is a separate file, saved in .css format and attached to a page in its head section. One stylesheet can be attached to every page of a site, so the pages look consistent, and one change updates them all.
An inline style is written inside a single tag, using the style attribute. It affects that one element only.
Hierarchy: an inline style overrides the attached stylesheets. If several stylesheets are attached, the one attached last takes priority.
A style defined for a tag, such as h1, applies to every element with that tag. A class has its own name, written with a full stop in front in the stylesheet, and applies only to the elements it is added to.
Common properties: background colour and background image; font family, font size, colour, text alignment, bold and italic; and for tables, width and height, borders, border collapse, spacing and padding.
A font family lists several fonts in order of preference, ending with a generic one such as sans-serif, in case the first is not on the user's device.
Comments can be added to a stylesheet to explain it. A stylesheet must be attached using a relative file path.

Worked example

A website has 50 pages, each attached to the same external stylesheet. The owner wants all main headings to change from black to dark blue. What has to be done?

Open the stylesheet and change the colour property in the h1 style.
Save the stylesheet.
All 50 pages now show dark blue headings, because they all take their h1 style from that one file.

Tips and tricks

Attached stylesheet: one file, many pages. Inline style: one element only, and it wins if the two disagree.
A style for a tag changes every such tag. A class changes only the elements you give it to. That is the difference to state.

6 questions, about 2 minutes.

It lands in your notebook with its questions as flashcards.

Website authoring: CSS and the presentation layer: 6 questions and answers

These are the quiz’s questions. Do the quiz first, then come back here for the ones that got you.

Which layer of a web page is CSS used for?
- the content layer
- the presentation layer (the answer)
- the behaviour layer
- the storage layer
It controls appearance.
What is an advantage of an external stylesheet?
- It can be used on only one page.
- One file can control the appearance of every page of a site. (the answer)
- It makes pages load without a browser.
- It replaces HTML.
A change in one place updates the whole site.
Which takes priority if they conflict?
- the first stylesheet attached
- the browser's default
- an inline style (the answer)
- they are all ignored
Inline styles override attached stylesheets.
What is a class in CSS?
- a type of web page
- a named set of styles applied only to chosen elements (the answer)
- a comment
- an image format
The same class can be used on different elements.
Why does a font family list end with a generic font such as sans-serif?
- to make the text bold
- so that a similar font is used if the named fonts are not available (the answer)
- to make the file smaller
- to add a border
Not every device has every font.
Which file format is an external stylesheet saved in?
- .htm
- .css (the answer)
- .csv
- .rtf
Cascading stylesheet format.

6 questions

Tap an answer and you’ll see straight away whether it’s right, and why.

Worksheet

3 questions, 5 marks. Write your answers on paper, then check them.

Website authoring: CSS and the presentation layer

Cambridge IGCSE Information & Communication Technology 0417 · 5 marks · papermunch.org

Name ______________________________ Date ______________

Describe the difference between an attached stylesheet and an inline style.[2]
Show answerHide answer
An attached stylesheet is a separate file whose styles apply to every page it is attached to. An inline style is written inside one tag and applies only to that element.
I got this one
Describe the difference between a style and a class in CSS.[2]
Show answerHide answer
A style is defined for a tag, such as h1, and applies to every element with that tag. A class is given a name and applies only to the elements that use that class.
I got this one
A page has a stylesheet that makes paragraphs black, and one paragraph has an inline style making it red. State the colour of that paragraph.[1]
Show answerHide answer
Red. The inline style overrides the stylesheet.
I got this one

Answers: Website authoring: CSS and the presentation layer

1. An attached stylesheet is a separate file whose styles apply to every page it is attached to. An inline style is written inside one tag and applies only to that element.
2. A style is defined for a tag, such as h1, and applies to every element with that tag. A class is given a name and applies only to the elements that use that class.
3. Red. The inline style overrides the stylesheet.