CSS chevron_right What is CSS & How it Works

What is CSS & How it Works

calendar_today schedule 12 min read

Learning Objectives: By the end of this lesson, you will be able to:

  • Understand the purpose and role of CSS in web development
  • Apply CSS using three different methods (inline, internal, external)
  • Write basic CSS syntax with proper selectors, properties, and values
  • Identify the advantages and disadvantages of each CSS method
  • Connect CSS to HTML documents effectively

1. Welcome and Introduction (5 minutes)

Icebreaker Activity

Welcome! Let’s start with an engaging question: If you could instantly change the look of any website you visit regularly, which one would you pick and what would you change? Maybe the colors are too bright, the text is too small, or the layout feels cluttered?

This is exactly what CSS allows us to do - transform the visual appearance of web pages!

Lesson Overview

  • Duration: 60 minutes
  • Prerequisites: Basic understanding of HTML elements and structure
  • Materials Needed: Text editor (VS Code, Sublime Text, etc.), web browser with developer tools

2. Learning Objectives and Session Outline (5 minutes)

What We’ll Cover Today:

  1. Understanding CSS - What it is and why it’s essential for web development
  2. Three CSS Methods - Inline, internal, and external stylesheets
  3. CSS Syntax - Selectors, properties, values, and the anatomy of CSS rules
  4. Hands-on practice - Implementing all three CSS methods
  5. Best practices - When to use each method and common pitfalls

Success Criteria:

By the end of this session, you should be able to add styling to any HTML page using all three CSS methods and understand when each approach is most appropriate.

3. Foundation Knowledge (15-20 minutes)

Core Concepts

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. While HTML provides the structure and content of a web page, CSS controls how that content looks - the colors, fonts, layouts, spacing, and visual effects.

Real-World Analogy: Think of HTML as the skeleton and organs of a person, while CSS is like the skin, clothes, makeup, and overall appearance. You need both to create a complete, presentable human being.

Why This Matters: Without CSS, web pages would be plain, unstyled documents with default browser styling. CSS enables us to create visually appealing, professional-looking websites that enhance user experience and communicate brand identity.

The Separation of Concerns Principle

CSS follows a fundamental web development principle called “separation of concerns”:

  • HTML: Structure and content (what)
  • CSS: Presentation and styling (how it looks)
  • JavaScript: Behavior and interactivity (how it behaves)

This separation makes websites easier to maintain, debug, and scale.

Key Terminology

  • Stylesheet: A file or section containing CSS rules
  • Selector: The part of a CSS rule that specifies which HTML elements to style
  • Property: The aspect of an element you want to change (like color, size, position)
  • Value: The specific setting for a property
  • Declaration: A property-value pair (e.g., color: blue;)
  • Rule Set: A selector combined with one or more declarations

4. Detailed Explanation and Examples (25-30 minutes)

Understanding the Three Methods of Adding CSS

CSS can be applied to HTML documents in three distinct ways, each with its own use cases, advantages, and limitations.

Method 1: Inline Styles

Inline styles are applied directly to individual HTML elements using the style attribute. The CSS properties and values are written as the attribute’s value.

Syntax:

<element style="property: value; property: value;">Content</element>

When to Use:

  • Quick testing and debugging
  • Overriding other styles for specific elements
  • Email templates (where external stylesheets may not work)
  • Dynamic styling with JavaScript

Advantages:

  • Highest specificity (overrides other CSS)
  • No external file dependencies
  • Immediate effect

Disadvantages:

  • Difficult to maintain
  • Violates separation of concerns
  • Cannot use pseudo-classes or media queries
  • Increases HTML file size

Method 2: Internal Stylesheets

Internal stylesheets are defined within the <style> element in the HTML document’s <head> section. All CSS rules are contained within this single HTML document.

Syntax:

<head>
  <style>
    selector {
      property: value;
      property: value;
    }
  </style>
</head>

When to Use:

  • Single-page websites
  • Unique styling for one specific page
  • Prototyping and experimentation
  • When external stylesheets aren’t practical

Advantages:

  • All styling for the page in one file
  • Faster loading than external files (no additional HTTP request)
  • Can use all CSS features (pseudo-classes, media queries, etc.)

Disadvantages:

  • Styles cannot be reused across multiple pages
  • Makes HTML files larger
  • Still mixes content with presentation

Method 3: External Stylesheets

External stylesheets are separate .css files that contain only CSS rules. They’re linked to HTML documents using the <link> element.

Syntax:

<head>
  <link rel="stylesheet" href="path/to/stylesheet.css">
</head>

When to Use:

  • Multi-page websites
  • Production environments
  • When styles need to be shared across multiple pages
  • Professional web development

Advantages:

  • Complete separation of content and presentation
  • Styles can be reused across multiple HTML files
  • Easier to maintain and update
  • Smaller HTML files
  • CSS files can be cached by browsers

Disadvantages:

  • Requires additional HTTP request
  • Dependency on external file availability

CSS Syntax Deep Dive

Understanding CSS syntax is crucial for writing effective stylesheets. Let’s break down the anatomy of a CSS rule:

selector {
  property: value;
  property: value;
}

Practical Applications

CSS syntax allows for incredible flexibility in styling web content. You can control everything from basic colors and fonts to complex animations and responsive layouts.

Common Misconceptions

  1. Misconception: CSS is just about making things look pretty Reality: CSS is a powerful tool for user experience, accessibility, and functionality

  2. Misconception: Inline styles are always bad Reality: While generally avoided, inline styles have specific use cases and highest specificity

5. Live Coding Demonstration (20-25 minutes)

Example 1: Basic Inline Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline CSS Example</title>
</head>
<body>
  <h1 style="color: #2c3e50; font-family: Arial, sans-serif; text-align: center;">
    Welcome to CSS!
  </h1>
  <p style="color: #7f8c8d; font-size: 18px; line-height: 1.5; margin: 20px;">
    This paragraph is styled using inline CSS. Notice how the styles are applied directly to the HTML element.
  </p>
  <div style="background-color: #ecf0f1; padding: 15px; border: 2px solid #bdc3c7; border-radius: 5px;">
    This div has background color, padding, border, and rounded corners.
  </div>
</body>
</html>

Explanation:

  • Line 8: The h1 element uses inline styles for color, font-family, and text alignment
  • Line 11: The paragraph has custom text color, font size, line height, and margin
  • Line 14: The div demonstrates background, padding, border, and border-radius properties
  • Overall: Each element’s styling is self-contained but not reusable

Example 2: Internal Stylesheet Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f8f9fa;
    }
    
    .header {
      color: #495057;
      text-align: center;
      border-bottom: 3px solid #007bff;
      padding-bottom: 10px;
      margin-bottom: 30px;
    }
    
    .content-box {
      background-color: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    
    .highlight {
      background-color: #fff3cd;
      padding: 10px;
      border-left: 4px solid #ffc107;
      margin: 15px 0;
    }
  </style>
</head>
<body>
  <h1 class="header">Internal CSS Demonstration</h1>
  <div class="content-box">
    <h2>Advantages of Internal CSS</h2>
    <p>This content is styled using an internal stylesheet defined in the head section.</p>
    <div class="highlight">
      This highlighted box uses the same CSS class that can be reused throughout this page.
    </div>
  </div>
</body>
</html>

Key Points:

  • CSS rules are defined once and can be applied to multiple elements
  • Classes allow for reusable styling patterns
  • More organized and maintainable than inline styles

Example 3: External Stylesheet Setup

styles.css:

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #ffffff;
}

/* Layout components */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.main-content {
  padding: 40px 0;
}

.card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Typography */
h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

h2 {
  color: #495057;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <div class="container">
      <h1>External CSS Demonstration</h1>
      <p>Professional styling with external stylesheets</p>
    </div>
  </header>
  
  <main class="main-content">
    <div class="container">
      <div class="card">
        <h2>Scalable Styling</h2>
        <p>This page uses an external stylesheet that can be shared across multiple pages, ensuring consistent branding and easier maintenance.</p>
        <a href="#" class="btn">Learn More</a>
      </div>
      
      <div class="card">
        <h2>Advanced Features</h2>
        <p>External stylesheets support all CSS features including hover effects, transitions, and complex selectors.</p>
      </div>
    </div>
  </main>
</body>
</html>

Debugging Demonstration

Show common errors and how to fix them:

/* Common mistake - missing semicolon */
.incorrect {
  color: red
  font-size: 16px; /* This won't work */
}

/* Corrected version */
.correct {
  color: red;
  font-size: 16px;
}

/* Common mistake - typo in property name */
.typo {
  colour: blue; /* Should be 'color' */
}

/* Corrected version */
.fixed {
  color: blue;
}

6. Hands-On Practice (30-40 minutes)

Exercise 1: Basic CSS Implementation (15 minutes)

Objective: Create a simple HTML page and style it using all three CSS methods

Instructions:

  1. Create a new HTML file called css-practice.html
  2. Add basic HTML structure with heading, paragraphs, and a div
  3. Apply inline styles to at least one element
  4. Add internal styles in the head section
  5. Create an external CSS file and link it to your HTML

Starter Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
  <!-- Add your internal styles here -->
  <!-- Add link to external stylesheet here -->
</head>
<body>
  <h1>My First CSS Page</h1>
  <p>This paragraph needs styling.</p>
  <p class="special">This paragraph has a class.</p>
  <div id="container">
    <p>This paragraph is inside a div.</p>
  </div>
</body>
</html>

Solution:

css-practice.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
  <style>
    /* Internal CSS */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f0f0;
    }
    
    .special {
      font-weight: bold;
      color: #2c3e50;
    }
  </style>
  <link rel="stylesheet" href="practice-styles.css">
</head>
<body>
  <h1 style="color: #e74c3c; text-align: center;">My First CSS Page</h1>
  <p>This paragraph is styled by external CSS.</p>
  <p class="special">This paragraph has internal CSS styling.</p>
  <div id="container">
    <p>This paragraph is inside a div with external CSS.</p>
  </div>
</body>
</html>

practice-styles.css:

/* External CSS */
p {
  line-height: 1.6;
  margin-bottom: 15px;
}

#container {
  background-color: white;
  padding: 20px;
  border: 2px solid #3498db;
  border-radius: 5px;
  margin-top: 20px;
}

#container p {
  color: #7f8c8d;
  font-style: italic;
}

Exercise 2: CSS Method Comparison (15 minutes)

Objective: Understand the cascade and specificity by applying conflicting styles

Requirements:

  • Create a paragraph that has styles applied via all three methods
  • Observe which style takes precedence
  • Experiment with different properties and values

Challenge HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Cascade Test</title>
  <style>
    .test-paragraph {
      color: green;
      font-size: 18px;
      background-color: yellow;
    }
  </style>
  <link rel="stylesheet" href="cascade-test.css">
</head>
<body>
  <p class="test-paragraph" style="color: red; font-weight: bold;">
    This paragraph has styles from all three methods. What color is the text?
  </p>
</body>
</html>

cascade-test.css:

.test-paragraph {
  color: blue;
  font-size: 24px;
  text-decoration: underline;
}

Hints:

  • The text will be red (inline style wins)
  • Font size will be 24px (external CSS, no conflict)
  • Background will be yellow (internal CSS, no conflict)
  • Text will be bold and underlined (combining styles)

Exercise 3: Real-World Application (10 minutes)

Objective: Create a simple business card layout using appropriate CSS methods

Challenge: Build a personal or business card webpage that includes:

  • Header with name and title
  • Contact information section
  • Skills or services list
  • Professional color scheme

Extension Ideas:

  • Add a profile image placeholder
  • Include social media links
  • Make the layout centered on the page
  • Add subtle background patterns or gradients

7. Common Pitfalls and Troubleshooting (10 minutes)

Frequent Mistakes

  1. Problem: CSS not loading or appearing to have no effect Cause: Incorrect file path in the <link> tag or typos in CSS syntax Solution: Check file paths, ensure proper syntax with semicolons, and use browser developer tools to debug

  2. Problem: Inline styles not being overridden by external/internal CSS Cause: Inline styles have the highest specificity by default Solution: Use !important sparingly, or restructure to use classes and IDs instead

  3. Problem: Styles from one method conflicting with another unexpectedly Cause: Not understanding the CSS cascade and specificity rules Solution: Learn specificity hierarchy: inline > IDs > classes > elements

Debugging Tips

  • Use Browser Developer Tools: Right-click and “Inspect Element” to see applied styles
  • Validate CSS: Use online CSS validators to catch syntax errors
  • Check File Paths: Ensure external CSS files are in the correct location
  • Test Incrementally: Add styles one at a time to identify conflicts

8. Best Practices and Professional Tips (5 minutes)

Industry Standards

  • Prefer External Stylesheets: For maintainability and reusability
  • Use Meaningful Names: Choose descriptive class and ID names
  • Organize Your CSS: Group related styles and add comments
  • Minimize Inline Styles: Reserve for dynamic styling or quick testing

Next Steps in Your Learning Journey

  • Learn CSS Selectors: More ways to target specific elements
  • Understand the Box Model: How elements take up space
  • Explore Layout Methods: Flexbox and CSS Grid for modern layouts
  • Study Responsive Design: Making websites work on all devices

9. Summary and Review (5 minutes)

Key Takeaways

  1. CSS Purpose: Separates content from presentation for better maintainability
  2. Three Methods: Inline (highest specificity), internal (single page), external (reusable)
  3. CSS Syntax: selector { property: value; } - the foundation of all styling

Quick Review Questions

  1. Which CSS method would you use for a multi-page website and why?
  2. What are the three parts of a CSS rule?
  3. If you have the same property defined in inline, internal, and external CSS, which one takes precedence?

Answers:

  1. External stylesheets - for reusability and maintainability
  2. Selector, property, and value
  3. Inline styles have the highest specificity and will take precedence

For Instructors

Teaching Tips

  • Visual Demonstrations: Use browser developer tools to show real-time CSS changes
  • Encourage Experimentation: Let students break things and fix them
  • Address Common Fears: Many beginners worry about “breaking” websites
  • Connect to Real Examples: Show popular websites and discuss their CSS approaches

Assessment Ideas

  • Quick CSS Quiz: Basic syntax and method identification
  • Practical Exercise: Students style a provided HTML structure
  • Peer Review: Students examine each other’s CSS implementations

Adaptation Notes

  • For Beginners: Focus more on inline and internal styles initially
  • For Advanced Students: Introduce CSS preprocessing concepts briefly
  • Online Delivery: Use screen sharing for live coding, provide downloadable files
  • Time Management: This lesson can expand to 90 minutes with more hands-on practice