1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the look and feel of web pages. It allows you to apply colors, layouts, fonts, spacing, responsiveness, and animations without touching the HTML structure.

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

2. Why Use CSS?

• ✅ Clean and maintainable code
• ✅ Consistent styling across multiple pages
• ✅ Responsive and mobile-friendly design
• ✅ Reusable styles for scalability

3. Types of CSS

There are three main ways to apply CSS:

1. Inline CSS – applied directly inside the tag
2. Internal CSS – written inside a <style> tag
3. External CSS – linked as a separate file

h1 {
  color: red;
}

4. CSS Syntax

A CSS rule has two parts: selector and declaration.

p {
  color: black;
  font-size: 18px;
}

5. CSS Selectors

p { color: red; }
#title { font-size: 25px; }
.highlight { background: yellow; }
h1, h2 { color: blue; }
* { margin: 0; padding: 0; }

6. CSS Colors & Units

h1 {
  color: red;        /* name */
  color: #ff0000;    /* hex */
  color: rgb(255,0,0); /* rgb */
}

p {
  font-size: 20px;   /* px */
  font-size: 120%;   /* relative */
}

7. CSS Box Model

Every HTML element is a box with content, padding, border, and margin.

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
  background: lightblue;
}

8. CSS in Real Projects

CSS is widely used in:

• Responsive web design with media queries
• UI frameworks like Bootstrap
• Next.js projects using CSS Modules or global styles