Day 1: Introduction & Basic Syntax

Goal

Understand what CSS is and how to apply it to style HTML elements.

Topics

What is CSS (Cascading Style Sheets)
Ways to add CSS: Inline, Internal (<style>), External (.css)
Selectors: element, class, id

CSS Syntax

CSS rules consist of a selector and a declaration block:

selector {
  property: value;
  property: value;
}

Examples

Element selector:

p {
  color: blue;
  font-size: 16px;
}

ID selector:

#main-title {
  color: red;
}

Class selector:

.button {
  background-color: green;
}

Ways to Apply CSS

Inline CSS: directly in the element <p style="color: blue;">
Internal CSS: inside <style> tags in <head>
External CSS: link a separate .css file using <link rel="stylesheet" href="style.css">

Practice

Try the following:

Style headings and paragraphs with different colors and fonts.
Add a class to a button and change its background color.

Example HTML with CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Practice</title>
  <style>
    h1 {
      color: darkblue;
      font-family: Arial, sans-serif;
    }

    p {
      color: gray;
      font-size: 14px;
      font-family: 'Times New Roman', serif;
    }

    .button {
      background-color: green;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1 id="main-title">Welcome to CSS</h1>
  <p>This is a paragraph styled with CSS.</p>
  <button class="button">Click Me</button>

</body>
</html>