Know and understand 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

Published by Patrick Mutisya · 8 days ago

ICT 0417 – Website Authoring: Cascading Style Sheets

21 Website Authoring

Objective

Know and understand the characteristics of Cascading Style Sheets (CSS), including the difference between attached stylesheets and inline style attributes, and the hierarchy of multiple attached stylesheets and inline styles within a web page.

1. What is CSS?

Cascading Style Sheets (CSS) are a language used to describe the presentation of a web document written in HTML or XML. CSS separates content (HTML) from presentation (layout, colours, fonts), making pages easier to maintain and faster to load.

2. Ways to Apply CSS

  • External (attached) stylesheet – a separate .css file linked to the HTML document with a <link> element.

  • Internal stylesheet – CSS placed inside a <style> element in the <head> of the HTML page.

  • Inline style attribute – CSS written directly in an element’s style attribute.

3. Characteristics of Each Method

MethodTypical UseAdvantagesDisadvantages
External (attached) stylesheetSite‑wide styling; shared by many pages

  • One file controls many pages → easier maintenance

  • Browser caches the file → faster subsequent page loads

  • Cleaner HTML markup

  • Requires an extra HTTP request

  • Changes affect all pages that link to the file

Internal stylesheetStyling that applies only to a single page

  • No extra file to manage

  • Useful for prototypes or page‑specific overrides

  • Increases page size

  • Cannot be reused by other pages

Inline style attributeOne‑off styling for a specific element

  • Immediate visual change without editing CSS files

  • Useful for testing or dynamic style changes via scripts

  • Clutters HTML markup

  • Overrides external/internal rules, making maintenance harder

  • Cannot be reused

4. The CSS Cascade – Hierarchy of Rules

The term “cascade” describes how the browser decides which style rule to apply when several rules could affect the same element. The order of precedence is:

  1. Browser default (user agent) stylesheet

  2. External stylesheets (in the order they appear in the HTML)

  3. Internal stylesheet

  4. Inline style attribute

  5. Declarations marked !important (override all other rules except another !important with higher specificity)

Suggested diagram: Flowchart showing the cascade order from browser defaults to !important declarations.

5. Multiple External Stylesheets

When more than one external stylesheet is linked, the cascade follows the order of the <link> elements in the HTML document. Later sheets can override earlier ones if they contain rules with equal or higher specificity.

<head>
<link rel="stylesheet" href="reset.css">      
<link rel="stylesheet" href="layout.css">    
<link rel="stylesheet" href="theme.css">     
</head>

In the example above, a rule in theme.css that sets p { color: blue; } will override a conflicting rule in layout.css because theme.css is linked later.

6. Specificity and the Cascade

When two rules have the same origin (e.g., both from external stylesheets), the browser uses specificity to decide which rule wins. Specificity is calculated based on selectors:

  • Inline style attribute – highest specificity (treated as 1,0,0,0)

  • ID selector – 0,1,0,0

  • Class, attribute, pseudo‑class – 0,0,1,0

  • Element and pseudo‑element – 0,0,0,1

If two selectors have the same specificity, the later one in the cascade wins.

7. Practical Example

Consider the following HTML snippet:

<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="override.css">
<style>
h1 { color: green; }
</style>
</head>
<body>
<h1 style="color: red;">Welcome</h1>
</body>

Which colour will the <h1> text appear?

  • Base.css – may define h1 { color: blue; }

  • Override.css – may define h1 { color: orange; }

  • Internal stylesheet – defines h1 { color: green; }

  • Inline attribute – style="color: red;"

According to the cascade hierarchy, the inline style has the highest precedence (unless an !important rule is present elsewhere). Therefore the heading will be displayed in red.

8. Summary Checklist

  • External stylesheets are linked with <link rel="stylesheet"> and are ideal for site‑wide consistency.

  • Internal stylesheets sit inside a <style> block in the page’s <head>.

  • Inline styles use the style attribute on individual elements.

  • The cascade order (from lowest to highest priority) is: browser defaults → external → internal → inline → !important.

  • When multiple external stylesheets are used, later sheets override earlier ones if selectors have equal specificity.

  • Specificity determines which rule wins when origins are the same; higher specificity beats lower.

9. Quick Revision Questions

  1. What tag is used to attach an external stylesheet to an HTML page?

  2. Explain why inline styles can make maintenance harder.

  3. In what order does the browser apply styles when three external stylesheets are linked?

  4. How does the !important declaration affect the cascade?

  5. Give an example of a selector with higher specificity than .menu.