Introduction to CSS

Introduction

You have already learned HTML and understand how webpages are structured using headings, paragraphs, links, images, lists, tables, forms, and semantic elements.

HTML gives a webpage its structure and content, but HTML alone does not provide complete control over the visual appearance of the page.

A webpage also needs colors, fonts, spacing, borders, backgrounds, layouts, animations, responsive behavior, and many other visual features.

CSS provides the tools required to control these visual aspects of a webpage.

CSS allows developers to transform plain HTML documents into attractive, organized, responsive, and interactive user interfaces.

What is CSS?

CSS stands for Cascading Style Sheets.

CSS is a stylesheet language used to describe the visual presentation of documents written in markup languages such as HTML.

It tells the browser how HTML elements should look and how they should be arranged on the screen.

h1 {
    color: blue;
}

This CSS rule tells the browser to display <h1> headings in blue.

Why Do We Need CSS?

HTML was designed primarily to describe the structure and meaning of webpage content.

Although browsers provide default styles for HTML elements, those default styles are not enough for creating complete modern website designs.

Without CSS, developers would have very limited control over colors, spacing, typography, layouts, responsive behavior, and visual effects.

Real-World Analogy

Imagine building a house.

The walls, rooms, doors, windows, and roof create the structure of the house.

After the structure is complete, the house still needs paint, flooring, furniture, lighting, decoration, and arrangement.

HTML is similar to the structure of the house, while CSS is similar to its visual design and decoration.

House                         Webpage
─────                         ───────

Structure                     HTML

Paint                         Colors

Room Size                     Width & Height

Space Around Furniture        Margin

Space Inside Furniture        Padding

Furniture Arrangement         Layout

Decoration                    Effects & Animation

HTML vs CSS

HTML and CSS have different responsibilities, but they work together to create complete webpages.

<h1>
    Welcome to PrograMinds
</h1>

<p>
    Learn web development step by step.
</p>

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
    font-size: 18px;
}

What Can CSS Do?

CSS can control almost every visual aspect of a webpage.

CSS Example

The following example demonstrates how a small amount of CSS can completely change the appearance of HTML content.

<div class="card">

    <h2>
        Learn CSS
    </h2>

    <p>
        Build beautiful and responsive websites.
    </p>

    <button>
        Start Learning
    </button>

</div>

.card {
    width: 300px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card h2 {
    color: #6c5ce7;
    font-size: 28px;
}

.card p {
    color: #636e72;
    line-height: 1.6;
}

.card button {
    padding: 10px 18px;
    background: #6c5ce7;
    color: white;
    border: none;
    border-radius: 6px;
}

How HTML and CSS Work Together

The browser processes HTML and CSS together to create the final webpage.

HTML provides the elements, while CSS finds those elements and applies visual rules to them.

<h1>
    Welcome
</h1>

h1 {
    color: purple;
    text-align: center;
}

Brief History of CSS

In the early days of the web, HTML was used for both document structure and many presentation-related tasks.

Developers often used HTML attributes and presentational elements to control colors, fonts, alignment, and layout.

As websites became larger and more complex, mixing structure and presentation became difficult to maintain.

CSS was created to separate presentation rules from document structure.

CSS Versions

CSS has evolved significantly since its introduction.

Early CSS development was commonly described using levels such as CSS1 and CSS2.

Modern CSS is not developed as one single CSS4 specification.

Instead, CSS is divided into modules that evolve independently.

Browser Rendering Flow

When a browser loads a webpage, it processes HTML and CSS before displaying the final result.

HTML
  │
  ▼
DOM Tree
  │
  │
  ├──────────────┐
  │              │
  │             CSS
  │              │
  │              ▼
  │           CSSOM
  │              │
  └──────┬───────┘
         │
         ▼
    Render Tree
         │
         ▼
       Layout
         │
         ▼
        Paint
         │
         ▼
  Display Webpage

Real-World Applications

CSS is used in almost every modern website and web application.

Advantages of CSS

CSS provides major benefits for both website appearance and development workflow.

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

CSS stands for Cascading Style Sheets and is the language used to control the visual presentation of webpages.

HTML creates the structure and meaning of a webpage, while CSS controls colors, fonts, spacing, dimensions, backgrounds, borders, layouts, and visual effects.

Without custom CSS, browsers display HTML using their built-in default styles.

CSS gives developers much greater control over how content appears across different devices and screen sizes.

A major purpose of CSS is to separate document structure from visual presentation.

This separation makes styles easier to reuse, websites easier to maintain, and designs more consistent.

CSS can create simple visual changes such as text colors, but it can also build complete responsive layouts using modern systems such as Flexbox and Grid.

It can also create transforms, smooth transitions, keyframe animations, and responsive behavior using media queries.

When a browser loads a webpage, it processes the HTML structure and CSS rules together before calculating layout and painting the final page.

CSS has evolved from early stylesheet levels into a large collection of independently developed modules.

Modern CSS is one of the core technologies of the web and is used in almost every website and web application.

In the next lesson, you will learn exactly how CSS works, how styles are connected to HTML, and how browsers apply CSS rules to webpage elements.