Lesson 1: CSS Introduction

Learn the three ways to apply CSS to HTML

CSS Methods Demonstration

1. External CSS (Recommended)

This paragraph is styled using external CSS linked from styles_lesson1.css

<link rel="stylesheet" href="styles_lesson1.css">

2. Internal CSS

This paragraph uses internal CSS defined in the <style> tag

<style>
.internal-style {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1rem;
    border-radius: 8px;
}
</style>

3. Inline CSS

This paragraph uses inline CSS with the style attribute

<p style="color: #e74c3c; font-weight: bold;">Inline styled text</p>

🎯 Try It Yourself

Exercise: Modify CSS Properties

Right-click on any styled element and select "Inspect Element" to see the CSS. Try modifying the styles in your browser's developer tools!

Practice Box 1

Try changing my background color!

Practice Box 2

Try changing my font size!

Practice Box 3

Try adding a border to me!

📚 Key Concepts Review

CSS Syntax

selector {
    property: value;
    property: value;
}

Cascade Priority

  1. Inline styles (highest)
  2. Internal styles
  3. External styles (lowest)

Best Practices

  • Use external CSS for maintainability
  • Keep content and presentation separate
  • Use meaningful class names
  • Avoid inline styles when possible