🎨 CSS3 (Cascading Style Sheets)

---

📌 1. Definition

CSS3 is the latest version of CSS used to style and design web pages. It controls the layout, colors, fonts, spacing, and responsiveness of HTML elements.

---

🧱 2. Basic Syntax

selector {
    property: value;
}

🔑 Example

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

👉 Applies blue color and font size to all <p> elements.

---

🎯 3. Types of CSS

1. Inline CSS

<p style="color:red;">Hello</p>

2. Internal CSS

<style>
p { color: red; }
</style>

3. External CSS (Most Recommended)

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

---

🧠 4. CSS Selectors (Very Important)

📌 Definition

Selectors are used to target HTML elements.

⭐ Types

• Element Selector

p { color: red; }

• Class Selector

.myclass { color: blue; }

• ID Selector

#myid { color: green; }

• Group Selector

h1, p { color: black; }

---

📦 5. Box Model (Important Concept)

👉 Every element is a box:

+----------------------+
|      Margin          |
|  +---------------+   |
|  |   Border      |   |
|  |  +---------+  |   |
|  |  | Padding |  |   |
|  |  | Content |  |   |
|  |  +---------+  |   |
|  +---------------+   |
+----------------------+

🔑 Properties

• margin → outer space
• border → edge
• padding → inner space
• content → actual data

---

🎨 6. Colors & Backgrounds

body {
    background-color: lightblue;
    color: black;
}

Background Image

body {
    background-image: url("img.jpg");
}

---

🔤 7. Fonts & Text

p {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

---

📐 8. Layout & Display

Display Property

div {
    display: block;
}

Positioning

• static
• relative
• absolute
• fixed

div {
    position: absolute;
    top: 50px;
}

---

📱 9. Responsive Design (Media Queries)

@media (max-width: 600px) {
    body {
        background-color: yellow;
    }
}

👉 Changes style for small screens (mobile).

---

🧩 10. CSS3 New Features

⭐ 1. Flexbox (Layout System)

.container {
    display: flex;
    justify-content: center;
}

---

⭐ 2. Grid Layout

.container {
    display: grid;
    grid-template-columns: auto auto;
}

---

⭐ 3. Animations

@keyframes example {
    from {background-color: red;}
    to {background-color: blue;}
}

---

⭐ 4. Transitions

div {
    transition: width 2s;
}

---

⭐ 5. Border Radius (Rounded Corners)

div {
    border-radius: 10px;
}

---

⚠️ 11. Important Rules

✔ CSS follows cascading order (priority rules) ✔ Priority: Inline > Internal > External ✔ Use classes for reuse ✔ Avoid too many inline styles ✔ Use responsive design for mobile

---

📊 12. Advantages of CSS3

• Separates design from HTML
• Improves page speed
• Responsive layouts
• Easy maintenance
• Modern animations

---

❌ 13. Limitations

• Browser compatibility issues
• Cannot perform logic
• Depends on HTML structure

---

❓ 14. Likely Exam Questions

Short Questions

1. Define CSS3.
2. What are selectors?
3. Explain box model.
4. What is Flexbox?
5. What are media queries?

Long Questions

6. Explain types of CSS with examples.
7. Describe CSS box model with diagram.
8. Discuss new features of CSS3.
9. Explain responsive design using media queries.
10. Compare Flexbox and Grid.

---

📝 15. Summary / Quick Revision

• CSS3 = Styling language

• Controls layout, colors, fonts

• Key concepts:

  • Selectors
  • Box model
  • Flexbox & Grid
  • Media queries

• Works with HTML + JavaScript

---