CSS Introduction

What Is It?

CSS (Cascading Style Sheets) describes how HTML looks. HTML gives content meaning; CSS controls its color, spacing, and layout. Start here, then follow Next through the course. You only need basic HTML and a browser.

Properties, Tags and Attributes Explained

• p: An HTML paragraph tag; the selector p targets all paragraphs.
• color: A CSS property that sets text color.
• background-color: A CSS property that paints the element background.
• class: An HTML attribute used to group elements for styling. CSS has properties and values, rather than its own HTML tags.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Style a paragraph

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Introduction</title>
  <style>
    p { color: #1d4ed8; background-color: #eff6ff; }
  </style>
</head>
<body>
  <p>My first CSS rule!</p>
</body>
</html>

What you see: The paragraph has blue text on a pale blue background.

Example 2: Style a reusable class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Introduction</title>
  <style>
    .notice { padding: 16px; border-left: 4px solid #15803d; }
  </style>
</head>
<body>
  <p class="notice">Your changes are saved.</p>
</body>
</html>

What you see: The class adds inner space and a green left border.

When and Where to Use It

Use CSS whenever content needs a visual design: readable articles, buttons, cards, or responsive pages.

Common Mistake or Useful Tip

Follow the course in order as a beginner. If you already know CSS, jump to layout, responsive design, or the final project.

Try It Yourself

Change the first paragraph to dark green and give it a pale green background.