CSS Syntax Structure

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. The syntax of CSS is relatively straightforward and consists of the following components:

1. Selector: Yeh wo HTML element hai jise aap style karna chahte hain. Ye koi bhi tag ho sakta hai jaise <h1>, <p>, <div>, wagaira, ya phir aapne kisi element ko jo class ya ID assign ki ho.

2. Declaration Block: Yeh curly braces {} ke andar hota hai aur isme ek ya zyada declarations hote hain jo semicolons ; se separate hote hain.

3. Declaration: Har declaration ek property aur value ka combination hota hai, jo colon : se separate hote hain. Property wo style attribute hai jise aap change karna chahte hain, aur value us attribute ka setting hai.

CSS Syntax Structure

Yeh hai basic syntax:

css

selector {
    property: value;
    property: value;
    /* more properties */
}

For example, agar aap sabhi <p> elements ko red text aur 14 pixels ka font size dena chahte hain, toh aap likhenge:

css

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

Is example mein:

• p selector hai.

• color aur font-size properties hain.

• red aur 14px values hain.

CSS mein aur bhi complex selectors hote hain, jaise:

• Class selectors: Inhe dot (.) se prefix kiya jata hai, jaise .className

• ID selectors: Inhe hash (#) se prefix kiya jata hai, jaise #idName

• Attribute selectors: Elements ko unke attributes aur values ke hisab se select karte hain, jaise [type="text"]

• Pseudo-classes: Elements ki kisi special state ko define karte hain, jaise :hover, :focus

• Pseudo-elements: Elements ke specific parts ko style karte hain, jaise ::before, ::after

Yeh hai ek example class selector ka:

css

.highlight {
    background-color: yellow;
    font-weight: bold;
}

Aur yeh hai ek example ID selector ka:

css

#header {
    background-color: black;
    color: white;
}

CSS rules ko combine aur nest kiya ja sakta hai, aur isme comments bhi include kiye ja sakte hain, jo browser ignore karta hai. CSS mein comments /* aur */ ke beech mein likhe jate hain, jaise:

css

/* This is a comment in CSS */
p {
    /* This is another comment */
    color: blue;
}

Yaad rakhein ki CSS case-insensitive hota hai, lekin HTML ke class aur id attributes ke values case-sensitive hote hain. Lekin, acchi practice hai ki aap casing mein consistent rahein, khaaskar jab team ke saath kaam kar rahe ho ya bade stylesheets maintain kar rahe ho.