CSS Introduction

Learn what CSS does and how it styles HTML pages.

When you first start building websites, you quickly discover that HTML alone creates only the structure of a webpage. While HTML can display text, images, and links, the page often looks plain and unstyled. This is where CSS comes in.

CSS stands for Cascading Style Sheets. It is a stylesheet language used to control how HTML elements appear on a webpage. CSS allows you to add colors, fonts, spacing, layouts, animations, and many other visual effects that make websites attractive and user-friendly.

Today, almost every website on the internet uses CSS to create a professional and engaging design.

Why Do We Need CSS?

Imagine building a house.

HTML creates the walls, doors, and windows.
CSS paints the walls, arranges the furniture, and decorates the rooms.

Without CSS, websites would look like plain documents with little visual appeal.

CSS helps developers:

Improve the appearance of web pages
Create consistent designs across multiple pages
Make websites responsive for different devices
Improve readability and user experience
Separate design from content

For example, an online shopping website uses CSS to style product cards, buttons, menus, and promotional banners. Without CSS, all the products would appear as simple text and images with no organization.

How CSS Works

CSS works by selecting HTML elements and applying styles to them.

A CSS rule consists of three parts:

CSS

h1 {
  color: blue;
}

In this example:

h1 is the selector
color is the property
blue is the value

This rule tells the browser to display all h1 headings in blue.

A Simple Example

HTML

<h1>Welcome</h1>
<p>This is my first webpage.</p>

CSS

h1 {
  color: green;
}

p {
  font-size: 18px;
}

When the browser loads the page:

The heading appears in green.
The paragraph text becomes larger.

This simple styling immediately improves the page's appearance.

Types of CSS

There are three main ways to add CSS to a webpage.

Inline CSS

Inline CSS is written directly inside an HTML element.

HTML

<h1 style="color:red;">Hello World</h1>

This method is useful for quick testing but is not recommended for larger websites because it becomes difficult to manage.

Internal CSS

Internal CSS is written inside a style tag within the HTML document.

HTML

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

This approach works well for styling a single page.

External CSS

External CSS is stored in a separate file and linked to the HTML document.

HTML

<link rel="stylesheet" href="style.css">

This is the most common and professional method because one CSS file can be used across multiple pages.

Understanding the Word Cascading

The word cascading refers to how CSS determines which style should be applied when multiple styles target the same element.

For example, if one rule makes a heading blue and another rule makes it red, CSS follows a set of priority rules to decide which style should be displayed.

As you learn more advanced CSS, understanding the cascading behavior becomes very important.

Benefits of Using CSS

CSS provides many advantages for web development:

Creates attractive and professional designs
Improves website readability
Reduces repetitive code
Makes websites easier to maintain
Supports responsive design for mobile devices
Allows easy customization and updates

Because of these benefits, CSS has become an essential technology for modern web development.

Key Takeaways

Introduction is an important topic to understand.
Start with small examples and practice one step at a time.
Use the idea in simple projects so it becomes easier to remember.