पिछले आर्टिकल में हमने Selector के बारे में पढ़ा हम आशा करते है कि आप समझ गए होंगे। अब आगे हम पढ़ रहे होंगे CSS Color के बारे में।
Introduction of CSS color in hindi
HTML webpage को attractive बनाने के लिए उसमे आप color का use कर सकते है। CSS में color declare करने के लिए CSS के color property का use करते है।
Method of adding color in CSS in hindi
CSS में color add करने के लिए आप RGB , HEX , HSL , RGBA, HSLA में से कोई भी technique को use कर सकते है। या फिर इसके जगह में आप direct color के नाम को भी लिख सकते है।
आइए थोड़ा details से समझने कि कोशिस करते है कि RGB , HEX , HSL , RGBA, HSLA असल में होता क्या है।
RGB
RGB का full form होता है Red/Green/Blue , इसके combination से आप कोई भी color बना सकते है। इसमें आप decimal value (0-225) दे कर कोई भी color बना सकते है।
Example: rgb(100,110,200)
rgb(10%,30%,50%)
RGBA
RGB का full form होता है Red/Green/Blue इसके साथ opacity की value assign की जाती है।
Opacity की value को min .1 से max 1 के बीच ही रखा जाता है।
Example : rgb(123,234,211, .3)
HEX
इसको Hexa Decimal code कहते है जिसमे आप 6 digite के hexa code pass कर रहे होते है। जिसमे 0 to 9 और a to f को mix करते हुए कोई भी color कोड तैयार कर सकते हो। इसके लिखने के लिए सबसे पहले # tag का use किया जाता है।
Example: #2a3b4c
HSL
इसका full form hue, saturation, and lightness होता है। इसमें 3 प्रकार के value को pass किया जाता है जैसे कि color, saturation, and lightness.
Example : hsl(120,77%,38%)
HSLA
इसका full form hue, saturation, lightness, and opacity होता है। इसमें 4 प्रकार के value को pass किया जाता है जैसे कि color, saturation, lightness, opacity.
Example : hsla(64, 81%, 49%, 0.1)
How to change text color using CSS in Hindi
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change Text Color</title>
</head>
<body>
<h2 style="color: blue;">Put Direct Color Name</h2>
<h2 style="color: #199;">This is Decimal Color Name</h2>
<h2 style="color: #e93772;">This is Hexa Decimal Color</h2>
<h2 style="color: rgb(255, 99, 71);">This is RGB Color</h2>
<h2 style="color: rgba(166, 37, 184, 0.2);">This is Hexa Decimal Color</h2>
<h2 style="color: hsl(120, 77%, 38%);">This is HSL Color</h2>
<h2 style="color: hsla(64, 81%, 49%, 0.1)">This is HSLA Color</h2>
</body>
</html>How to change background color using CSS in Hindi
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change background color using CSS</title>
</head>
<body>
<h2 style="background-color: blue;">Put Direct Color Name</h2>
<h2 style="background-color: #199;">Decimal Color Name</h2>
<h2 style="background-color: #e93772;">Hexa Decimal Color</h2>
<h2 style="background-color: rgb(255, 99, 71);">RGB Color</h2>
<h2 style="background-color: rgba(166, 37, 184, 0.2);">Hexa Decimal Color</h2>
<h2 style="background-color: hsl(120, 77%, 38%);">HSL Color</h2>
<h2 style="background-color: hsla(64, 81%, 49%, 0.1)">HSLA Color</h2>
</body>
</html>