CSS Beginners Guide part 2 - About CSS Selectors and Types

HI, today we are going know about CSS Selectors,  A selector is a name that you use to your different styles, the css have some rules to define a style that is selector{ property:value}, the selector could be an class selector, it could be ID selector or html type selector, these are the common selectors we generally use. lets see more about selectors with few examples. the class and id selectors are use to specify your custom selectors

Universal Selector

universal selectors are play a key role in style sheet, and these selectors are matches to every element type. this element start with * symbol,  see bellow example it is apply to each html tag and make the margin/padding into 0.
ex:

<style>
*{margin:0; padding:0};
</style>

Grouping the Selectors

this is very good practice to put the same declarations into one selector, sometimes few selectors share same style declarations, we can group them separated by comma ','.
ex:

<style>
h1{color:red; font-size:13px;}
h2{color:red; font-size:13px;}
h3{color:red; font-size:13px;}
// is equivalent to
h1,h2,h3{color:red; font-size:13px}
</style>

Html type Selectors

A type selector is matches to html tag name and it apply to every tag in entire html page, which we use as a type. the bellow code apply the style to all h1 tags in the document tree.
ex:

<style>
h1{color:red; font-size:13px;}
</style>

Class Selectors

a class selector start with '.' operator and it is very useful, and we can apply this css class to html tag using class attrubute. we can apply multiple classes by separating by space between the classes in class attribute
ex:

<style>
.heading{color:red; font-size:13px;}
//
.myheading{color:red; font-size:13px;}
</style>

ex:

<h1 class='heading'>lessoncup programming blog</h1>
//
<h1 class='heading myheading'>lessoncup programming blog</h1>

ID Selectors

a ID selector start with '#' operator and it is very useful, and we can apply this css ID to html tag using ID attrubute. 
ex:

<style>
#heading{color:red; font-size:13px;}
</style>

ex:

<h1 id='heading'>lessoncup programming blog</h1>