Home Courses Tutorial web dev CSS Tutorial in Hindi Hinglish – Important Topics Explained

CSS Tutorial in Hindi Hinglish – Important Topics Explained

 


Introduction

CSS aapki website ko khoobsurat banata hai. Iske bina, content structured toh hoga (HTML se), par uska look aur feel achha nahi hoga. CSS aapke HTML elements ko design karne mein help karta hai.

What is CSS?

  • Kya hai: CSS ek stylesheet language hai jo describe karti hai ki HTML elements screen par kaise display honge. Ye HTML content ko style karne ke liye use hota hai.
  • "Cascading" ka matlab: CSS mein rules ek cascade (jhaarna/pravah) mein apply hote hain. Matlab, agar ek element par multiple rules apply ho rahe hain, toh CSS specific rules ko preference deta hai. Iska ek order hota hai (specificity, order of appearance, etc.), jo hum aage dekhenge.
  • Kyon zaroori:
    • Visual Appeal: Aapki website ko attractive banata hai.
    • User Experience (UX): Behtar readability aur navigation.
    • Separation of Concerns: Content (HTML) aur presentation (CSS) ko alag rakhta hai, jisse code clean aur manage karna aasan ho jaata hai.
    • Responsiveness: Website ko alag-alag devices (mobile, tablet, desktop) par achha dikhne mein madad karta hai.

How Does CSS Work?

CSS browser ko batata hai ki HTML elements ko kaise render karna hai. Jab browser HTML file ko load karta hai, toh woh linked CSS files ko bhi load karta hai. Phir woh CSS rules ko HTML elements par apply karta hai, jaise paint aur decoration.

CSS Integration Methods

CSS ko HTML mein teen tareeko se include kiya ja sakta hai:

  1. External CSS (Best Practice)
    • Kya hai: CSS rules ko ek alag .css file mein likha jaata hai aur phir HTML file se link kiya jaata hai.
    • Kyon use karein: Sabse recommended tareeka hai. Ek CSS file se multiple HTML pages ko style kar sakte hain. Code reusability aur maintainability badhti hai.
    • HTML mein kaise link karein: <head> section mein <link> tag use karein.
    • Example (index.html):

HTML

<!DOCTYPE html>

<html>

<head>

    <title>My Styled Page</title>

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

<body>

    <h1>Hello CSS!</h1>

    <p>This text will be styled by external CSS.</p>

</body>

</html>

    • Example (styles.css file):

CSS

/* styles.css file */

body {

    font-family: Arial, sans-serif;

    background-color: lightblue;

}

h1 {

    color: navy;

}

  1. Internal CSS (Embedded CSS)
    • Kya hai: CSS rules ko HTML file ke <head> section mein <style> tags ke andar likha jaata hai.
    • Kyon use karein: Jab aapko sirf ek single HTML page ko style karna ho aur CSS code bahut kam ho.
    • Example:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Internal CSS Page</title>

    <style>

        /* CSS rules here */

        p {

            color: green;

            font-size: 18px;

        }

    </style>

</head>

<body>

    <p>This text has internal CSS styling.</p>

</body>

</html>

  1. Inline CSS
    • Kya hai: CSS rules ko HTML element ke start tag mein style attribute ke andar likha jaata hai.
    • Kyon use karein: Jab aapko sirf ek specific element par unique style apply karna ho. Generally avoid karna chahiye, kyunki ye code ko messy banata hai aur reusability kam karta hai.
    • Example:

HTML

<p style="color: purple; text-align: center;">This text has inline CSS.</p>

CSS Syntax

CSS rules selectors aur declaration blocks se bante hain:

  • Selector: Batata hai ki kis HTML element ko style karna hai (e.g., p for paragraphs, #myId for an element with id="myId", .myClass for elements with class="myClass").
  • Declaration Block: Curl braces {} ke andar hota hai. Ismein ek ya zyada declarations hoti hain.
  • Declaration: Ek property-value pair hoti hai (e.g., color: blue;).
    • Property: Kya style karna hai (e.g., color, font-size, background-color).
    • Value: Us property ki value (e.g., blue, 16px, red).
    • Har declaration semicolon ; se end hota hai.

CSS

selector {

  property: value;

  property2: value2;

}

Example:

CSS

p {               /* 'p' is the selector */

  color: blue;    /* 'color' is property, 'blue' is value */

  font-size: 16px; /* 'font-size' is property, '16px' is value */

}

Important CSS Selectors

Selectors CSS ki jaan hain. Ye batate hain ki aapke rules kis HTML element par apply honge.

  1. Element Selector
    • Kya hai: HTML element ke naam se select karta hai (e.g., h1, p, div).
    • Example: h1 { color: red; } (saare <h1> tags red ho jayenge)
  2. ID Selector
    • Kya hai: HTML element ki id attribute se select karta hai. id unique honi chahiye. # sign se shuru hota hai.
    • Example: #myHeading { font-size: 30px; } (id="myHeading" wale element ka font size 30px hoga)
  3. Class Selector
    • Kya hai: HTML element ki class attribute se select karta hai. Ek class multiple elements par apply ho sakti hai. . (dot) sign se shuru hota hai.
    • Example: .highlight { background-color: yellow; } (class="highlight" wale saare elements yellow background ke ho jayenge)
  4. Universal Selector
    • Kya hai: * sign se sabhi HTML elements ko select karta hai.
    • Example: * { margin: 0; padding: 0; } (sabhi elements ka default margin aur padding hata deta hai - common reset hai)
  5. Combinator Selectors
    • Descendant Selector (Space): Ek element ke andar ke kisi doosre element ko select karta hai.
      • Example: div p { border: 1px solid black; } (<div> ke andar wale saare <p> tags ko border dega)
    • Child Selector (>): Direct child elements ko select karta hai.
      • Example: ul > li { list-style-type: none; } (<ul> ke direct child <li> elements ka list style remove karega)
    • Adjacent Sibling Selector (+): Ek element ke just baad wale sibling element ko select karta hai.
      • Example: h2 + p { margin-top: 20px; } (<h2> ke immediately baad wale <p> ko top margin dega)
    • General Sibling Selector (~): Ek element ke baad wale saare sibling elements ko select karta hai.
      • Example: h2 ~ p { color: gray; } (<h2> ke baad wale saare <p> elements ko gray color dega)
  6. Pseudo-class Selectors
    • Kya hai: Elements ko unki special states (jaise hover, active, visited) ya position (first-child, last-child) ke hisaab se style karta hai. : (colon) se shuru hote hain.
    • Examples:
      • :hover: Jab mouse element par ho. a:hover { color: orange; }
      • :active: Jab element click ho raha ho.
      • :focus: Jab form element par focus ho. input:focus { border-color: blue; }
      • :nth-child(n): Parents ke children mein se nth child.
      • :first-child, :last-child: Parent ke pehle ya aakhri child ko select karta hai.

Important CSS Properties (Basics)

Ye kuch most common aur important CSS properties hain jo aapko pata honi chahiye:

  1. Text Styling Properties:
    • color: Text ka color. color: blue;
    • font-family: Font ka type. font-family: 'Open Sans', sans-serif;
    • font-size: Text ka size. font-size: 16px;
    • font-weight: Text ka boldness. font-weight: bold; or font-weight: 700;
    • text-align: Text ka horizontal alignment. text-align: center;
    • text-decoration: Text ke neeche line (underline), etc. text-decoration: none;
    • line-height: Lines ke beech ki height. line-height: 1.5;
  2. Box Model Properties: Har HTML element ek rectangular box hota hai. Box Model CSS ka ek fundamental concept hai.
    • width / height: Element ki width aur height. width: 100px;
    • padding: Content aur border ke beech ka space. padding: 10px; (all sides), padding-top: 5px;
    • border: Element ke charo taraf border. border: 1px solid black;
    • margin: Border aur doosre elements ke beech ka space. margin: 20px; (all sides), margin-bottom: 15px;
  3. +---------------------------------+
  4. |              Margin                     |
  5. |  +---------------------------+    |
  6. |  |          Border                 |     |
  7. |  |  +---------------------+    |     |
  8. |  |  |       Padding          |     |     |
  9. |  |  |  +---------------+    |     |     |
  10. |  |  |  |    Content      |    |     |     |
  11. |  |  |  +---------------+    |     |    |
  12. |  |  +---------------------+    |     |
  13. |  +---------------------------+    |
  14. +---------------------------------+
  15. Background Properties:
    • background-color: Element ka background color. background-color: #f0f0f0;
    • background-image: Background mein image. background-image: url('bg.png');
    • background-repeat: Image repeat hogi ya nahi. background-repeat: no-repeat;
  16. Display Property (Very Important!)
    • display: Element ki rendering behaviour control karta hai.
      • display: block;: Element poori width leta hai, naye line se shuru hota hai (e.g., div, p).
      • display: inline;: Element sirf content ki width leta hai, naye line se shuru nahi hota (e.g., span, a, img).
      • display: inline-block;: Inline element ki tarah baaki content ke saath line mein rehta hai, par width/height aur vertical margin/padding apply kar sakte hain.
      • display: flex;: Flexbox layout ke liye container banata hai (aage dekhenge).
      • display: grid;: Grid layout ke liye container banata hai (aage dekhenge).
      • display: none;: Element ko hide kar deta hai (space bhi occupy nahi karta).
  17. Positioning Properties: Elements ki exact position control karne ke liye.
    • position: Relative, absolute, fixed, static, sticky.
      • position: relative;: Normal position se relative position karta hai. top, left, right, bottom properties iske saath kaam karti hain.
      • position: absolute;: Nearest positioned ancestor ke relative position karta hai.
      • position: fixed;: Viewport ke relative position karta hai (screen scroll karne par bhi fixed rehta hai). top: 0; left: 0;
    • top, right, bottom, left: Positioned elements ki offset values.
  18. Layout Properties (Modern CSS)
    • Flexbox (display: flex;): One-dimensional (row ya column) layout ke liye best. Items ko align aur distribute karna aasan banata hai. Ye seekhna bahut zaroori hai!
      • justify-content: Main axis par items ko distribute karta hai.
      • align-items: Cross axis par items ko align karta hai.
      • flex-direction: Items ki direction (row ya column).
    • CSS Grid (display: grid;): Two-dimensional (rows aur columns dono) layout ke liye best. Complex page layouts ke liye powerful. Ye bhi important hai!
      • grid-template-columns: Columns define karta hai.
      • grid-template-rows: Rows define karta hai.
      • gap: Rows aur columns ke beech ka space.
  19. Z-index: Positioned elements ki stacking order control karta hai. Higher z-index value wala element doosre elements ke upar dikhta hai.

CSS Comments

CSS mein comments /* se shuru hote hain aur */ par khatam hote hain. Browser inhein ignore karta hai.

  • Example:

CSS

/* This is a single-line comment */

p {

  color: blue; /* Ye paragraph ka color hai */

}

/*

This is a multi-line comment.

It can span across several lines.

*/

Responsive Web Design (CSS ka Main Role)

Responsive design ka matlab hai ki aapki website alag-alag screen sizes (mobile, tablet, desktop) par achhe se adjust ho. HTML mein <meta name="viewport"> tag toh zaroori hai, par iska main kaam CSS Media Queries se hota hai.

  • Media Queries: CSS rules ka set hain jo specific conditions (jaise screen width) ke meet hone par hi apply hote hain.
    • Example:

CSS

/* Default styles for all screen sizes */

body {

    font-size: 16px;

}

 

/* Styles for screens smaller than 768px (e.g., mobile) */

@media screen and (max-width: 768px) {

    body {

        font-size: 14px;

    }

    .container {

        flex-direction: column; /* Flex items ko column mein kar do */

    }

}

 

/* Styles for screens larger than 1200px (e.g., large desktop) */

@media screen and (min-width: 1200px) {

    body {

        font-size: 18px;

    }

}

    • Kyon zaroori: Aajkal mobile-first approach bahut common hai, jahan aap pehle mobile ke liye design karte hain aur phir bade screens ke liye adjust karte hain.

Important CSS Concepts To Master

  • Box Model: Padding, border, margin, content width/height.
  • Specificity: Kaun sa CSS rule apply hoga jab multiple rules ek hi element ko target karein. (ID > Class > Element > Universal > Inline)
  • Inheritance: Kuch CSS properties automatically parent element se child elements mein inherit ho jaati hain (e.g., font-family, color).
  • Positioning: position property ke different values aur unka use.
  • Flexbox: Modern layout banane ke liye ek powerful tool.
  • CSS Grid: Complex 2D layouts banane ke liye ek aur powerful tool.
  • Units: px, em, rem, %, vw, vh - in units ka matlab aur kab kaun sa use karna chahiye.
  • Pseudo-classes: Element ki states ko style karna (:hover, :focus).

CSS bahut vast hai, par agar aap in concepts ko strong kar lete hain, toh aap kisi bhi web app ke UI ko effectively design kar payenge. Aage jaakar aap CSS frameworks (jaise Tailwind CSS, Bootstrap) bhi explore kar sakte hain, jo pre-built CSS classes provide karte hain aur development ko tez banate hain.


Tags :

No comments:

Please comment under the community guideline.

Subscribe to: Post Comments ( Atom )
Powered by Blogger.