Selectors are used for selected HTML tags to apply CSS roles.

Type of Selectors

There are many selectors exist in CSS . We will discuss some selectors that are most commonly used

Universal Selector (*):

In CSS it’s just the use of an asterisk to say “All”. Universal selector apply styles entire web page

For example:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

E.g. This CSS can also apply each of the element .

Individual selector:

The Individual selector selects the HTML element by name. if you change the p element styling in that case the selector is "p"

For example:

p{
    color: #000000;
    font-size: 15px;
    font-weight: 400;
    background-color: #0688DD;
}

Class selector(.):

The stander way to used class selector for grouping elements to implement the same style . This selector is mostly used

For example:

.title{
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
}

HTML

 <h1 class="title">Welcome</h1>

E.g Place this selector in the HTML element you want to change

Id selector(#):

The id selector is a way to select the element with the specified id , and apply styles to that element. The stander way to used Just one id apply only one element

For example:

#btn{
    padding: 10px 20px;
    background-color: #2F3246;
    color: #ffffff;
    border-radius: 7px;
}

HTML

<button id="btn">submit</button>

E.g It is the most powerful selector . This Selector override class, asterisk ,Individual etc. selector styling.