/int-u2l3-23-24-student-exercises

Primary LanguageHTML

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!