SEARCH HERE

Tuesday, February 3, 2026

📘 DAY 12: HTML CSS

                 No comments:  

 

📘 DAY 12: HTML CSS 


1️⃣ What is CSS?

CSS stands for Cascading Style Sheets.

CSS is used to:

  • Style HTML elements

  • Control layout and design

  • Improve user experience

👉 HTML = structure
👉 CSS = design

2️⃣ Why Do We Need CSS?

Without CSS:

  • Pages look plain

  • No colors or layout

  • Poor readability

With CSS:
✔ Attractive design
✔ Consistent styling
✔ Easy maintenance

3️⃣ Ways to Apply CSS in HTML

There are three ways to apply CSS:

  1. Inline CSS

  2. Internal CSS

  3. External CSS

4️⃣ Inline CSS

Inline CSS is written inside the HTML element using the style attribute.

Syntax:

<tag style="property:value;">

Example:

<p style="color:red; font-size:18px;">
  Inline CSS Example
</p>

✔ Advantages

  • Quick styling

  • Easy for beginners

❌ Disadvantages

  • Not reusable

  • Messy code

  • Not recommended for large pages

5️⃣ Internal CSS

Internal CSS is written inside the <style> tag in the <head> section.

Syntax:

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
      text-align: center;
    }
    p {
      color: blue;
    }
  </style>
</head>
<body>

<h1>Internal CSS</h1>
<p>This is styled using internal CSS.</p>

</body>
</html>

✔ Advantages

  • Better than inline

  • Styles multiple elements

❌ Disadvantages

  • Not reusable across pages

6️⃣ External CSS

External CSS is written in a separate .css file and linked to HTML.

Step 1: Create CSS file (style.css)

h1 {
  color: purple;
  text-align: center;
}

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

Step 2: Link CSS file in HTML

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

✔ Advantages

✔ Reusable
✔ Clean HTML
✔ Best practice
✔ Used in real projects

❌ Disadvantages

  • Slightly complex for beginners

7️⃣ CSS Selectors (Basic)

Selectors choose which HTML elements to style.

Element Selector

p {
  color: blue;
}

Class Selector

.text {
  color: red;
}

HTML:

<p class="text">Hello</p>

ID Selector

#main {
  font-size: 24px;
}

HTML:

<h1 id="main">Title</h1>

8️⃣ Priority Order of CSS (Very Important)

If multiple CSS types are applied:

1️⃣ Inline CSS (Highest priority)
2️⃣ Internal CSS
3️⃣ External CSS (Lowest priority)

9️⃣ Comparison Table

FeatureInlineInternalExternal
LocationInside tagInside <head>Separate file
Reusable❌❌✅
Best practice❌⚠️✅
Used in real projects❌❌✅

🔟 Common Beginner Mistakes

❌ Forgetting to link CSS file
❌ Wrong file path
❌ Mixing inline everywhere
❌ Using same id multiple times

1️⃣1️⃣ Practice Example

✔ Create index.html
✔ Create style.css
✔ Apply styles to heading and paragraph

1️⃣2️⃣ Interview / Viva Questions

  1. What is CSS?

  2. Types of CSS?

  3. Difference between inline and external CSS?

  4. Which CSS has highest priority?

  5. Why is external CSS recommended?

1️⃣3️⃣ Summary

  • CSS styles HTML pages

  • Three types: inline, internal, external

  • External CSS is best practice

  • CSS selectors target elements

  • Proper CSS improves design & maintenance

0 comments:

Post a Comment

C++

AJAVA

C

E-RESOURCES

LKG, UKG Live Worksheets

Top