CSS Introduction

What CSS is and why it matters.

✍️ 3 exercises + code challenge in this lesson

Next ❯

CSS stands for Cascading Style Sheets. It describes how HTML elements are displayed: colours, fonts, spacing, layout and animation.

HTML gives a page its structure; CSS gives it its look. Because the styles live in one place, a single stylesheet can change the design of an entire website.

"Cascading" means several style rules can apply to one element. The browser decides which one wins using specificity and order, explained later in this tutorial.

Key Takeaways: CSS Introduction

Mastering CSS Introduction helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Introduction Code Example

CSS

<!DOCTYPE html>
<html>
<head>
<style>
  body { background: #071A2F; color: #E2E8F0; font-family: sans-serif; padding: 20px; }
  h1   { color: #38BDF8; }
  p    { font-size: 18px; line-height: 1.6; }
</style>
</head>
<body>
  <h1>CSS changes everything</h1>
  <p>Delete the style element and press Run to see the page without CSS.</p>
</body>
</html>

Free sign-in required · Google login available

CSS Introduction Practice Exercises

Check what you learned in “CSS Introduction”.

/ 3 solved

Fill in the blank

Make all <h1> elements blue.

h1 {
  : blue;
}

✓ Correct! Not quite. Try again.

Multiple choice

What does CSS stand for?

Cascading Style Sheets Creative Style System Computer Styled Sections Colorful Sheet Styles

✓ Correct! Not quite. Try again.

Code challenge

Make the page background light grey (#eeeeee).

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Next ❯

CSS Syntax

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Introduction

💡 Key Takeaways: CSS Introduction

CSS Introduction Code Example

CSS Introduction Practice Exercises

Key Takeaways: CSS Introduction