📘 DAY 8: HTML STYLES 

1️⃣ What are HTML Styles?

HTML Styles are used to change the appearance of HTML elements.

Styles are applied using the style attribute.

👉 HTML handles structure
👉 Styles control look & design

---

2️⃣ The style Attribute

The style attribute is used to apply inline CSS.

Syntax:

<tagname style="property:value;">

---

3️⃣ Basic Style Example

<p style="color:red;">This text is red</p>

---

4️⃣ Common Style Properties

🔹 Text Color

<p style="color:blue;">Blue Text</p>

---

🔹 Background Color

<p style="background-color:yellow;">
  Yellow Background
</p>

---

🔹 Font Size

<p style="font-size:20px;">
  Large Text
</p>

---

🔹 Font Family

<p style="font-family:Arial;">
  Arial Font
</p>

---

5️⃣ Multiple Styles in One Element

You can apply more than one style.

<p style="color:white; background-color:black; font-size:18px;">
  Styled Paragraph
</p>

👉 Separate properties using semicolon (;)

---

6️⃣ Text Alignment

<p style="text-align:center;">Center Text</p>
<p style="text-align:right;">Right Text</p>
<p style="text-align:left;">Left Text</p>

---

7️⃣ Styling Headings

<h1 style="color:green;">Green Heading</h1>
<h2 style="font-size:30px;">Large Heading</h2>

---

8️⃣ HTML Styles vs CSS

HTML Styles use inline CSS.

❌ Not Recommended for:

• Large websites

• Reusable design

• Clean code

✅ Good for:

• Learning basics

• Small examples

• Quick changes

👉 External CSS is better (later topic)

---

9️⃣ Common Color Values

HTML supports:

• Color names (red, blue)

• HEX (#ff0000)

• RGB (rgb(255,0,0))

Example:

<p style="color:#ff0000;">Red Text</p>

---

🔟 Common Beginner Mistakes

❌ Forgetting semicolon
❌ Writing wrong property names
❌ Mixing quotes incorrectly
❌ Using styles everywhere

---

1️⃣1️⃣ Practice Example

<h1 style="color:blue; text-align:center;">
  HTML Styles
</h1>

<p style="font-size:18px; font-family:Verdana;">
  This is a styled paragraph.
</p>

---

1️⃣2️⃣ Interview / Viva Questions

1. What are HTML styles?

2. What is style attribute?

3. How do you change text color?

4. Can we apply multiple styles?

5. Is inline CSS recommended?

---

1️⃣3️⃣ Summary

• HTML styles control appearance

• Applied using style attribute

• Inline styles use CSS syntax

• Good for small examples

• CSS is better for large projects