⚙️ CSS COURSE – MODULE 14: ADVANCED CSS

📁 File: advanced.md

⚙️ Advanced CSS Techniques

📌 Introduction

Advanced CSS is about:

• precise control
• smart selectors
• better structure
• avoiding common mistakes

👉 This is what separates beginners from professionals.

🎯 1. Pseudo-Classes

Pseudo-classes define states of elements.

🖱️ Hover

button:hover {
  background: blue;
}

✔ When mouse is over element

⌨️ Focus

input:focus {
  border: 2px solid blue;
}

✔ When input is selected

📌 First Child

p:first-child {
  color: red;
}

✔ First element only

📌 Last Child

p:last-child {
  color: green;
}

🧠 2. Pseudo-Elements

Used to style parts of elements

✨ Before

h1::before {
  content: "🔥 ";
}

✨ After

h1::after {
  content: " ✔";
}

✔ Adds content without HTML

🧩 First Letter

p::first-letter {
  font-size: 30px;
}

🎯 3. Specificity (VERY IMPORTANT)

CSS priority system:

inline > id > class > element

Example:

p {
  color: blue;
}
.text {
  color: red;
}
#id {
  color: green;
}

✔ ID wins always

⚠️ 4. !important (USE CAREFULLY)

p {
  color: red !important;
}

❌ Overrides everything ⚠️ Should be avoided in real projects

🧠 5. CSS Inheritance

body {
  color: blue;
}

✔ Children inherit styles automatically

🔗 6. Combinators Review

div p {
}
div > p {
}
h1 + p {
}

✔ Control relationships between elements

🧩 Real Example

<div class="card">
  <h1>Hello CSS</h1>
  <p>Advanced styling</p>
  <input type="text" placeholder="Type here" />
</div>

.card {
  padding: 20px;
}

.card h1::before {
  content: "🚀 ";
}

.card p {
  color: gray;
}

.card input:focus {
  border: 2px solid blue;
}

⚠️ Common Mistakes

• Overusing !important ❌
• Not understanding specificity ❌
• Wrong pseudo-element usage ❌
• Overcomplicated selectors ❌

🎯 Pro Rules

✔ Keep CSS simple ✔ Avoid deep nesting ✔ Prefer classes over IDs ✔ Use pseudo-elements for UI effects

🧪 Mini Exercise

Create:

1. Button with hover effect
2. Input with focus style
3. Heading with icon using ::before
4. Paragraph with first-letter styling
5. Card using multiple pseudo-classes