what is selector in css

The selector is the HTML element that we want to style.

To setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

id Selector

The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1":

Example:

#para1
{
text-align:center;
color:red;
}

Class Selectors

Using classes is very simple. Let's try this with example of making paragraphs that perform differently. First, we begin with the CSS code;

~~make a note of the strike through text.~~

CSS Code1
p.first{ color: blue; }
p.second{ color: red; }

HTML Code
   <html>
   <body>
   <p>This is a normal paragraph.</p>
   <p class="first">This paragraph uses the p.first CSS code. </p>
   <p class="second">This paragraph uses the p.second CSS code. </p>
   CSS Code2
   p{ color: red; font-size: 20px; }
   p.test1{ color: blue; }
   p.test2{ font-size: 12px; }

HTML Code
   <html>
   <body>
   <p>This is a normal paragraph.</p>
   <p class="test1">This paragraph uses the p.test1 CSS code. </p>
   <p class="test2">This paragraph uses the p.test2 CSS code. </p>

This is a normal paragraph.

This is paragraph uses the p.test1 CSS code. The p.test1 paragraph remained the same size, but its color changed.

This is paragraph uses the p.test2 CSS code. The p.test2 paragraph remained the same color, but its size changed.

<html>
   <head>
        <style>
            ~~p.first~~{ background-color: gray; }
            ~~p.second~~{ background-color: red; }
            ~~p.third~~ {
            background: purple;
            color: white;
            }
        </style>
   </head>
   <body>
        <h2>CSS Classes</h2>
        <p ~~class="first"~~>This is the p.first paragraph</p>
        <p ~~class="second"~~>This is the p.second paragraph</p>
        <p ~~class="third"~~>This is the p.third paragraph</p>
   </body>
</html>

what is selector in css