Lesson 2.3: Intro to CSS

🎯 Objectives

• Understand the purpose and structure of CSS.
• Learn how to select and style HTML elements using CSS.
• Gain hands-on experience with various CSS properties and values.

Table of Contents

1. Introduction to CSS
2. Understanding CSS Structure
3. Four Steps to Writing CSS
4. Common CSS Properties & Values

Introduction to CSS

• CSS, or Cascading Style Sheets, gives websites style.
• Using CSS, you can change properties like color, spacing, fonts, positioning, animations, and more.
• HTML provides the structure, while CSS styles the appearance.

Understanding CSS Structure

• Selector: The HTML element you want to style.
• Property: The aspect of the element you want to change (e.g., color, width).
• Value: The specific change you want to apply to the property.
• Example:

h1 {
  color: blue;
}

Four Steps to Writing CSS

1. Choose an HTML element - this is your selector.
2. Add opening and closing curly braces.
3. Inside the braces, choose a property and give it a value, separated by a colon.
4. End with a semicolon.

Common CSS Properties & Values

• Properties: There are hundreds, including color, background-color, width, text-align, font-size.
• Values: They differ depending on the property.
• Examples:
  • color: red;
  • width: 400px;
  • font-size: 20px;

By the end of this lesson, you'll have hands-on experience with the fundamental concepts of CSS, enabling you to enhance the styling of web pages.

Happy coding!