Introduction to CSS – Style Your HTML Like a Pro

on
What is CSS? Learn CSS Basics for Beginners with Examples (2025)

Introduction to CSS – Style Your HTML Like a Pro

📌 SEO Title: What is CSS? Learn CSS Basics for Beginners with Examples (2025)

📖 Aaj Ke Blog Mein Aap Seekhenge:

  • CSS kya hota hai?
  • CSS kaise kaam karta hai HTML ke sath
  • 3 Types of CSS (Inline, Internal, External)
  • CSS Syntax & Basic Properties
  • CSS ka real use portfolio project mein

🧠 1. CSS Kya Hota Hai?

CSS (Cascading Style Sheets) ek style language hai jo HTML elements ko style karne ke liye use hoti hai – jaise: colors, font size, spacing, layout, background, borders, and more!

🧾 HTML structure deta hai, CSS usse sundar design banata hai.

🔗 2. 3 Types of CSS

Type Use Case Example
Inline Direct element pe style <h1 style="color:red;">
Internal HTML file ke <style> tag mein Inside <head>
External Alag CSS file link karke style.css file

✅ Inline CSS

<p style="color: blue; font-size: 18px;">This is styled text.</p>

✅ Internal CSS

<head>
  <style>
    h1 {
      color: green;
      font-family: Arial;
    }
  </style>
</head>

✅ External CSS (Recommended for big projects)

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

Inside style.css:

h1 {
  color: orange;
  font-size: 30px;
}

🧩 3. CSS Syntax

selector {
  property: value;
}

Example:

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

🧠 4. Commonly Used CSS Properties

Property Description Example
color Text color color: red;
background Background color/image background: yellow;
font-size Size of text font-size: 20px;
margin Outside space margin: 10px;
padding Inside space padding: 20px;
border Border around element border: 1px solid black;

🎯 5. CSS in Portfolio Page (from Day 7)

Let’s apply some internal CSS to improve our Day 7 page:

<head>
  <style>
    body {
      background-color: #f9f9f9;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header, footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 15px;
    }
    nav {
      background-color: #444;
      color: white;
      padding: 10px;
      text-align: center;
    }
    nav a {
      color: white;
      margin: 0 10px;
      text-decoration: none;
    }
    section {
      padding: 20px;
    }
  </style>
</head>

🧪 Practice Task:

  • New HTML file banao ya Day 7 ka file open karo.
  • <head> mein internal CSS add karo.
  • Background color, font-size, text color change karke dekho.
  • Margin, padding, border ka experiment karo.

✅ Aaj Aapne Kya Seekha?

  • CSS kya hota hai aur uske 3 types
  • CSS syntax & important properties
  • Portfolio page mein CSS ka use
  • HTML ko stylish banane ka first step

Comments

Post a Comment