Q285- What are CSS properties, and how are they applied?

What Are CSS Properties?

CSS properties define how HTML elements look and behave on a web page.

Each CSS rule is written as a property–value pair:

property: value;

Example:

color: red;
font-size: 16px;
margin: 10px;

---

🧱 CSS Rule Structure

selector {
  property: value;
}

Example:

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

✔ Applies styles to all <p> elements.

---

✅ How Are CSS Properties Applied?

CSS properties are applied using three main methods:

---

🔹 1. Inline CSS

Written directly inside HTML tags.

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

✔ Highest priority
❌ Hard to maintain

---

🔹 2. Internal CSS

Written inside a <style> tag.

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

✔ Used for small pages

---

🔹 3. External CSS (Best Practice)

Written in a .css file.

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

✔ Clean
✔ Reusable
✔ Best for large projects

---

🧠 Common Types of CSS Properties

🎨 Text & Font

color, font-size, font-family, text-align

---

📦 Box Model

margin, padding, border, width, height

---

🧭 Layout

display, position, flex, grid, float

---

🎞 Visual Effects

background, box-shadow, opacity

---

🖱 Interaction

cursor, pointer-events

---

⚡ How CSS Decides Which Property Wins?

This is called CSS specificity:

Priority order:

1. Inline CSS
2. ID selector
3. Class selector
4. Element selector
5. Source order

#title { color: red; }
.title { color: blue; }

👉 Text becomes red.

---

🎯 Short Interview Answer

CSS properties control the appearance and layout of HTML elements using property–value pairs.
They are applied through inline, internal, or external CSS, with external stylesheets being the recommended approach.
CSS specificity determines which styles are applied when multiple rules target the same element.