What are Selectors in css

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewportcontent="width=device-width, initial-scale=1.0">
    <title>Selector Study IN Css </title>
</head>
<style>
    /* this is calldd the element selector  */

    p {
        color: blueviolet;

    }

    ol {
        color: brown;
    }

    /* element selctor ends there */
    /* id selector strats from there */
    #idselector {
        background-color: brown;
    }

    /* id selector ends ther */
    /* class slector starts form there */
    .classselector {
        color: brown;
    }

    /* class selctor end  */
    /* group selector start */
    p,
    span,
    footer {
        color: chartreuse;
    }

    /* group selector end  */
</style>

<body>
    <!-- this is the type to write properties in css p(Selector) {color(property) : blue\(value);} -->
    <p>there are many selectors in css are as follows :
    <ol>my name is usman
        <li>
            css element selector
        </li>
        <li>
            css id selector
        </li>
        <li>
            css class selector
        </li>
        <li>css group selector </li>
    </ol>
    </p>
    <ol>
        <ul>
            <!-- This si a type of selector in which we write the tag properties internal or external with the help of calling its tag name like p span h1 or li.etc -->
            <li><strong>css element selector</strong></li>
            <ul>
                <li>This si a type of selector in which we write the tag properties internal or external with the help
                    of calling its tag name like p span h1 or li.etc</li>
            </ul>
        </ul>
        <!-- element selector end there -->
        <!-- css id selector start  -->
        <ul>
            <!--This si a type of selector in which we write the tag properties internal or external with the help of callingtag id that is written as in its parameter which is unique for any parameter this property apply only when the parameters are written and have sapacific properties and whenever this id is called all properties are applied but it is nor used in more than one tags  -->
            <li><strong>css id selector</strong></li>
            <ul>
                <li class="classselector">This si a type of selector in which we write the tag properties internal or
                    external with the help of callingtag id that is written as in its parameter which is unique for any
                    parameter this property apply only when the parameters are written and have sapacific properties and
                    whenever this id is called all properties are applied but it is nor used in more than one tags
                </li>
            </ul>
        </ul>
        <!-- this is a p atg in which we used an id to apply the specific property in t but the property of the p tag that are written in the i nternal css also applied in it so double properties are applied in it -->
        <p id="idseclass=classselector"lector">this line showas the property of the id selector that is uised in
            internal css style sheet</p>
        <!-- css id selector end here -->
        <!-- css class selector start -->
        <ul>
            <!-- This is type of selector in which name of the class in written in the tag an dits properties with the help of class can be written in the style sheet and this class name will be used in more than one tags like p span .etc this is easy to use onl class name can call all properties that are written in style sheet with the name of the class -->
            <li><strong>Css clas selector </strong></li>
            <ul>
                <li>This is type of selector in which name of the class in written in the tag an dits properties with
                    the help of class can be written in the style sheet and this class name will be used in more than
                    one tags like p span .etc this is easy to use onl class name can call all properties that are
                    written in style sheet with the name of the class </li>
            </ul>
        </ul>
        <span class="classselector"> thies is the tag which is used the class and applied property is written in
            internal css with this name</span><br>
        <span class="classselector"> thies is the another tag which is used the class and applied property is written in
            internal css with this name</span>
        <!-- css class selctor end there -->
        <!-- css group selectors starts from there -->
        <ul>
            <!-- This is the type of the selctor in hwcih we used the diffent tag in one one time in css like we cannot used in id or class irt is like an element selector which is used in the group and called css group selector in this selctor we can used nam eof deifferent tag in style and write down its name properties which we wanna apply in the group of tag -->
            <li><Strong>Css Goup selector</Strong></li>
            <ul>
                <li>This is the type of the selctor in hwcih we used the diffent tag in one one time in css like we
                    cannot used in id or class irt is like an element selector which is used in the group and called css
                    group selector in this selctor we can used nam eof deifferent tag in style and write down its name
                    properties which we wanna apply in the group of tag </li>
            </ul>
        </ul>
        <span>Tis is used for the goup tag information or properties </span>
        <p>we also used the p tag to discuss or show the properties of the group selector</p>
        <footer>This is third tag for the group selectro stusy</footer>
        <ol>
            <!-- it shoukld remember that the style which is used latter referred more to used than the first used tag so it will sure that the property of the tag can be changed if we chang its style later  -->
            <br>
            <!-- this is the lecture in whcih we study about the css selectors and im end with there in next lecture we will study fonts style or size and others properties  -->
            <p style="color: black;"><strong>Thanks You</strong></p>
</body>

</html>

Post a Comment

Let us Know...!

Previous Post Next Post