CSS का प्रयोग HTML मे Selector के सहारे किया जाता है. ये Selector Id, Class या Block भी हो सकते है.
यदि हमे किसी Block पर CSS का प्रयोग करना है तो सबसे पहले हमे उस Block को Selector का स्वरूप देना होगा. Selector को बनाने के लिये या तो हम उस Block की Id को निर्धारित करे या Class को निर्धारित करे अथवा या सीधे उस Block के प्रकार को ही Selector बनाकर प्रयोग कर ले.
CSS मे बहुत से Style Rules होते है जो Browser द्वारा व्याख्यान किए गए है और फिर अपने Document मे संबंधित Element लागू होते है. Style Rule तीन प्रकार के होते है.
Selector
Property
Value
CSS Rule हमेशा Selector से Start होता है और यह बताता है कि हम किस HTML Element मे Rule Apply करेंगे. ऊपर Image मे दिखाया गया है जिसमे हम <body> Element मे कुछ Rule Apply कर रहे है.
Selector - यह एक HTML Tag है जिस पर Style Applied की जाती है. यह किसी भी Tag की तरह हो सकता है <h1>, <table> आदि.
Property - यह HTML Tag का एक प्रकार का Attribute होता है. यह Color, Border आदि हो सकता है.
Value - यह CSS Properties को Assigned करता है.
selector { property: value }
CSS Selectors एक CSS Rule Set का हिस्सा होता है. जो वास्तव मे वह Content चुनता है जिसे आप Style करना चाहते है. तो चलिए हम आपको सभी अलग-अलग प्रकार के Selectors को उपलब्ध कराते है.
एक Selector एक HTML टैग होता है जिस पर एक स्टाइल लागू की जाएगी. यह कोई भी टैग हो सकता है जैसे <h1> या <table> आदि.
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector Example</title>
<style>
*{
color:blue;
}
</style>
</head>
<body>
<h1>
This is heading
</h1>
<p>
This is a paragraph.
</p>
<p>
This is another paragraph.
</p>
</body>
</html>
Tag Selector को Element Type Selector भी कहते है. इससे हम Web Page के किसी भी HTML Tag को Select करके उसमे Style Apply कर सकते है. Tag Selector में हम Selector के स्थान पर उस Tag का नाम लिख सकते जिस Design को हम बदलना चाहते है.
<!DOCTYPE html>
<html>
<head>
<title>Tag Selector Example</title>
<style>
input{
background-color:red;
}
</style>
</head>
<body>
Enter Your Name: <input type="text">
</body>
</html>
Class Selector सबसे ज्यादा उपयोग होने वाला Selector होता है. अगर हमे कभी Collection of Properties को बार-बार उपयोग करने की आवश्यकता पडती है तो हम एक Class बना कर उसके सभी Rules को उसके अंदर Define कर देते है. फ़िर जिस Tag मे हमे इस Rules को Set करना होता है तो हम उस Tag मे इस Class को Call कर लेते है. Class को Define करने के लिये .(dot) Symbol का उपयोग करते है. एक Class को हम जितने चाहे Tags मे Call कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.intro{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div class="intro">
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
</div>
<p>My Best Friend is Ali.</p>
</body>
</html>
ID Selector यह Class की तरह ही होता है. इसमे बस इतना Difference होता है कि हम इसको Define करते समय # Character का उपयोग करते है. इसको Call करते समय Tag मे Id Attribute का उपयोग करते है. और एक ID Selector को हम सिर्फ़ एक Element के लिये ही उपयोग कर सकते है. सभी ID Unique Tag पर ही Apply होती है. ID का उपयोग ज्यादतर Layout को बनाते समय किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#intro{
background-color:red;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div id="intro">
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
</div>
<p>My Best Friend is Ali.</p>
</body>
</html>
Child Selectors Descendant Selector की तरह ही होता है. लेकिन यह किसी Element के Child को ही Target करता है. इसलिए इसमे हम Greater Than Symbol (>) का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>Child Selector Example</title>
<style>
p b{
background-color:yellow;
}
</style>
</head>
<body>
<p>Welcome to My Website <b>Tutorialsroot</b></p>
<b>My Name is Ammu.</b>
<p>My Best Friend is Ali.</p>
</body>
</html>
आप विशेष विशेषताओं के साथ HTML Elements में Styles को भी लागू कर सकते हैं. नीचे दी गई Styles का Rule Text की Values के साथ एक प्रकार की विशेषता वाले सभी इनपुट Elements से मेल खाएगा.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selector Example</title>
<style>
a[target=_blank] {
background-color:yellow;
}
</style>
</head>
<body>
<h3>Welcome to My Website Tutorialsroot</h3>
<a href="http://www.tutorialsroot.com">tutorialsroot.com</a>
<a href="https://www.flipkart.com/" target="_blank">Flipkart.com</a>
<a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
</body>
</html>