CSS Introduction

HTML gives a web page its structure: headings, paragraphs, links and images. CSS (Cascading Style Sheets) decides how that structure looks: colours, fonts, spacing, layout and even animation. In this first lesson you will answer the question “what is CSS?”, write your first CSS rules and learn the three ways to connect CSS to a page.

What is CSS?

CSS is a style language. You do not use it to add content; you use it to describe how existing HTML content should be presented. The same HTML can look completely different with a different stylesheet, which is why designers and developers keep content (HTML) and presentation (CSS) separate.

This separation has real benefits. One stylesheet can style hundreds of pages, so changing your brand colour means editing one line instead of every page. Browsers can also cache the stylesheet, so pages load faster after the first visit. If you are new to HTML, read the HTML Introduction first, because CSS always works on HTML elements.

How a CSS rule is written

A stylesheet is a list of rules. Each rule has a selector that picks the elements, followed by a declaration block in curly braces. Inside the block you write one or more declarations, each made of a property, a colon, a value and a semicolon.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first CSS rules</title>
<style>
h1 {
  color: darkgreen;
  font-family: system-ui, sans-serif;
}

p {
  color: #333;
  font-size: 18px;
  line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to Madurai Silks</h1>
<p>Handwoven sarees from Tamil Nadu, delivered across India.</p>
<p>Every paragraph on this page gets the same style from one rule.</p>
</body>
</html>

Three ways to add CSS

There are three places where CSS can live. Each has its use, but on real websites you will mostly use the first one.

1. External stylesheet: CSS is saved in its own file, for example styles.css, and linked from the <head> with <link rel="stylesheet" href="styles.css">. Every page that links the file gets the same styles. This is the standard approach.
2. Internal stylesheet: CSS is written inside a <style> element in the <head>. It only affects that one page. It is handy for demos, and every example in these lessons uses it so you can run the code in one file.
3. Inline style: CSS is written in a style attribute on a single element, such as <p style="color: red">. It affects only that element and is hard to maintain, so use it sparingly.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Internal and inline CSS together</title>
<style>
body {
  font-family: system-ui, sans-serif;
  background: #f7f4ee;
  padding: 24px;
}

.price {
  color: #b5462b;
  font-weight: bold;
}
</style>
</head>
<body>
<h2>Filter coffee powder, 500 g</h2>
<p>Price: <span class="price">₹240</span></p>
<p style="color: gray; font-style: italic;">This line uses an inline style attribute.</p>
</body>
</html>

Why it is called “cascading”

Often more than one rule targets the same element. The cascade is the set of rules the browser uses to decide which declaration wins. For now, remember three ideas:

• Order: if two rules are equally specific, the one written later wins.
• Specificity: a more precise selector beats a general one. A class selector like .note beats a plain element selector like p, whatever the order.
• Inheritance: some properties, such as color and font-family, pass down from a parent to its children. That is why setting a font on body changes the whole page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The cascade in action</title>
<style>
body {
  font-family: Georgia, serif;   /* inherited by every element */
  color: #222;
}

p {
  color: navy;
}

p {
  color: teal;   /* same selector, written later: this wins */
}

.highlight {
  color: crimson; /* class is more specific than p */
}
</style>
</head>
<body>
<p>This paragraph is teal because the later rule wins.</p>
<p class="highlight">This one is crimson because a class beats an element selector.</p>
<p>All text uses Georgia, inherited from the body.</p>
</body>
</html>

You will learn the exact specificity rules in the next lesson on CSS Selectors.

Comments in CSS

A CSS comment starts with /* and ends with */. Comments can span several lines and are ignored by the browser. Use them to label sections of a stylesheet or explain an unusual value. There is no single-line // comment in standard CSS, so do not borrow that habit from JavaScript.

How browsers read CSS

When a page loads, the browser reads the HTML, fetches every linked stylesheet and works out the final value of every property for every element. If a property is not set anywhere, the browser uses its own default, which is why an unstyled <h1> is already large and bold. Good CSS works with those defaults instead of fighting them.

Throughout this track you will build up from colours and spacing to modern layout with Flexbox and Grid, and finish with reusable design tokens using CSS variables.

Further reading

• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
• developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction
• web.dev/learn/css/the-cascade