Introduction to CSS

In the last lessons you learned HTML. HTML builds the structure of a page. Now let’s learn CSS. CSS makes that page look nice.

🎨 What is CSS?

CSS is short for Cascading Style Sheets. It is the language we use to style a web page. So colors, sizes, spacing, fonts, layout. All of that is CSS.

Think about a new house. The walls and rooms get built first. That is your HTML. But the house is plain and grey. Then you add paint, lights, and curtains. That is your CSS.

So in simple words:

• HTML gives the page its structure. Like headings, paragraphs, and buttons.
• CSS gives the page its look. Like colors, fonts, and where things sit.

Both work together. HTML first, then CSS on top.

🤔 Why do we need CSS?

Here is the real problem. Open a page that has only HTML and no CSS. You see black text on a white background. Everything is stacked one below the other. It looks plain and boring. Nobody wants to use a site like that.

CSS fixes this. Here is what it lets you do:

• Change the color of text and backgrounds.
• Pick nicer fonts and set the text size.
• Add space around things so the page does not feel crowded.
• Place items side by side, not just top to bottom.
• Make the same page look good on a phone and on a laptop.

Now think about a site like YouTube or Instagram. The clean look, the buttons, the spacing. That is CSS doing its job.

🧩 What does CSS look like?

A piece of CSS is called a rule. A rule tells the browser “find this thing, and make it look like this”.

Let’s say you want all your paragraphs to be blue. This small rule does that.

p {
  color: blue;
}

Let’s walk through it piece by piece:

• p is the selector. It picks what to style. Here it picks every <p> paragraph.
• The { } curly braces hold the styling.
• color is the property. It is the thing you want to change.
• blue is the value. It is what you set the property to.
• The : colon sits between the property and the value. The ; semicolon ends the line.

So you read it like this. “For every paragraph, set the color to blue.”

🖥️ A more real example

One rule is small. In real life you set a few things at once. Here we style a heading. We give it a color, a background, and a bigger size.

h1 {
  color: white;
  background-color: teal;
  font-size: 40px;
}

Reading it from top to bottom:

• color: white; makes the heading text white.
• background-color: teal; paints a teal box behind the heading.
• font-size: 40px; makes the text big. Here px means pixels, which is a small unit of size on the screen.

See how you stack one line on top of another? Each line changes one thing. Together they give the heading a whole new look.

⚠️ Common Mistakes

When you start, a few small things trip people up. Watch out for these.

The first one is forgetting the semicolon. Every line inside the braces must end with ;. Miss it and the next line may not work.

/* ❌ Avoid: no semicolon */
p {
  color: red
  font-size: 18px;
}

/* ✅ Good: each line ends with ; */
p {
  color: red;
  font-size: 18px;
}

A couple more to keep in mind:

• Wrong spelling. CSS only understands exact words. So colour will not work. It must be color.
• Mixing up property and value. The property comes first, then the colon, then the value. So color: blue; is right, not blue: color;.

✅ Best Practices

A few simple habits will keep your CSS clean and easy to read.

• Put each property on its own line. It is much easier to read than one long line.
• Add a space after the colon. Write color: blue;, not color:blue;. It reads better.
• Use clear, lowercase words. CSS is mostly lowercase, so stick with that.
• Keep your styling in a separate place from your HTML. You will learn how in the next lesson.

🧩 What You’ve Learned

You just met CSS for the first time. Here is the short version.

• ✅ CSS stands for Cascading Style Sheets, and it styles your web page.
• ✅ HTML builds the structure, and CSS adds the look on top.
• ✅ A CSS rule has a selector, then a property and a value inside { }.
• ✅ Each line inside the braces ends with a semicolon ;.
• ✅ Small spelling mistakes like colour will stop your CSS from working.

🚀 What’s Next?

You know what CSS is. Now let’s see how to actually put it into your HTML page.

Adding CSS to HTML