Cascading Style Sheets (CSS) Fundamentals

SA
StudyAI Editorial
Reviewed by StudyAI tutors
· Published Updated

From the 123 curriculum

Cascading Style Sheets (CSS) Fundamentals

TL;DR

CSS lets you control how your web content looks, like colors, fonts, and layout. It works by linking styles to HTML elements using selectors and properties. Understanding how styles "cascade" and are inherited is key to predictable design.

1. The Mental Model

Think of CSS as the "paint and blueprint" for your HTML "building blocks." HTML provides the structure (like walls and rooms), and CSS applies the decorations (colors, wallpaper, furniture arrangement) and structural rules (room sizes).

2. The Core Material

What is CSS?

Close-up photograph of a CSS3 logo sticker held by a person with blurred background.
Photo by RealToughCandy.com on Pexels

CSS stands for Cascading Style Sheets. It's a language used to describe the presentation of a web page written in HTML. This separation of content (HTML) from presentation (CSS) makes web development more efficient and maintainable.

How CSS Connects to HTML

Close-up of HTML code displayed on a computer screen in dark mode, focusing on programming concepts.
Photo by César Gaviria on Pexels

There are three main ways to connect CSS to HTML:

  1. Inline Styles: Applied directly to an HTML element using the style attribute. Good for quick, isolated changes, but generally not recommended for larger projects as it mixes content and presentation.

    html <p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>

  2. Internal (Embedded) Styles: Placed within a <style> tag in the <head> section of an HTML document. Useful for single pages with unique styles.

    html <!DOCTYPE html> <html> <head> <title>My Page</title> <style> h1 { color: green; text-align: center; } </style> </head> <body> <h1>Welcome!</h1> </body> </html>

  3. External Stylesheets: The most common and recommended method. Styles are written in a separate .css file and linked to the HTML document using a <link> tag in the <head>. This allows you to apply the same styles to multiple HTML pages.

    html <!-- In your HTML file (e.g., index.html) --> <head> <link rel="stylesheet" href="styles.css"> </head>
    css /* In your CSS file (e.g., styles.css) */ body { font-family: Arial, sans-serif; background-color: lightgray; }

CSS Syntax: Rulesets

Close-up of colorful CSS code lines on a computer screen for web development.
Photo by Pixabay on Pexels

A CSS ruleset consists of a selector and a declaration block. The declaration block contains one or more declarations, each with a property and a value.

/* This is a CSS ruleset */
selector { /* This is the selector */
    property: value; /* This is a declaration */
    another-property: another-value; /* Another declaration */
}
  • Selector: Points to the HTML element(s) you want to style.
  • Property: The specific visual characteristic you want to change (e.g., color, font-size, margin).
  • Value: The setting for that property (e.g., blue, 16px, 20px).

Common Selectors

Creative layout of white numbers on a bright blue background, focusing on '123'.
Photo by Black ice on Pexels

  • Element Selector: Selects all instances of an HTML element (e.g., p, h1, div).

  • Class Selector: Selects elements with a specific class attribute. Preceded by a dot (.). You can apply the same class to multiple elements.

    html <p class="highlight">Important text</p> <span class="highlight">Also important</span>
    css .highlight { background-color: yellow; }
    * ID Selector: Selects a single element with a specific id attribute. Preceded by a hash (#). IDs should be unique per page.

    html <div id="main-header"></div>
    ```css

    main-header {

    border-bottom: 1px solid black;

    }
    ```

The Cascade

The "C" in CSS stands for Cascading. This means that if multiple styles apply to the same element, CSS has rules to decide which style takes precedence.

Here's the general order of precedence (from lowest to highest):

  1. Browser's default styles
  2. User-defined styles (if any)
  3. External stylesheets
  4. Internal (embedded) stylesheets
  5. Inline styles
  6. !important (overrides almost everything, use sparingly)

When multiple rules apply to an element and have the same origin (e.g., all from an external stylesheet), specificity and order determine the winner. More specific selectors (e.g., ID selectors are more specific than class selectors) win. If specificity is the same, the last declared rule wins.

graph TD
    A["Browser Default Styles"] --> B["User Defined Styles"]
    B --> C["External Stylesheet"]
    C --> D["Internal (Embedded) Styles"]
    D --> E["Inline Styles"]
    E --> F["!important Declaration"]
    F --> G["Final Applied Style"]

Inheritance

Some CSS properties are inherited by child elements from their parent elements. For example, font-family and color are often inherited. If you set font-family: Arial; on the body element, all text inside the body (unless overridden) will use Arial. Properties like border and margin are generally not inherited.

3. Worked Example

Let's say you have this HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="my-styles.css">
    <style>
        .card {
            background-color: #f0f0f0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <header id="main-header">
        <h1>My Awesome Site</h1>
    </header>
    <main>
        <p>Welcome to my site. Here's some content.</p>
        <div class="card">
            <h2>Product A</h2>
            <p style="color: purple;">This is product A's description.</p>
        </div>
        <div class="card special-card">
            <h2>Product B</h2>
            <p>This is product B's description.</p>
        </div>
    </main>
</body>
</html>

And this my-styles.css file:

/* my-styles.css */
body {
    font-family: Verdana, sans-serif;
    color: #333;
    margin: 20px;
}

#main-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
}

h1 {
    font-size: 2.5em; /* 2.5 times the base font size */
}

h2 {
    color: #0056b3;
    font-size: 1.8em;
}

.special-card {
    border: 2px dashed red;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

p {
    line-height: 1.5; /* Spacing between lines */
}

Here's what happens:

  1. body styles: The body gets Verdana font, dark gray text, and a 20px margin from my-styles.css. All its children, including header, main, h1, h2, p, will inherit font-family and color unless overridden.
  2. #main-header styles: The header gets a blue background, white text, padding, and centered text from my-styles.css.
  3. h1 styles: The h1 in the header gets a font-size of 2.5em from my-styles.css. Its color is inherited white from #main-header.
  4. .card styles: Both div elements with class card get a light gray background and 10px padding from the internal style block. Since internal styles have higher precedence than external styles, if my-styles.css also had a .card rule, the internal one would win.
  5. h2 styles: Both h2 elements get a dark blue color and 1.8em font size from my-styles.css.
  6. Inline p style: The first p inside .card explicitly sets its color to purple via an inline style. This takes precedence over the body's inherited #333 color.
  7. .special-card styles: The second div gets a red dashed border and a shadow from my-styles.css. This rule is additive to the .card styles because it affects different properties. If both .card and .special-card tried to set background-color, the .special-card (due to being defined later in this scenario) would win if it was in the same stylesheet and had equal specificity.

4. Key Takeaways

  • CSS defines the visual presentation of your HTML content, separating structure from style.
  • You can connect CSS to HTML using inline, internal, or external methods, with external being best practice for larger projects.
  • CSS rulesets use selectors to target HTML elements and declarations (property: value;) to style them.
  • Understanding specificity and order of declaration is crucial for predicting which styles will apply when multiple rules conflict.
  • The "cascade" means styles are applied in a specific order, with more specific or later-defined rules usually winning.
  • Some properties, like font-family and color, are inherited by child elements from their parents.
  • Use class selectors for reusable styles and ID selectors for unique elements on a page.

Common mistakes you should avoid:
- Don't use inline styles for extensive styling; it makes your code messy and hard to maintain.
- Avoid overusing !important as it breaks the natural cascade and makes debugging difficult.
- Forgetting to link your external stylesheet in the HTML <head> is a common oversight.
- Not understanding selector specificity can lead to styles not applying as you expect.
- Using IDs for styling elements that appear multiple times; use classes instead.

5. Now Try It

Create a new HTML file (index.html) and

Frequently asked about Cascading Style Sheets (CSS) Fundamentals

CSS lets you control how your web content looks, like colors, fonts, and layout. It works by linking styles to HTML elements using selectors and properties. Understanding how styles "cascade" and are inherited is key to predictable design. Read the full notes above for the details.

Cascading Style Sheets (CSS) Fundamentals is a core topic in 123. Most exam papers test it via a mix of definitions, worked examples, and applied problems. The notes above cover the high-yield sub-topics, common pitfalls, and the kind of questions examiners typically set.

Yes — every note in the StudyAI Campus Hub is free to read in full, right here on this page, with no account needed. If you clone the plan into your own dashboard, the free plan shows a preview of each note there; Basic and above unlock the full notes in your dashboard, along with practice quizzes, flashcards and offline study. You can always come back here to read the complete note for free.
Continue with
JavaScript Fundamentals and Library Integration (YUI/Moodle)

More from 123

Moodle-Specific Components and Best Practices
Client-Side Configuration and Moodle Context
Advanced YUI Module Usage and Interactivity Patterns
JavaScript Fundamentals and Library Integration (YUI/Moodle)
Introduction to Web Document Structure and Metadata

Get the full 123 curriculum

Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.

Create Free Account