CSS - Introduction / Types & Syntax / Bg-Text-Color - By. Shivansh Sir

CASCADING STYLE SHEETS
CSS | INTRODUCTION
CSS की full form Cascading Style sheetsहै। यह एक प्रकार की language है जिसकी help से हम अपनी Website की designing करते हैं। Simple भाषा में कहें तो CSS आपके browser को यह बताता है कि web page में present contents (like text, image, video, paragraph, font, color, size, position, etc.) को कैसे show करना है।

CSS को हमेशा HTML के साथ Use किया जाता है , without HTML के CSS का use करने का कोई मतलब नहीं है, because style apply करने के लिए आपके pass content होना चाहिए और वो content HTML provide कराता है।

Example without CSS
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
  </head>
  <body>
    <h3>Hello Learners</h3>
    <p>This is paragraph</p>
  </body>
</html>

CSS Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
    <style>
      /*change page background color:black*/
      body {
      background-color: black;
      }
      
      /*all h3 headings color : red*/
      h2 {
        color: red;
      }
      
      /*it will apply on all paragraps */
      p {
        font-family: verdana;
        font-size: 20px;
        color: green;
      }</style>
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

CSS | SYNTAX
Inline या Internal CSS के लिए CSS को style tag से define करते हैं।
Syntax-
h1(selector)
 {
   color(property) : red(value);
 }

Explain of Syntax
h1 : h1 एक selector है , जो कि एक HTML element है जिसके ऊपर हम CSS apply कर रहे हैं। selectors कई तरह के होते हैं जैसे element selector, class selector, ID selector. हालांकि इनके बारे में हम आगे बात करेंगे।

color : यह css style की property का name है। यह color का मतलब है कि element का हम color define कर रहे हैं।

red : यह property की value है।

एक element के लिए सिर्फ एक ही property define करें या एक ही element select करें, अपनी need के according कितने ही elements पर एक साथ style apply कर सकते हैं।
Syntax
body,p{
  color : red;
  background-color : black;
}

CSS Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
    <style>
      /*change page background color:black*/
      body {
      background-color: black;
      }
      
      /*all h3 headings color : red*/
      h2 {
        color: red;
      }
      
      /*it will apply on all paragraps */
      p {
        font-family: verdana;
        font-size: 20px;
        color: green;
      }</style>
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

CSS | HOW TO ADD CSS?

HTML document में CSS use करने के 3 तरीके होते हैं -
1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS
Directly किसी HTML element पर apply करते हैं।

Inline CSS Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Inline CSS Example</title>
  <body style="background-color:black">
    <h2 style="color:red">Hello Learners</h2>
    <p style="color:green">This is paragraph</p>
  </body>
</html>

Note :- Inline CSS को कम ही use करें , यह professional way नहीं है , because हर element में style define करना होता है , जिससे code भी काफी बढ़ जाता है और complexity भी।

2. Internal CSS
Internal CSS को HTML document के <head></head> section में <style></style> tag में define किया जाता है। एक से ज्यादा elements पर style apply कर सकते हैं।

Internal CSS Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Internal CSS Example</title>
    <style>
      /*change page background color:black*/
      body {
      background-color: black;
      }
      
      /*all h2 headings color : red*/
      h2 {
        color: red;
      }
      
      /*it will apply on all paragraps */
      p {
        font-family: verdana;
        font-size: 20px;
        color: green;
      }</style>
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

Note :- Inline CSS use न करके Internal CSS को आप use कर सकते हैं अगर आपको थोड़ी ज्यादा style apply करनी है।

3. External CSS
External CSS use का use करके पूरी website की design manage कर सकते हैं। External CSS use करने के लिए .css extension file बनाकर उसमे CSS code लिखते हैं फिर इस file को <head></head> section में link करते हैं। CSS file को link करने के लिए <link rel="stylesheet" href="css-filepath"> लिखना पड़ता है।

External CSS Example
File : my_style.css
body {
  background-color: black;
}

/*all h2 headings color : red*/
h2 {
  color: red;
}

/*it will apply on all paragraps */
p {
  font-family: verdana;
  font-size: 20px;
  color: green;
}

External CSS Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="my_style.css">
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

CSS | COLORS
CSS में colors के लिए RGB , HEX , HSL , RGBA, HSLA की कोई भी valid color value assign करके color change कर सकते हैं। या फिर direct colors के name भी दे सकते हैं। कुछ colors के नाम इस प्रकार हैं।

CSS | Difference between rbg, rgba, hls, hlsa
1. decimal color
decimal में decimal value 0 - 255 enter कर सकते हैं। इस value को आपको hash # के साथ लिखना है। Example : #234

2. Hexa-Decimal color
hexa-decimal में 6 digits का hexadecimal value पास कर सकते हैं। जिसमे number 0 to 9 और a to f mix कर सकते हैं। Example : #2a3b4c

3. rgb color
rgb का मतलब red, green, blue होता है। जिसमे decimal value 0-255 enter कर सकते हैं। Example : rgb(123,234,211)

4. rgba color
rgba में rgb का मतलब red, green, blue और a का मतलब opacity होता है। Opacity की value min .1 से max 1 के बीच होती है। Example : rgb(123,234,211, .3)

5. hls color
hls का मतलब hue, saturation, and lightness होता है। इसमें 3 values pass की जाती हैं , color , saturation, and lightness. Example : hsl(120, 77%, 38%)

6. hlsa color
hlsa में hls का मतलब hue, saturation, and lightness होता है। और a का मतलब opacity होता है। Example : hsla(64, 81%, 49%, 0.1)

CSS | TEXT COLOR
CSS में किसी भी text का font color change करने के लिए color : value; property का use किया जाता है, value में RGB , HEX , HSL , RGBA, HSLA में से किस भी type की valid color value provide कर सकते हैं।
Source Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS TEXT Color Example</title>
  </head>
  <body>
    <h2 style="color: blue;">Put Direct Color Name</h2>
    <h2 style="color: #199;">Decimal Color Name</h2>
    <h2 style="color: #e93772;">Hexa Decimal Color</h2>
    <h2 style="color: rgb(255, 99, 71);">RGB Color</h2>
    <h2 style="color: rgba(166, 37, 184, 0.2);">Hexa Decimal Color</h2>
    <h2 style="color: hsl(120, 77%, 38%);">HSL Color</h2>
    <h2 style="color: hsla(64, 81%, 49%, 0.1)">HSLA Color</h2>
  </body>
</html>

CSS | BACKGROUND COLOR
Background color change करने के लिए background-color property का use किया जाता है।
Source Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Background Color Example</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>


Comments

Post a Comment