Introduction to CSS

CSS एक प्रोग्रामिंग भाषा है जो वेब पेजों को स्टाइल करने के लिए उपयोग होती है। पेज का Look और Appearance CSS की मदद से ही संभव है, CSS के बिना वेबसाइटें बहुत अच्छी नहीं दिखती और लोग बहुत कम वेबसाइटों को देखना पसंद करेंगे।

How to write CSS

CSS को Key-Value Pair का रूप में लिखा जाता है, जहां पहले Property का नाम और दूसरी जगह Value लिखी जाती है, Curly Braces Under लिखते है।

selector {
  property: value;
}

Example

p {
   color: red;
}

CSS Selector

CSS selector की मदद से हम HTML Elements को Style करते है –

Syntax

selector {
   key: value;
}

selector {
   property: value;
}

How to use CSS with HTML

CSS ko HTML to sath hi upyog kiya jata, ab dekhte hai ki CSS ko HTML ke sath kese upyog kar satke hai, CSS upyog karne ke nimnlikhit tarike hai

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS

Inline CSS में हम किसी भी tag को स्टाइल करने के लिए स्टाइल attribute का उपयोग करते है, style attribute हर एक tag के साथ रहता है –

Syntax

<tag-name style="">
</tag-name>

External CSS

External CSS (से आशय है की HTML File एक CSS को फाइल से link करना) जिसमे हमारी CSS लिखी लिखी रहती है जी पेज में यह HTML फाइल में यह CSS File Link रहेगी उसमे CSS Apply हो जाएगी।

• HTML File से CSS फाइल को लिंक करने के लिए <link> tag का उपयोग किया जाता है –

<link rel="stylesheet" href="style.css">

Features of CSS

• Easy to learn –
• No Code Error –

Versions of CSS

• CSS का Version 3 चल रहा है जिसे CSS3 कहते है।

CSS Selectors

• CSS Selectors ऐसे Keywords/Tags/Operators समूह होता है जो HTML Tags को Select करते है, Style/Design करने के लिए।
• CSS Selectors में HTML Tag, Mathematical Operators, HTML Attribute आदि शामिल रहते है।
• हर एक CSS Selector की अपनी-अपनी Spacificity (Priority) रहती जो यह Decide करती है कोनसी CSS Apply (यदि एक ही Element एक से अधिक बार Styling की हो तो) होगी।

Types CSS Selectors

1. Tag Selector
2. Class Selector
3. ID Selector
4. Attribute Selector
5. Universal Selector
6. Sibling Selector
7. Child Selector
8. Descendent Selector

Tag Selector

इस Selector से HTML Document में उपस्थित Tags को Select किये जाता है –

/* syntax */

tag-name {
  property: value;
}

/* example */

p {
  color: red;
}

Class Selector

ये एक बहुत पॉवरफुल सिलेक्टर है जिसकी से प्रकार के elements को select किया जा सकता है स्टाइल करने के लिए, class एक html tag का एट्रिब्यूट attribute है , tag में attribute add करने के बाद (.) के साथ का नाम के साथ {} में स्टाइल लिखनी पड़नी है।

/* syntax  - html */

<p class="para" > </p>

<style>
  .para {
    color: red;
  }
</style>

• एक html tag में एक साथ एक से अधिक classes भी दे सकते है, classes के बाद में सिर्फ एक स्पेस लगाने के जररूत पड़ती है।
• एक से अधिक HTML tag को सामान class name दे सकते है।

CSS Comments

CSS में – Commnet का उपयोग सिर्फ कोड को एक्सप्लेन करने के लिए करते है जिसका सिंटेक्स निम्नलिखित है।

/* this is css commnet */

/* 
this is also a css comment block
*/

/* 
-------------------------------
 this is another comment
-------------------------------
*/

CSS Colors

CSS से कलर हर एक एलिमेंट को दिया सकता है जिसका सिंटेक्स है

syntax {
  color: color name | color code;
}

• Color value में हम Color नाम या Color Code सकते है।
• Color Code RGB, RGBA, Hex Color Code आदि।

Color Name

CSS 140 Colors को नाम से उपयोग कर सकते है – जिसमे से कुछ इस प्रकार है – `aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow`

p {
color: red;
}

/* colors */
p {
  color: green;
}

Color RGB

RGB Color code me R (Red), G (Green), B (Blue) होता है। हर कलर कोड की वैल्यू – (0 – 255) के बीच होती है।

p {
color: rgb(255, 0, 0);  
}