Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to control how HTML elements look on the screen.

h1 {
  color: blue;
}

HTML and CSS together

Think of HTML as the structure of a house and CSS as its paint, spacing, furniture arrangement and visual design.

<h1>My Learning Website</h1>
<p>I am learning CSS.</p>

h1 {
  color: #0b7cff;
}

p {
  font-size: 18px;
}

The HTML content stays the same, while CSS controls its appearance.

Why do we need CSS?

• Colors aur typography control karne ke liye.
• Spacing aur alignment improve karne ke liye.
• Page layouts banane ke liye.
• Mobile, tablet aur desktop responsive design ke liye.
• Hover effects aur animations ke liye.
• Same design multiple pages par reuse karne ke liye.

Anatomy of a CSS rule

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

This CSS rule has three important ideas:

• p is the selector.
• color and font-size are properties.
• green and 18px are values.

Your first CSS style

Create two files in the same folder: index.html and style.css.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Practice</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CSS</h1>
  <p>I am styling my first page.</p>
</body>
</html>

body {
  background-color: #f5f8fc;
}

h1 {
  color: #0b7cff;
}

p {
  color: #334155;
  font-size: 18px;
}

Why is it called “Cascading”?

CSS can receive styles from multiple rules. The browser decides which style wins based on factors such as order, specificity and importance. You will learn this properly in the selectors and specificity chapter.

p {
  color: blue;
}

p {
  color: red;
}

When both rules have equal strength, the later rule usually wins, so the paragraph becomes red.

How the browser applies CSS

When a browser loads a page, it reads the HTML structure and the linked stylesheets, matches selectors against elements, resolves the cascade, and then calculates the final styles used for layout and painting. You do not need to memorize the rendering engine, but this mental model helps with debugging: first confirm the stylesheet loaded, then confirm the selector matches, then inspect which declaration wins.

This separation also makes projects easier to maintain. One stylesheet can style many headings, buttons or cards without changing the HTML content itself. If a design token or shared class changes, every matching element can update together instead of repeating visual attributes throughout the markup.

A first look at inheritance

Some CSS properties, especially text-related properties such as color and font-family, can be inherited by child elements. Other properties such as margins, borders and widths normally are not inherited. Inheritance is different from the cascade: the cascade chooses a winning declaration for an element, while inheritance can pass certain computed values from a parent when the child has no more specific value of its own.

Common beginner mistakes

• CSS file ka path galat likhna.
• Property ke baad colon : bhoolna.
• Declaration ke end me semicolon ; bhoolna.
• Curly braces { } close na karna.
• HTML file me CSS ko link na karna.
• Property ya value ki spelling wrong likhna.