Below are the four basic selectors which we use on daily web development
1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
1. Universal Selector
The universal selector matches all elements of any type in HTML document. Consider the below scenario in where we have div, span and paragraph for which I want to set a a green font colour for all of them.CSS
*{
font-color:green;
}
<div>div content</div>
<span>span content</span>
<p>paragraph content</p>
User Interface
paragraph content
2. Type Selector
Type selector matches all the HTML elements by the given HTML element name. This selector travels throughout the HTML document and find out the elements which are matched with the given element name and apply the styles on them. Cosider below where we have to set a light green background colour for all the paragraphs.CSS
p{
background-color: lightgreen;
}
<span>Paragraph 1</p>
<p>dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers</p>
<span>Paragraph 2</p>
<p>dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers</p>
<span>Paragraph 3</span>
<p>dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers</p>
User Interface
Paragraph 1
dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers
Paragraph 2dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers
Paragraph 3dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers
3. Class Selector
The class selector matches all the HTML elements by their class attribute value. If any HTML element class attribute value is matches with the given class name selector then the changes will apply to them. Consider the below scenario in which we want to apply a light green colour background to the success message and light yellow colour message to info message.CSS
.success {
background-color: lightgreen;
}
.info {
background-color: #f4ff54;
}
<div class="success">Congratulations! Your are successfully completed CSS basic selectors blog post</div>
<div class="info">You need to go through the other tutorials to become an expert in CSS</div>
User Interface
4. ID Selector
The ID selector applies the styles to the elements based on the value of their id attribute. The HTML elements should be identified by the unique ids. Lets take two containers , apply the background colour for the div container which id value is equal to "warningMessage".CSS
#warningMessage{
background-color: lightgreen;
}
<div id="warningMessage">HTML does not allow the duplicate id values.</div>
<div>Please go through the other tutorials on this blog to become an expert in CSS</div>
User Interface
Above are the basic selectors which we use regularly in our web development.
No comments:
Post a Comment