What is CSS Selectors?
CSS selectors are implemented for selecting the substance of your web page you wish to style. These selectors act as the components of the rule set of CSS. CSS selectors choose elements in HTML based on the class, id, attribute, type, etc.
Types of selector :
There are few basic types of selectors in the CSS from the initial version, and various upcoming versions of CSS have introduced many other selectors. Some of them are :
universal selector
indivisual selector
class selector
id selector
1. UNIVERSAL SELECTOR
The universal selector provided by CSS helps in choosing any elements within the HTML page. it becomes helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.
The basic syntax of this selector is:
Syntax :
* {
property : value;
}
Example :
* {
margin : 0px;
padding : 0px;
}
In the above example. All HTML elements will have 0px padding and margins, and it will overwrite default padding and margins with all HTML elements.
2.INDIVISUAL SELECTOR
CSS indivisual Selector is a straightforward CSS selector that uses the name of any HTML element as a selector for applying the CSS styles on those elements.
The basic syntax of this selector is:
syntax :
html_tag{
/* declarations */
}
Example :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>HTML page</h1>
<a href="./research_internet.html">Here is my research paper</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet saepe voluptas ad possimus aperiam quisquam? Culpa modi, deserunt libero illo placeat cumque sapiente!</p>
</body>
</html>
In the above example, the CSS Indivisual selector has been applied to the HTML paragraph element. And all the paragraphs are being affected.
3.CLASS SELECTOR
CSS class selector styles all the HTML elements with the specified class attribute. Using CSS Classes makes it easy to select HTML elements when applying the same style to different HTML tags. The class selector can be implemented by writing it with the dot (.) character, trailing with the class name.
The basic syntax of this selector is:
syntax :
.class_name{
/* declarations */
}
Example :
<html>
<head>
<style>
.text { font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#666699; }
</style>
</head>
<body>
<!-- On these elements, the class selector will be applied. -->
<p class="text">This is a Customized Style using class.</p>
<p class="text">This is another Customized Style using class.</p>
</body>
</html>
While applying the class selector, you can add the class element to the HTML tag, as demonstrated in the example above.
4.ID SELECTOR
CSS id selector is used to select the HTML element using the ID attribute to apply a style to it. This id element is distinctive always inside the page, and hence it is preferred for selecting a distinct, unique HTML element. When you want to apply the style to only one HTML tag at a time on a page, then you can use the ID selector.
Id selector can be implemented by writing it with the hash (#) character, trailing with your desired element's id.
The basic syntax of this selector is:
syntax :
#id_name{
/* declarations */
}
Example :
Here is an example of an Id selector implemented on a particular div tag:
<!DOCTYPE html>
<html>
<head>
<style>
#mainframe {margin: auto, max-width: 1200px}
</style>
</head>
<body>
<!-- On this element, the ID selector class will be applied. -->
<div id="mainframe">
<!-- This is the main container of page. -->
<p>This paragraph is not assigned with id selector and hence no affect on it.</p>
</div>
</body>
</html>