CSS Property वह नियम (rule) होता है जिसके द्वारा हम HTML elements की design, style और appearance को बदलते हैं।

Syntax :

selector {
    property: value;
}

CSS Properties के मुख्य प्रकार

1. Color Properties

1. color

Color Properties का उपयोग Text का रंग बदलने के लिए किया जाता है।

Syntax :

h1 {
    color: blue;
}

2. background-color

Background-color का उपयोग Element का background color बदलने के लिए किया जाता है।

Syntax :

div {
    background-color: yellow;
}

CSS Color System :

Color System	Full Form	Syntax	Example	Description
Color Name	Predefined Color Names	color: red;	color: blue;	CSS में दिए गए पहले से बने color names का उपयोग
HEX	Hexadecimal Color System	#RRGGBB	#ff0000	Red, Green, Blue की hexadecimal value से color बनता है
RGB	Red Green Blue	rgb(R,G,B)	rgb(255,0,0)	Red, Green और Blue की value (0-255) से color बनता है
RGBA	Red Green Blue Alpha	rgba(R,G,B,A)	rgba(255,0,0,0.5)	RGB के साथ transparency (Alpha) जोड़ता है
HSL	Hue Saturation Lightness	hsl(H,S,L)	hsl(0,100%,50%)	Hue, Saturation और Lightness के आधार पर color बनाता है
HSLA	Hue Saturation Lightness Alpha	hsla(H,S,L,A)	hsla(120,100%,50%,0.5)	HSL के साथ transparency जोड़ता है
Transparent	Transparent Color	transparent	background: transparent;	Element को पूरी तरह transparent बनाता है
CurrentColor	Current Text Color	currentColor	border: 2px solid currentColor;	Element के current color को reuse करता है

Units in CSS

1. Absolute Units (Fixed Units)

इनकी value हमेशा निश्चित रहती है। Screen size बदलने पर इनका आकार नहीं बदलता।

Unit	Full Form	उपयोग
px	Pixel	सबसे ज्यादा उपयोग होने वाली unit
cm	Centimeter	प्रिंट डिजाइन में
mm	Millimeter	प्रिंट में
in	Inch	प्रिंट में
pt	Point	Typography में
pc	Pica	Printing में

2. Relative Units (Dynamic Units)

ये units किसी दूसरे element या screen size के अनुसार बदलती हैं।

Unit	किस पर आधारित है
%	Parent element
em	Parent font-size
rem	Root element font-size
vw	Viewport width
vh	Viewport height
vmin	छोटी viewport dimension
vmax	बड़ी viewport dimension

2. Background Properties

1. background-image

Background-image का उपयोग Background में image लगाने के लिए किया जाता है।

Syntax :

body {
    background-image: url("image.jpg");
}

---

2. background-repeat

Background-repeat का उपयोग Image repeat को control करने के लिए किया जाता है।

Syntax :

body {
    background-repeat: no-repeat;
}

Values:

• repeat
• repeat-x
• repeat-y
• no-repeat

---

3. background-size

Background-size का उपयोग Background image का size सेट करने के लिए किया जाता है।

Syntax :

div {
    background-size: cover;
}

Values:

• auto
• cover
• contain

---

4. background-position

Background-position का उपयोग Image की position सेट करने के लिए किया जाता है।

Syntax :

div {
    background-position: center;
}

3. Font Properties (Text की Styling)

1. font-size

Font-size का उपयोग Text का size बदलने के लिए किया जाता है।

Syntax :

p {
    font-size: 20px;
}

---

2. font-family

Font-family का उपयोग Font style चुनने के लिए किया जाता है।

Syntax :

p {
    font-family: Arial;
}

Examples:

• Arial
• Times New Roman
• Verdana

---

3. font-weight

Font-weight का उपयोग Text को bold करने के लिए किया जाता है।

Syntax :

h1 {
    font-weight: bold;
}

Values:

• normal
• bold
• 100–900

---

4. font-style

Font-style का उपयोग टेक्स्ट को Normal, italic या oblique करने के लिए किया जाता है |

Syntax :

p {
    font-style: italic;
}

Values:

• normal
• italic
• oblique

4. Text Properties

1. text-align

text-align का उपयोग Text की alignment को बदलने के लिए किया जाता है।

Syntax :

h1 {
    text-align: center;
}

Values:

• left
• right
• center
• justify

---

2. text-decoration

text-decoration का उपयोग Text में decoration जोड़ने के लिए किया जाता है।

Syntax :

a {
    text-decoration: none;
}

Values:

• underline
• overline
• line-through
• none

---

3. text-transform

text-transform का उपयोग Text का case बदलने के लिए किया जाता है।

Syntax :

p {
    text-transform: uppercase;
}

Values:

• uppercase
• lowercase
• capitalize

---

4. line-height

line-height का उपयोग Lines के बीच की दूरी करने के लिए किया जाता है।

Syntax :

p {
    line-height: 2;
}

5. Border Properties

1. border

border का use Element के चारों तरफ border लगाने के लिए किया जाता है।

Syntax :

div {
    border: 2px solid black;
}

Syntax:

border: width style color;

---

2. border-radius

border-radius का use Corners को गोल करने के लिए किया जाता है।

Syntax :

div {
    border-radius: 10px;
}

---

3. border-width

border-width का use border की चौड़ाई बढ़ाने के लिए किया जाता है।

Syntax :

div {
    border-width: 5px;
}

---

4. border-style

border-style का उपयोग टेबल की border को style जैसे solid, dotted और dashed etc.करने के लिए किया जाता है

Values:

• solid
• dotted
• dashed
• double

---

6. Box Model Properties

CSS Box Model के चार भाग होते हैं:

Margin
   |
Border
   |
Padding
   |
Content

---

1. width

width का use Element की चौड़ाई बढ़ाने के लिए किया जाता है।

div {
    width: 300px;
}

---

2. height

height का उपयोग Element की ऊंचाई बढ़ाने के लिए किया जाता है।

Syntax :

div {
    height: 200px;
}

---

3. padding

padding का उपयोग Content और border के बीच की जगह सही करने के लिए किया जाता है।

Syntax :

div {
    padding: 20px;
}

Values :

• padding-left
• padding-right
• padding-top
• padding-bottom

---

4. margin

margin का उपयोग Elements के बीच की दूरी कम ज्यादा करने के लिए किया जाता है।

Syntax :

div {
    margin: 10px;
}

Values :

• margin-right
• margin-left
• margin-top
• margin-bottom
• margin: auto;
• margin: 0;

• इसे भी पढ़े : HTML
• इसे भी पढ़े : java script