ReviseAlgo Logo

CSS Basics

CSS Introduction

Learn the foundational concepts of CSS, its syntax rules, and the three methods for linking stylesheets to HTML documents.

Last Updated: July 15, 2026 • 8 min read

1. Learning Objectives

In this lesson, you will learn the foundation of web styling. By the end of this topic, you will be able to:

  • Explain the role of CSS (Cascading Style Sheets) alongside HTML.
  • Write standard CSS rules using selectors, properties, and values.
  • Implement the three methods of adding CSS to HTML documents (inline, internal, and external).
  • Understand the browser rendering pipeline from CSSOM to Render Tree.

2. Overview

CSS (Cascading Style Sheets) controls the presentation, formatting, and layout of HTML documents. While HTML provides the structure of a page, CSS defines how elements look—such as colors, fonts, margins, and layouts. The browser parses CSS declarations to build the **CSS Object Model (CSSOM)** tree, combining it with the DOM to render the final visual layout.

3. Why This Topic Matters

How you organize and link styles impacts code maintainability and page performance:

  • Maintenance Overhead: Using inline styles spreads design rules across individual HTML files, making sitewide layout changes slow and error-prone.
  • Render Blocking: CSS is a render-blocking resource. Browsers will not draw pixels on the screen until the CSS is fully loaded and parsed. Linking files correctly ensures fast initial page rendering.

4. Real-World Analogy

Think of building a webpage like **constructing a house**:

  • HTML: The concrete walls, wooden pillars, and window frames (structure).
  • CSS: The wall paint, wallpaper textures, carpet options, and light fixtures (styling).
  • Linking styles:
    • Inline: Spray-painting individual boards before assembly (inflexible).
    • Internal: Storing paint samples in the basement utility room (hard to share).
    • External: Ordering matching paint sets from a standardized home supply catalog (scalable and easily reusable).

5. Core Concepts

Style Method Implementation Best Use Case
Inline CSS Declared directly on the HTML tag using the style attribute. Quick tests, or dynamic changes using JavaScript.
Internal CSS Written inside the <style> element in the HTML <head>. Single-page templates that do not share styles.
External CSS Linked using a separate .css file and the <link> element. Standard web development. Maximizes browser caching.

6. Syntax & API Reference

A CSS rule consists of a selector and a declaration block. The declaration block contains property-value pairs separated by semicolons:

Methods of Linking Styles:

  1. External Link (Recommended):
  • Internal Style Block:
  • Inline Attribute:

    • 7. Visual Diagram

    This diagram displays how the browser processes CSS inside the rendering pipeline:

    8. Live Example — Full Working Code

    A sample HTML file linking an external CSS stylesheet:

    9. Interactive Playground

    Try It Yourself Challenges:

    1. Change the inline style color value and notice if it overrides internal style block values.
    2. Remove the rel="stylesheet" attribute from the link element and observe how the page layout resets to browser defaults.

    10. Common Mistakes

    Mistake Why it happens Wrong Correct
    Missing rel attribute on Link tag Forgetting rel="stylesheet", preventing the browser from loading the CSS file. <link href="style.css"> <link rel="stylesheet" href="style.css">
    Omitting semicolons Forgetting to end declaration lines with semicolons, breaking subsequent style rules. color: red
    font-size: 12px;    		 color: red;
    font-size: 12px;

    11. Best Practices

    • Keep styles external: Store styles in external stylesheets (.css) to keep style declarations separate from HTML structure. This allows browsers to cache CSS files, improving load speeds.
    • Avoid inline styles: Do not use inline styles since they override all other CSS rules, making styling issues hard to debug.
    • Use comments for organization: Group CSS rules logically using comments (e.g. /* Header Styles */).

    12. Browser Compatibility

    Feature Chrome Firefox Safari Edge
    External stylesheet link integration Supported Supported Supported Supported

    13. Interview Questions

    🟢 Q1: What does it mean that CSS is render-blocking, and how do browsers handle it?

    Answer: Browsers cannot render pages until they build the CSSOM (CSS Object Model) tree. If the browser displayed HTML before parsing CSS, users would experience a flash of unstyled content (FOUC). Placing stylesheet link tags inside the HTML head ensures the browser loads and parses styles before rendering elements.

    14. Debugging Exercise

    Identify and fix the syntax and link bugs in this style configuration:

    View Solution

    Fixed code:

    15. Practice Exercises

    Exercise 1: Basic Site Style Setup

    Create a simple HTML page containing a title, subtitle, and paragraph. Link an external CSS file containing style declarations that set font sizes and text colors.

    16. Scenario-Based Challenge

    The Flash of Unstyled Content (FOUC) Prevention Challenge:

    Users are complaining that when they open your online store, the page displays raw, unstyled text for a split second before the layout renders. The stylesheets are currently linked at the bottom of the HTML body. Explain how moving link tags to the head tag resolves this rendering delay.

    17. Quick Quiz

    Q1: Which method of applying CSS is considered the best practice for sitewide layout styling?

    A) Inline CSS

    B) Internal CSS

    C) External CSS

    Answer: C — External CSS files promote styling reuse, clean code separation, and browser caching.

    18. Summary & Key Takeaways

    • • CSS declarations require selectors, properties, values, and trailing semicolons.
    • • External styling is preferred to keep HTML structure clean and optimize page load speeds.

    19. Cheat Sheet

    Term Usage Syntax
    rel="stylesheet" Link attribute that tells the browser the linked resource is a CSS stylesheet.