HTML div, ID, Class Selector

Paper 2-Internet &Web design

Unit I
Unit II
Unit III
Unit IV
Unit V

Back
Internet-Unit-3
Next

<div> Tag

<div> Tag का उपयोग HTML और CSS में Web Page को अलग-अलग भागों (Sections) में विभाजित करने के लिए किया जाता है। <div> Tag के उपयोग से Web Page की संरचना (Structure) और Layout तैयार करते है। डिव के अंदर CSS की सहायता से Color, Border, Margin, Padding, Width, Height आदि निर्धारित किए जा सकते हैं। यह एक Block-level Element होता है, जो उपलब्ध पूरी चौड़ाई (Width) घेरता है।

Web Designing में Header, Footer, Sidebar तथा Content Section बनाने के लिए <div> Tag का व्यापक उपयोग होता है। div स्वयं कोई विशेष Design प्रदर्शित नहीं करता, लेकिन CSS और JavaScript के साथ मिलकर आकर्षक तथा Responsive Web Pages बनाने में सहायता करता है।

JavaScript की सहायता से <div> Element में Runtime पर परिवर्तन (Modification) भी किया जा सकता है। एक Web Page में अनेक <div> Tags का उपयोग किया जा सकता है।

CSS Syntax

CSS Syntax यह निर्धारित करता है कि किसी HTML Element पर Style कैसे लागू होगी।

Syntax

selector {
  property: value;
}

उदाहरण

निम्न उदाहरण में <p> Element का Text Color लाल होगा तथा Text Center में Align होगा।

p {
  color: red;
  text-align: center;
}

CSS Selectors

CSS Selectors का उपयोग HTML Elements को Select करने तथा उन पर Style लागू करने के लिए किया जाता है। डिक्लेरेशन ब्लॉक (Declaration Block) में एक या अधिक Declarations हो सकते हैं, जिन्हें Semicolon (;) द्वारा अलग किया जाता है।

प्रत्येक Declaration में CSS Property तथा उसकी Value होती है, जिन्हें Colon (:) द्वारा अलग किया जाता है। पूरा Declaration Block Curly Braces { } के अंदर लिखा जाता है।

CSS Selectors के प्रकार

CSS Selectors को मुख्य रूप से पाँच श्रेणियों में बाँटा जाता है —

  1. Simple Selectors
  2. Combinator Selectors
  3. Pseudo-class Selectors
  4. Pseudo-element Selectors
  5. Attribute Selectors

1. Simple Selectors

यह Element के Name, ID, Class आदि के आधार पर Element को Select करता है।

उदाहरण

निम्न उदाहरण में Page के सभी <p> Elements Center-Aligned होंगे तथा उनका Text Color लाल होगा।

p {
  text-align: center;
  color: red;
}

2. Combinator Selectors

यह Elements के बीच विशेष संबंध (Relationship) के आधार पर Elements को Select करता है।

3. Pseudo-class Selectors

यह किसी Element की विशेष अवस्था (State) के आधार पर Element को Select करता है। उदाहरण: :hover, :focus आदि।

4. Pseudo-element Selectors

यह किसी Element के विशेष भाग (Part) को Select तथा Style करता है। उदाहरण: ::first-letter, ::before आदि।

5. Attribute Selectors

यह Attribute अथवा Attribute Value के आधार पर Elements को Select करता है।

CSS Element Selector

Element Selector किसी विशेष HTML Element को उसके Tag Name के आधार पर Select करता है, जैसे — <p> , <h1> , <div>

जब किसी Element को उसके नाम से Select किया जाता है, तब निर्धारित Style उस प्रकार के सभी Elements पर लागू हो जाती है।

CSS ID Selector

ID Selector किसी विशेष Element को Select करने के लिए उसके id Attribute का उपयोग करता है। किसी Web Page में id Unique होती है, इसलिए इसका उपयोग केवल एक विशेष Element को Select करने के लिए किया जाता है। ID Selector में Hash (#) चिन्ह का उपयोग किया जाता है।

उदाहरण

#para1 {
  text-align: center;
  color: red;
}
<!DOCTYPE html>
    <html>
       <head>
           <style>
               #para1 {
                    text-align: center;
                    color: red;
                    }
          </style>
      </head>
     <body>
          <p id="para1">Hello World!</p>
          <p>This paragraph is not affected by the style.</p>
     </body>
</html>

नोट: id का नाम संख्या (Number) से प्रारंभ नहीं होना चाहिए।

CSS Class Selector

Class Selector किसी विशेष class Attribute वाले HTML Elements को Select करता है। Class Selector में Period (.) चिन्ह का उपयोग किया जाता है।

उदाहरण

.center {
        text-align: center;
        color: red;
        }
<!DOCTYPE html>
     <html>
        <head>
           <style>
              .center {
                      text-align: center;
                      color: red;
                      }
           </style>
       </head>
      <body>
          <h1 class="center">Red and center-aligned heading</h1>
          <p class="center">Red and center-aligned paragraph.</p>
     </body>
</html>

CSS Universal Selector

Universal Selector (*) Web Page के सभी HTML Elements को Select करता है।

उदाहरण

* {
  text-align: center;
  color: blue;
}
<!DOCTYPE html>
    <html>
        <head>
           <style>
                * {
                  text-align: center;
                 color: blue;
                }
           </style>
        </head>
        <body>
             <h1>Hello World!</h1>
             <p>Every element on the page will be affected by the style.</p>
             <p id="para1">Me too!</p>
             <p>And me!</p>
         </body>
  </html>

CSS Comments

Browser CSS Comments को Ignore कर देता है। CSS Comment /* से प्रारंभ होता है तथा */ पर समाप्त होता है।

उदाहरण

/* This is a single-line comment */
p {
  color: red;
}

CSS Background Color

CSS की सहायता से HTML Elements का Background Color निर्धारित किया जा सकता है।

उदाहरण

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

CSS की सहायता से Text का Color निर्धारित किया जा सकता है।

उदाहरण

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color

CSS द्वारा Border का Color निर्धारित किया जा सकता है।

उदाहरण

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Example 1 – <div> with CSS

<html>
    <head>
      <style>
       .myDiv {
              border: 5px outset red;
              background-color: lightblue;
              text-align: center;
              }
      </style>
    </head>
    <body>
       <div class="myDiv">
          <h2>This is a heading in a div element</h2>
          <p>This is some text in a div element.</p>
      </div>
    </body>
</html>

Example 2 – Square and Circle Div

<html>
    <head>
        <title>Style Example</title>
        <style>
           .square {
              background-color: #2ecc71;
              width: 200px;
              height: 200px;
                }
           #circle {
              background-color: #2ecc71;
              width: 200px;
              height: 200px;
              border-radius: 50%;
                }
         </style>
   </head>
   <body>
        This is div example <br><br><br>
       <div id="circle">
          This is first division
       </div>
     <br>
       <div class="square">
          This is second division
      </div>
   </body>
</html>

Example 3 – Styled Div

<html>
     <head>
     <title>Style Example</title>
    <style>
          .square {
                   background-color: #2ecc71;
                   width: 200px;
                   height: 200px;
                   font-family: cursive, sans-serif;
                   font-size: 1.3rem;
                   font-weight: bold;
                   font-style: italic;
                   }
           #circle {
                   background-color: #2ecc71;
                   width: 200px;
                   height: 200px;
                   border-radius: 50%;
                   }
    </style>
    </head>
    <body>
          This is div example <br><br><br>
          <div id="circle">
             This is first division
          </div>
           <br>
         <div class="square">
              This is second division
         </div>
  </body>
</html>
Back
Next
error: Content is protected !!