CSS Introduction

HTML gives a page its structure, but on its own it looks plain: black text, blue links and everything stacked down the left side. CSS is the language that turns that plain page into a real design, with colours, fonts, spacing and layouts that work on a phone and a laptop.

In this lesson you will learn what CSS is, how the browser connects CSS to your HTML, and you will style your first page.

What is CSS?

CSS stands for Cascading Style Sheets. A style sheet is a list of rules that describe how elements should look. Each rule picks some elements and sets values for their properties, such as colour, size or spacing.

h1 {
  color: darkgreen;
  font-size: 2rem;
}

This rule says: find every <h1> element and make its text dark green and twice the normal text size. The part before the curly braces (h1) is the selector. Each line inside the braces is a declaration: a property name, a colon, a value and a semicolon. You will learn the full grammar in CSS Syntax & Adding CSS.

The word cascading describes what happens when two rules disagree. If one rule says headings are green and another says they are red, CSS has a clear set of steps to decide the winner. You will study those steps in Cascade, Specificity & Inheritance.

Why keep style separate from HTML?

You could, in theory, put styling instructions inside every HTML tag. Very old websites did exactly that. Keeping style in CSS instead has real benefits:

• One change, many pages. A college website with 200 pages can link to one style sheet. Change the brand colour once and every page updates.
• Cleaner HTML. The HTML describes content (a heading, a list, a form) and stays easy to read.
• Different screens. The same HTML can get one layout on a phone and a different layout on a wide monitor.
• Accessibility. Users can zoom, switch to dark mode or apply their own styles without the content breaking.

Your first styled page

Here is a complete page with a <style> element in the <head>. Run it, then try changing the colours and sizes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Meera's Tea Stall</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #fdf6ec;
      color: #3b2a1a;
      padding: 1.5rem;
    }
    h1 {
      color: #b4441b;
    }
    p {
      font-size: 1.125rem;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Meera's Tea Stall, Kochi</h1>
  <p>Fresh masala chai and ginger tea, served from 6 am every day near the ferry jetty.</p>
</body>
</html>

Three rules style three kinds of element. The body rule sets a font, a warm background colour, a text colour and some space around the edges. The h1 rule changes only the heading colour. The p rule makes paragraphs a little larger and spaces the lines out so they are easier to read.

Notice that the paragraph is brown even though the p rule never set a colour. The colour was set on body, and the paragraph inherited it. Many text properties pass down from parent to child like this, which saves you from repeating yourself.

How the browser applies CSS

When a page loads, the browser does roughly this:

1. It reads the HTML and builds the DOM, the tree of elements.
2. It reads all the CSS: its own built-in styles, then your style sheets.
3. For every element, it finds the rules whose selectors match and works out one final value for each property.
4. It calculates the size and position of every box. This step is called layout.
5. It paints the pixels on the screen.

Step 2 explains something that surprises beginners: a page with no CSS at all still has some styling. Headings are bold and large, links are blue and underlined, and the body has a small margin. These come from the browser's default style sheet. Your CSS sits on top of it and overrides what you want to change.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default styles</title>
  <style>
    a {
      color: #6a1b9a;
      text-decoration: none;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Admission notice</h2>
  <p>Forms for the B.Sc. course in Lucknow are now open. <a href="#">Read the full notice</a>.</p>
</body>
</html>

The heading and paragraph still use the browser's defaults. Only the link has been restyled: purple, bold and without the underline.

Modern CSS

CSS keeps growing. There is no single "CSS4"; instead, separate parts of the language (colours, layout, selectors and so on) improve on their own timelines. Features that work in all major browsers are called Baseline features, and that is what this tutorial teaches.

Today's CSS can do things that once needed JavaScript or image editing tools:

Common mistakes

• Forgetting the semicolon. color: red font-size: 2rem; breaks both declarations. End every declaration with ;.
• Expecting CSS to change content. CSS changes how things look, not what the page says. To change the text itself, edit the HTML (or use JavaScript).
• Styling before structuring. Write meaningful HTML first. Good structure makes CSS much easier to write.

Key points

• CSS (Cascading Style Sheets) describes how HTML elements look and are laid out.
• A rule has a selector and a block of declarations, each written as property: value;.
• The browser combines its default styles with yours and works out one value per property for each element.
• Some properties, such as color and font-family, are inherited by child elements.
• Modern CSS handles layout, theming and motion that once needed JavaScript or images.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pune Cricket Club</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #eef7ee;
      color: #1f2d1f;
      padding: 1.5rem;
    }
    h1 {
      color: #1b5e20;
    }
    p {
      font-size: 1.25rem;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Pune Cricket Club</h1>
  <p>New members are welcome. Bring your own bat, we provide the balls.</p>
  <p>Practice: Tuesday and Friday, 6 am to 8 am.</p>
</body>
</html>