Five Basic Methods to Select HTML Elements by CSS

Building structure frame of web page by HTML is the primary task and secondly you have to add CSS to styleSelectors in CSS Code it. In the webpage there are lots of tag elements which may have different properties like background, color, width, height therefore you have to style them separately. To select the elements and giving CSS rules to specific elements, Selectors are used. Here I have explained five common methods to select HTML elements. Before doing that you must know methods of adding CSS to HTML.

1. By Class Attribute

In this method elements are selected by class attribute given in HTML tag. element with Class attribute is selected by following way.

<style>
  .classname{ 
            widht:400px;
            height:400px;
            background: #bbb;
            }
</style>
<div class="classname">
</div>

Here, classname is any text. Inside <style> tag (.) dot + class name is used to select elements with class attribute.

2. By ID Attribute

In this method all the process are same as selecting elements with class attribute, but we use (#) insted of (.) to select elements with ID attribute. The example is given below.

<style>
  #elementid{ 
            widht:400px;
            height:400px;
            background: #bbb;
            }
</style>
<div id="elementid">
</div>

Here, elementid is any text. Inside <style> tag, (#) hash + element id is used to select elements with class attribute.

3. Selecting HTML <tags>

To select HTML tags use tag{ CSS RULES } inside <style> tag. The example is given below:

<style>
    p {font-size:30px;}
    div{font-size: 50px;}
</style>
<p>Example Paragraph</p>
<div>This is another text</div>

Here, all the <p> tag is selected when you use p { CSS Property } and all the <div> tag is selected when you use div { CSS Property }

4. Selecting Child Elements

To select child elements you have to use selector like parent-selector child-selector { CSS PROPERTY } . Example of selecting child elements is given below:

<style>
   #parentbox .childprag {background:#555; color:#fff;} 
</style>
<div id="parentbox">
 <p class="chidlprag">
     This is example text
 </p>
</div>

Here, <p> with class name childprag inside element with id parentbox is selected.

5. Selecting Multiple Elements

To select multiple elements and give same CSS rules use selector like selector1 , selector2 { CSS PROPERTY } . Here (,) comma is used to separate different selectors. This method is used when two elements have same CSS property. The example code is given below:

<style> 
 #box1 , #box2, .box3{
                    width:300x;
                    min-height:300px;
                    background:#069;
                    color:#fff;
                    padding:20px;
           }
</style>
<div id="box1">
       This is text of box 1
</div>
<div id="box2">
       This is text of box 2
</div>
<div class="box3">
       This is text of box 3
</div>

Here , Same CSS rule is applied to #box1 , #box2 and .box3 .

Posted By : Hari Prasad Chaudhary | Comment RSS. Category : Web Development
Tag : ,