21.3 Use Stylesheets

2026 Syllabus Objectives

  • Use CSS in the presentation layer: Create the presentation layer of a web page
  • Create generic external styles and inline style attributes including: background properties including colour, images; font properties; table, table row, table header and table data properties including size, background colour, horizontal and vertical alignment, spacing, padding, borders: including collapsed, colour, thickness, visible/invisible
  • Create classes including: background properties including colour, images; font properties; table, table row and table data properties including size, background colour, horizontal and vertical alignment, spacing, padding, borders: including collapsed, colour, thickness, visible/invisible
  • Create external styles to be tagged in a web page including h1, h2, h3, p, li
  • Specify the font properties including font family, size, colour, alignment, bold, italic
  • Attach comments to an external stylesheet
  • Save styles in cascading stylesheet format
  • Characteristics of cascading stylesheets including the difference between attached stylesheets and inline style attributes, the hierarchy of multiple attached stylesheets and inline styles within a web page
  • Characteristics of a style and a class including the difference between them
  • Reason relative file paths must be used for attached stylesheets

🎨 Working with Styles

https://cambridgeassistant.com

What are Styles?

Styles are settings such as font face, font size, text alignment, and font colours applied to webpage elements to maintain consistency across your website. Using styles is much quicker and easier than applying individual settings to every piece of text in each webpage you create.

Benefits of Using Styles

  • Consistency: Helps maintain a uniform look across all pages
  • Efficiency: Much faster than setting properties individually for each element
  • Maintainability: Changes to a stylesheet automatically apply to all linked pages
  • Corporate Identity: Allows companies to establish a recognizable "corporate feel" through consistent colour schemes, logos, and font faces

Key Point: Styles can be defined for text, page layout, colour schemes, and default settings for objects and links on the page.

Where Styles are Defined

Styles are always defined in the head section of a webpage. They can be defined in:

  1. Each individual webpage (internal styles)
  2. An external stylesheet that is attached to the webpage (more efficient)

When you use heading styles like h1 to h6 or paragraph style p without defining them, the web browser uses its own default settings. However, you can set your own definitions for each style, and the browser will attempt to apply these custom styles to the page.

Sign in to view full notes