What is a selector?
Selectors helps identify the html element. Whenever we modify the property value for an html page, these values must be associated with an selector. For e.g. In the last tutorial we have seen an example like this:
p { color: red; font-size: 16px; }
Here p is selector which selects all the paragraphs of an html page. So the color and font size specified in this selector would only modify these values for paragraphs, other html element such as headings will not reflect this change as there is a separate selector for them.
Selector types:
Following are the three frequently used selectors:
1) Element selector
2) Id selector
3) Class selector
1) Element selector:
This type of selector selects the element based on the element name.
For e.g:
p { color: red; font-size: 16px; } : Selects the text with in <p> and </p> tags of a HTML page.
and h1 { color: blue; font-size: 20px; } : Selects the text within <h1> and </h1> tags of HTML.
These both are the examples of element selectors. There are several other element selectors apart from these and we will discuss each one of them in the upcoming tutorials.
Example:
style.css
p
{
text-align:center;
color:red;
}
h2
{
text-align:center;
color:blue;
}
myhtmlpage.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Hello</h2> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too</p> <p>And me!</p> </body> </html>
Output:
2) Id selector:
This selector is used for selecting a HTML element based on the id value.
For example:
#mypara { text-align:left; color:black; }
This statement would only style the elements which has id value as “mypara”.
If my html page has two paras like this then the above CSS would style the second para only. Note: Second para has id=”mypara”.
<p> First Para </p> <p id="mypara"> Second para</p> <p> Third Para</p>
Id is useful when you want to give different-2 styles to the same HTML elements. For e.g.
#mypara {color:black; }
#para2 {color:red; }
And html page is:
<p id="mypara"> Second para</p> <p id="para2"> Third Para</p>
Output: First paragraph font color would be black and second paragraph would be having red color. This is because both the paragraphs has different id values and for each id value we have different colors specified in CSS.
3) Class Selectors:
For class selectors we specify the CSS like this. It is similar to the id selector but the syntax is different. It styles the elements of specified class.
.abc
{
text-align:center;
color:red;
}
HTML page:
<p class="abc"> I will be in the center</p> <p> I will be having default style as I don't have class</p>
First paragraph would be styled by the defined css while the second one would be having the default style of paragraphs.
Leave a Reply