Welcome to Website Styling: Using Stylesheets (CSS)

Hello future web designers! This chapter is where your website stops looking like a plain black-and-white document and starts looking like a stunning, professional webpage.
We are moving beyond the basic structure (HTML content layer) and focusing on the
Presentation Layer, which controls how everything looks.

Why is this important? Using stylesheets (CSS) ensures your entire website looks consistent, saves immense amounts of time, and makes future changes simple! It’s the difference between painting every single room in a hotel individually and setting one master colour palette for the whole building.

What are Cascading Style Sheets (CSS)?

CSS stands for Cascading Style Sheets. They are the language used to describe the presentation (look and formatting) of an HTML document.

  • Purpose: To separate the content (what is on the page, defined by HTML) from the presentation (how it looks, defined by CSS).
  • Presentation Layer: CSS operates entirely within the Presentation layer of web development.
  • Consistency: If you need to change the font size of all Level 1 headings (<h1>) across 50 pages, you only change one line in the CSS file, not 50 separate HTML files.
Quick Analogy: HTML vs. CSS

Think of a human body:
HTML is the skeleton and organs (the structure and content).
CSS is the clothes, makeup, and hairstyle (the presentation and style).

Types of Stylesheets and the Cascading Hierarchy

There are several ways to apply styles, but in IGCSE, we primarily focus on two methods: External (Attached) Stylesheets and Inline Style Attributes.

1. Attached (External) Stylesheets

These are separate files saved in the cascading stylesheet format (ending in .css).
They contain all the styling rules for the entire website (or specific pages) and are attached to the HTML document.

  • Creation: You must Save styles in cascading stylesheet format (e.g., styles.css).
  • Attachment: They are linked to the HTML page within the <head> section using the <link> tag.
  • File Path: When attaching an external stylesheet, you must use a relative file path (e.g., "../styles/main.css"). This is because absolute file paths (which start with C:/ or D:/) will break when the website is uploaded to a server.

2. Inline Style Attributes

These are styles written directly inside a specific HTML tag using the style attribute.
Example: <p style="color: blue;">This text is blue.</p>

The Hierarchy of Styles (Cascading)

The term "Cascading" means that CSS rules flow down, and some rules can override others. This is the hierarchy of multiple attached stylesheets and inline styles.

When a conflict occurs (two different rules try to style the same element, like a heading):

  1. Inline Style Attributes are the most powerful. They override everything else because they are applied directly to the element. (The strictest boss.)
  2. External Stylesheets (Attached) follow next. If multiple external sheets are attached, the one linked last in the <head> section usually takes precedence. (The latest rule wins.)

Key Takeaway: Inline styles are typically used only for specific, unique overrides, while external stylesheets handle overall design consistency.

Styles, Classes, and Tagging

CSS allows you to apply formatting using two main methods: targeting HTML elements directly (Styles) or creating reusable custom properties (Classes).

1. Defining Generic Styles (Tag Selectors)

A Style targets every instance of a specific HTML tag automatically.

  • You will create external styles to be tagged in a web page, including tags like h1, h2, h3, p, li.
  • If you define h1 {color: red;}, every <h1> on the page will be red.

2. Defining Classes

A Class (defined using a dot, like .warning) is a custom style that you can apply to any HTML element (<h1>, <p>, <div>, etc.).

  • Classes are created for reusable, non-standard formatting.
  • To apply it, you use the class attribute in the HTML tag. Example: <p class="warning">...</p>.
  • You must be able to apply classes to elements within a web page.

Difference between a Style and a Class: A style (tag selector) targets all elements of a certain type automatically (e.g., all <p> tags). A class is a custom, reusable name that only applies when specifically called in the HTML.

Core CSS Properties You Must Know

You need to be able to Create generic external styles and inline style attributes for several key areas:

1. Font Properties

These properties control the appearance of text. You must be able to specify the font properties including:

  • Font Family: The actual font type (e.g., Arial, 'Times New Roman', Sans-serif).
  • Size: Measured in points (pt) or pixels (px).
  • Colour: Using named colours (red) or hex codes (#FF0000).
  • Alignment: left, right, centre, fully justified.
  • Enhancement (Styling): Making text bold, italic, or underlined (though underline is usually done via a text decoration property, you must know the concept).

2. Background Properties

These control the appearance behind the content.

  • Background Colour: Setting the colour behind an element (e.g., a heading or the whole page body).
  • Background Images: Setting an image as the background for an element.

3. Table Properties

Tables (including table, table row, table header, and table data elements) require very specific styling to look professional and legible.

You must be able to define properties including:

  • Size: Setting width and height (using pixels or % values).
  • Background Colour: Colouring the cells or the whole table.
  • Alignment:
    - Horizontal alignment: left, right, centre.
    - Vertical alignment: top, middle, bottom.
  • Spacing and Padding:
    - Padding: The space *inside* a cell, between the content and the cell border.
    - Spacing: The space *between* adjacent cells.
  • Borders:
    - Colour and thickness.
    - Visible/Invisible: Allowing you to show or hide the gridlines.
    - Collapsed: The standard technique to make borders look neat (where adjacent cell borders merge into a single line).
✅ Common Mistake Alert! (Padding vs. Spacing)

Students often confuse padding and spacing in tables.
Padding pushes the content away from the inside edge of the cell.
Spacing pushes the cells away from each other (like table cell margins).

Working with the Stylesheet File

For practical tasks, you will usually be given a stylesheet file or asked to create one.

1. Saving the Stylesheet

Ensure your styles file is saved correctly as a cascading stylesheet format (.css extension). This tells the web browser that the file contains presentation rules, not HTML content.

2. Using Relative File Paths

As discussed earlier, when you attach external stylesheets to an HTML file, you must use a relative file path.

  • Why? A relative path describes the location of the CSS file relative to the HTML file (e.g., "up one folder, then into the 'styles' folder"). This ensures the link works regardless of where the website is hosted.

3. Comments

It is good practice to attach comments to an external stylesheet.

  • Comments explain what sections of the code do. They are useful for you and for other developers who might edit the file later.
    Example: /* This section formats all the main heading tags */
  • Comments are ignored by the web browser; they do not appear on the webpage.

💪 Key Takeaway Summary for Stylesheets

1. CSS (Presentation Layer) handles formatting and style.
2. Hierarchy: Inline styles override external styles.
3. Style vs. Class: Styles target all specific tags (h1, p). Classes are custom, reusable names (.special).
4. Essential Properties: Master font control, background colours/images, and all the specific table properties (borders: collapsed, padding, spacing, alignment).
5. File Management: Use relative file paths and save as .css.