🎨

Introduction to CSS

Beginner

50 XP

15 min

Lesson Content

What is CSS?

CSS (Cascading Style Sheets) is the language used to style and layout web pages.

Three Ways to Add CSS

1. Inline CSS

<p style='color: blue;'>Blue text</p>

2. Internal CSS

<style> p { color: blue; } </style>

3. External CSS

<link rel='stylesheet' href='styles.css'>

Example Code

Add colors and styling to HTML elements.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { color: #2563eb; text-align: center; }
    p { color: #374151; font-size: 18px; }
    .highlight { background-color: #fef3c7; padding: 10px; }
  </style>
</head>
<body>
  <h1>Welcome to CSS!</h1>
  <p>CSS makes HTML beautiful and engaging.</p>
  <p class='highlight'>This paragraph has special styling with a class!</p>
</body>
</html>

Expected Output:

Welcome to CSS!

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code