CSS Selectors

Element Type Selector

Element type selector is used to select all the elements based on the tag you defined in your stylesheet. For Example, here I style button and textbox by selecting them using Element Type Selector in stylesheet.

index.html

<div>I am From America</div>
<p>I am from Pakistan. We are peaceful nation</p>
<br>
    <span>I am from Canada</span>

style.css

p{
    background-color:green;
    padding:10px;
    color:white;
    font-size:18px;
    font-family:calibri,sans-serif;
}

Show Demo on JsFiddle

ID Selector

You can select any element/tag by specifying its ID. ID is unique. No two elements have same ID. So, ID Selector select an element/tag according to your specified ID Selector. ID Selector starts with pound/hash symbol (#) and then follow the ID of element/tag

index.html
<p>Hello</p>
<p id="StyleMeWell">Hello Again</p>
<p>Hello Again and Again</p>
<p>Hello Again and Again</p>
<p>Hello Again and Again</p>

style.css

#StyleMeWell{
    background-color:#cc0000;
    color:white;
    font-family:calibri,sans-serif;
    font-size:18px;
    padding:10px;
}

Show Demo on JsFiddle

Universal Selector

Sometime, you want to apply style to every element of webpage. To do this CSS provide Universal Selector (*).

index.html

<div>Hello From Division</div>
<p>Hello From Paragraph</p>
<b>Hello From Bold Tag</b><br>
We all are sized 32px because of * Universal Selector
style.css
*{
    font-size:32px;
}

You should avoid using Universal Selector because of its performance cost.

Show Demo on JsFiddle

Continue reading