CSS Selectors, Colors, and Fonts Easy Guide

What is CSS ?

CSS ka full form hai Cascading Style Sheets. Ye HTML elements ko style dene ka kaam karta hai – jaise ki color, font, size, layout wagaira.

Chaliye ab samajhte hain CSS ke 3 important parts:

1. Selectors
2. Colors
3. Fonts

What are CSS Selectors?

Selectors bataate hain ki aap kaunse HTML element ko style karna chahte ho.

Types of Selectors

1. Universal Selector (*)

Sabhi elements pe ek saath style apply karta hai.

Example:

* {
margin: 0;
padding: 0;
}

2. Element Selector (h1, p, div etc.)

Specific tag ko style karta hai.

Example:

h1 {
color: red;
}

3. Class Selector (.class-name)

Jis element mein wo class ho, usko style karta hai.

Example:

.box {
background-color: lightblue;
}

4. ID Selector (#id-name)

Ek unique element ko style karta hai.

Example:

#header {
font-size: 24px;
}

5. Group Selector (h1, p)

Ek hi style multiple elements ko dena ho to use hota hai.

Example:

h1, p {
text-align: center;
}

6. Descendant Selector (div p)

div ke andar wale p tag ko target karta hai.

Example:

div p {
color: green;
}

CSS Colors – Make It Vibrant

CSS mein aap alag-alag tarike se color define kar sakte ho.

Color Use Karne Ke 4 Tarike

1. Color Name

Example:

h1 {
color: blue;
}

2. HEX Code

Example:

p {
color: #ff5733;       /* orange-red jaisa color */
}

3. RGB / RGBA

Example:

div {
background-color: rgb(255, 0, 0);           /* red */
}
section {
background-color: rgba(0, 255, 0, 0.5);              /* green with 50% transparency */
}

4. HSL / HSLA

Example:

body {
color: hsl(200, 100%, 50%);
}

CSS Fonts – Style Your Text

Text ka font website ki feel aur readability dono pe effect daalta hai.

Font Styling ke Important Properties:

1. Font-Family

Example:

body {
font-family: ‘Arial’, sans-serif;
}

Fallback fonts ka use karo taaki agar pehla load na ho to doosra ho jaye.

2. Font-Size

Example:

h2 {
font-size: 28px;
}

3. Font-Weight

Example:

p {
font-weight: bold; /* ya 400, 700 jaisa number bhi chalega */
}

4. Font-Style

Example:

em {
font-style: italic;
}

5. Text Transform

h1 {
text-transform: uppercase;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You have been successfully Subscribed! Ops! Something went wrong, please try again.

About Us

Techy Notes पर पाएँ आसान हिंदी में computer notes in hindi और IT company interview questions, जिससे तैयारी हो असरदार और आसान हर छात्र के लिए।

Recent news

  • All Post
  • Career Guidance
  • Interview
  • Jobs
  • Notes
  • Taja Khabar
  • Technology

© 2024 Created By Himanshu Nigam