CSS Introduction

CSS stands for Cascading Style Sheets. It is the language that decides how a web page looks — the colours, the fonts, the spacing, and the layout. HTML builds the page; CSS dresses it up.

Diagram — see how it fits together

Think of a house. HTML is the walls, the rooms, and the doors — the structure. CSS is the paint on the walls, the curtains, and the furniture — the decoration. JavaScript is the electricity and the moving parts — the action. A page with only HTML works, but it looks plain: black text on a white background, everything in one column. Add CSS, and the same page becomes colourful, spaced out, and pleasant to read.

Remember it like this: HTML = ढाँचा, CSS = सजावट, JavaScript = हरकत. HTML is the skeleton, CSS is the decoration, JavaScript is the action. You already know HTML. This course teaches you CSS — the second of the three.

What CSS actually does

CSS lets you change almost everything you see on a page. You can make a heading blue, make a paragraph bigger, put space between two boxes, centre a button, or lay out a whole page in columns. You write rules — small instructions that say "this part of the page should look like that". The browser reads your rules and paints the page accordingly.

The best part: one CSS file can style an entire website. Change the colour in one place, and every page of the site changes at once. That is why real websites keep their CSS in a separate file instead of repeating it on every page.

Syntax — your first CSS rule

A CSS rule has two parts: a selector (which part of the page) and a declaration block (how it should look). The selector comes first, then curly braces { }, and inside them one or more declarations. Each declaration is a property and a value, separated by a colon and ended with a semicolon.

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

Read it like a sentence: "Every h1 heading should be blue, and its text should be 32 pixels tall." The selector h1 picks the heading. The declaration color: blue; sets its colour. The declaration font-size: 32px; sets its size.

Why CSS exists

In the early days of the web, people styled pages with HTML attributes — color, bgcolor, font — written again and again on every tag. It was messy: to change one colour you had to edit every page. CSS was invented to fix that. It pulls all the styling out of the HTML and into one place, so the HTML stays clean and the design stays in one file.

Today every professional website uses CSS. If you can write HTML and CSS together, you can build a complete, good-looking website. JavaScript comes later, for the parts that move and react.

Common mistakes

• Thinking CSS is a programming language — it is a styling language. You do not write logic in it, only rules about looks.
• Styling with HTML attributes like bgcolor or <font> — those are old and outdated. CSS replaces them completely.
• Writing the same style again on every element — write one rule, let it apply to all matching elements.
• Expecting CSS to change what a page does — clicking, saving, and calculations are JavaScript's job, not CSS.

Remember

• CSS = Cascading Style Sheets. It controls how a page looks.
• HTML = ढाँचा (skeleton), CSS = सजावट (decoration), JavaScript = हरकत (action).
• A CSS rule is a selector plus a declaration block: selector { property: value; }.
• One CSS file can style a whole website — change it once, and every page changes.

Example explained

• <style> — the CSS lives inside the <style> block in the <head>. Everything between <style> and </style> is a CSS rule, not HTML.
• body { background-color: #fff8e1; } — paints the whole page a soft cream colour, like the wall of a chai shop.
• h1 { color: #b45309; } — makes the main heading a warm brown-orange, so it stands out from the body text.
• .card { background-color: white; border: 2px solid #f59e0b; } — the menu card gets a white background and an orange border, so it looks like a card on the page.
• .price { color: green; font-weight: bold; } — the prices turn green and bold, so a visitor's eye finds them first.