Cambridge Syllabus Notes

ICT 0417 – Website Authoring: Saving Styles in Cascading Stylesheet Format

Saving Styles in Cascading Stylesheet (CSS) Format

1. What is CSS?

Cascading Style Sheets (CSS) is a language used to describe the presentation of a web page written in HTML or XML. It controls colours, fonts, layout, and many other visual aspects.

2. The Cascading Concept

When several style rules apply to the same element, the browser decides which rule wins based on:

Importance ( !important )
Specificity of the selector
Source order – later rules override earlier ones

Suggested diagram: Visual representation of the cascade (user agent, user, author styles, importance, specificity, source order)

3. Creating an External Stylesheet

External stylesheets are saved as separate files with the .css extension. They can be linked to one or more HTML pages.

Open a plain‑text editor (e.g., Notepad, VS Code).
Write your CSS rules (see section 4).
Save the file with a descriptive name, for example style.css.
Place the CSS file in the same folder as your HTML file or in a sub‑folder such as css/.
Link the stylesheet inside the <head> of each HTML page:
```
<link rel="stylesheet" href="style.css">
```

4. Basic CSS Rule Syntax

A CSS rule consists of a selector and a declaration block.

Part	Purpose	Example
Selector	Identifies the HTML element(s) to style	`p`, `#header`, `.menu`
Declaration block	Contains one or more property‑value pairs	`{ color: red; font-size: 14px; }`
Property	The aspect of presentation to change	`color`, `margin`, `background‑color`
Value	The setting applied to the property	`red`, `10px`, `#f0f0f0`

5. Common CSS Properties for IGCSE Exams

color – text colour
background-color – background colour of an element
font-family, font-size, font-weight
text-align, text-decoration
margin and padding – space outside and inside the border
border – style, width, colour of the element’s border
width and height
display – block, inline, inline‑block

6. Step‑by‑Step Example

Below is a simple HTML page linked to an external stylesheet.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sample Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="title">Welcome to My Site</h1>
    <p class="intro">This paragraph demonstrates external CSS.</p>
</body>
</html>

/* style.css */
#title {
    color: #003366;
    text-align: center;
    margin-top: 20px;
}
.intro {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}

7. Checklist for Saving Styles Correctly

File extension is .css, not .txt or .html.
Encoding is UTF‑8 (most editors default to this).
Use lowercase letters for file names to avoid case‑sensitivity issues on some servers.
Place the <link> element inside the <head> of every HTML page that needs the styles.
Verify the path in the href attribute matches the actual location of the CSS file.
Check that each CSS rule ends with a semicolon (;) and the declaration block ends with a closing brace (}).

8. Practice Exercise

Create a new folder called website.
Inside website, create index.html with a heading, a paragraph, and a navigation list.
Create a file named styles.css in the same folder.
Write CSS rules to:
- Give the heading a blue colour and centre it.
- Set the paragraph font to Verdana, size 14px, and colour #555555.
- Style the navigation list so that list items appear horizontally with a light grey background.
Link styles.css to index.html using the <link> element.
Open index.html in a web browser and verify that the styles are applied.

9. Summary

Saving styles in CSS format allows you to separate presentation from content, reuse designs across multiple pages, and maintain a clean workflow. Remember to use the correct file extension, proper syntax, and accurate linking to ensure your styles are applied consistently.

Be able to save styles in cascading stylesheet format