CSS Selector

This page will help you to learn how you can user CSS on various types of HTML tag. If you have knowledge of CSS selector then you can make big changes of fo

rmatting in easy and manageable way. Following are the list of all types of CSS selector.

Global Selector

* {

   color: green;

   font-size: 20px;

   line-height: 25px;

}

color,font-size and line height will be change for all tag of page.

Select a division HTML tag and also select inner tag child

    .Gmenu ul>li

    {

         color:red;

    

    }

    .Gmenu ul

    {

    

    }

.Gmenu a:hover, active, visited

{

   color: #FFFFFF !important;

}

.Gmenu  a:link,a:visited

{

     color:#FFCC00;

}

HTML

<div class="Gmenu">

<ul>

          <li><a href="#">One</a></li>

          <li>Two</li>

          <li>Three</li>

     </ul>

</div>

Table Selector

  table, th, td 

   {

        border: 1px solid black;

   }

        table td, th {

            padding: 20px;

            color: red;

        }

Form Element

select different type of form input control at once

.g-form input[type=text],[type=email],[type=password] {border:solid black 1px;border-radius:0px;}

.g-form select {border:solid black 1px;border-radius:0px;}

Inline Variable 

You can use variables in an inline statement using style and pass them to a class. This method makes a class flexible to use property values provided by inline variables. By using the inline variable you can change the property value while calling because the property value passes to the class and class render style using the inline variable.

<h2 class="text-stroke" style="--width: 1px; --color: black ">Girfa IT Services </h2>

<style>

text-stroke {

     -webkit-text-stroke-width:var(--width);

     -webkit-text-stroke-color: var(--color);

}

</style>

Global Variable

:root 
{
    --red: #950102;  
}

.g-color-red
{
    color:var(--red) !important;
}

Next Topic