Be able to save styles in cascading stylesheet format

Published by Patrick Mutisya · 14 days ago

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.

  1. Open a plain‑text editor (e.g., Notepad, VS Code).

  2. Write your CSS rules (see section 4).

  3. Save the file with a descriptive name, for example style.css.

  4. Place the CSS file in the same folder as your HTML file or in a sub‑folder such as css/.

  5. 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.

PartPurposeExample
SelectorIdentifies the HTML element(s) to stylep, #header, .menu
Declaration blockContains one or more property‑value pairs{ color: red; font-size: 14px; }
PropertyThe aspect of presentation to changecolor, margin, background‑color
ValueThe setting applied to the propertyred, 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

  1. Create a new folder called website.

  2. Inside website, create index.html with a heading, a paragraph, and a navigation list.

  3. Create a file named styles.css in the same folder.

  4. 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.

  5. Link styles.css to index.html using the <link> element.

  6. 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.