CSS (Cascading Style Sheets) controls the appearance and layout of an HTML document. HTML explains what the content is; CSS explains how it should look. Begin by learning the rule syntax and how a stylesheet reaches the browser, before memorising many properties.

See how it works

Understand the topic in depth

Read a rule one part at a time

.intro {
  color: #164aa5;
  font-size: 20px;
}

The selector .intro selects elements whose class list contains intro. The braces contain declarations. Each declaration has a property, a colon, a value, and normally a terminating semicolon. color controls foreground text color; font-size controls the size of its text. A selector does not create an element: the corresponding element must exist in the HTML.

CSS and HTML work together without changing each other's basic roles. You can restyle the same paragraph as a large blue introduction or a small muted description without changing it into a heading. Choose meaningful HTML first, then style it.

Three ways to attach CSS

There is no universal rule that “internal always wins external”. Both usually contain author stylesheet rules; selector specificity and source order help resolve equal-priority conflicts. Inline declarations have special precedence among normal author styles, but important declarations and other cascade stages mean inline is not an absolute winner in every situation. The Selectors lesson explains how to reason about conflicts.

Units and values

Some properties accept colors, some accept lengths, and some accept keywords. Write 20px as one value, not 20 px. A nonzero CSS length generally needs a unit, while 0 can omit one. A percentage resolves against a property-specific reference: width percentages are often related to the containing block's width, but not every percentage means the same thing.

A browser can ignore an invalid declaration and continue with the others. This makes CSS resilient, but it can hide mistakes. Inspect the element's Styles and Computed panels, check for crossed-out or invalid declarations, and check Network when an external stylesheet fails to load.

Learn through worked examples

Small snippets isolate one idea: put HTML in the body and CSS in a style element or stylesheet. Use the complete example below when you want all the runnable files together.

Example 1 — one rule styles several paragraphs

The two paragraphs share a class; the heading does not.

HTML snippet

<p class="intro">Welcome to CSS.</p>
<p class="intro">One class can be reused.</p>

CSS snippet

.intro { color: #164aa5; font-size: 20px; }

Why this happens: The same selector matches both paragraphs. Reusing a class avoids copying inline declarations onto each element.

Example 2 — foreground and background are different

Give a notice contrasting text and background colors.

HTML snippet

<p class="notice">Save your work.</p>

CSS snippet

.notice {
  color: white;
  background-color: #164aa5;
  padding: 12px;
}

Why this happens: color affects the text. background-color paints behind it. padding adds space inside the element around its content.

Run the complete example

1. Create a folder named css-practice and open it in VS Code.
2. Create every file shown below in that folder, paste its code, and save it.
3. Open index.html in your browser. Save and refresh after each change.
4. Use Inspect to compare the winning declarations and computed values with your prediction.

Complete working example

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first stylesheet</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Learning CSS at Edupoly</h1>
  <p class="intro">CSS gives this page its presentation.</p>
  <p class="notice">Save both files before refreshing.</p>
</body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 24px;
  line-height: 1.6;
}
h1 { color: #164aa5; }
.intro { font-size: 20px; }
.notice {
  background-color: #edf3ff;
  border-left: 4px solid #164aa5;
  padding: 12px;
}

Read the complete example step by step

1. link asks the browser to load styles.css from the same folder.
2. body supplies a font and readable line height to much of the text through inheritance.
3. h1 changes the heading color; .intro changes only the paragraph carrying that class.
4. .notice combines background, border, and padding into a highlighted message. Change one declaration, save, and refresh to isolate its effect.

Working browser output

The complete example runs below. Compare its appearance with the source and use any demonstration controls. For responsive examples, the iframe width is their viewport; resize the lesson column or open the example separately.

Open the complete example in a separate tab

What you should see

A blue heading, a larger introduction, and a pale blue notice with a blue left border. If the page is unstyled, verify that index.html and styles.css are in the same folder and that the link filename is exact.

Common mistakes and how to fix them

Do not write CSS declarations as HTML attributes such as color=blue on a paragraph. Use a style attribute or stylesheet. Check braces, colons, units, and filenames. Do not assume a declaration failed simply because a competing declaration won.

Practice with a clear goal

Create two HTML pages linked to the same styles.css. Change the shared heading color and confirm both pages change. Add a reusable warning class. In Inspect, identify which declaration produced its background color.

Further reading: MDN documentation for this topic. The lesson above is complete without opening this reference.