BrounStack
Learning›CSS Tutorial›Introduction
CHAPTER 01 · BEGINNER

Introduction to CSS

HTML page ka structure banata hai, aur CSS us structure ko visually attractive banata hai. CSS se colors, spacing, fonts, layouts aur responsive design control kiye jaate hain.

English + Hinglish15 min readPractice included

What is CSS?

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

example.cssCSS
h1 {
  color: blue;
}
Hinglish Explanation

HTML me <h1> heading banati hai. CSS me hum h1 select karke uska color, size, spacing aur bahut kuch change kar sakte hain.

HTML and CSS together

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

index.htmlHTML
<h1>My Learning Website</h1>
<p>I am learning CSS.</p>
style.cssCSS
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.
Important: HTML content aur meaning ke liye hai. CSS presentation aur layout ke liye hai. Dono ko alag responsibility dena clean web development practice hai.

Anatomy of a CSS rule

rule.cssCSS
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.
Simple Formula

selector { property: value; } — pehle element select karo, phir uski property choose karo, phir value do.

Your first CSS style

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

index.htmlHTML
<!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>
style.cssCSS
body {
  background-color: #f5f8fc;
}

h1 {
  color: #0b7cff;
}

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

<link rel="stylesheet" href="style.css"> HTML file ko CSS file se connect karta hai. Ab style.css ke rules HTML elements par apply honge.

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.

cascade.cssCSS
p {
  color: blue;
}

p {
  color: red;
}

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

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.
Debugging tip: Agar CSS apply nahi ho raha, sabse pehle stylesheet path, selector spelling aur browser refresh check karo.

Practice Task

Apne HTML Learning Profile project ko CSS se basic style do.

  1. style.css file banao.
  2. HTML me external stylesheet link karo.
  3. Page ka background light color karo.
  4. h1 ka color blue karo.
  5. Paragraph ka text color aur font size change karo.
  6. At least ek aur element ko khud style karo.