CSS Selectors
CSS Selectors are used to finding HTML elements to apply some style and formatting on them.
Type of CSS Selectors
CSS Selectors can select HTML elements based on their tag name, class, id, and attribute.
Different Types of CSS Selectors are:
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
CSS Element/Tag Selectors
The element selector finds elements based on the tag name. Sometimes we call it Tag or Type selector as well. This selector is used to apply some style formatting to particular tag types.
Example of Element Selector:
Let us check a simple example to change text color under paragraph tag. Here we will use “p” as an Element selector:
<style>
p {
color: red;
}
</style>
<p> This is sample text </p>CSS Id Selector
The Id Selector is used to select elements based on the id attribute of an HTML element. Id Selectors works in two-step:
- First Assign an id to HTML tag using id attribute: Example:
<p id="blue-text"> - To apply a style with id selector, write a hash (#) character, followed by the id of the element.
#blue-text { color : blue; }
In any HTML Page, id should be uniquely assigned to one element only. For example: if you have assigned id “blue-text” to any tag, do not use it with any other tag. An Id name cannot start with a number!
Example of Id Selector:
Let us check a simple example to change text color under paragraph <p> tag. We will use “#blue-text” as an Id selector to apply the CSS Rule:
<style>
#blue-text {
color: blue;
}
</style>
<p id="blue-text"> This is an example of paragraph text. </p>CSS Class Selector
The Class Selector selects specific elements based on the class attribute. Class Selectors works in two steps:
- A class can be assigned to any HTML tag using class attribute: Example:
<p class="green-text"> - Class Selector use dot (.) or period character followed by the class name to define CSS Rules. Example:
.green-text { color : green; }
In any HTML Page, id should be uniquely assigned to one element only. For example: if you have assigned id “blue-text” to any tag, do not use it with any other tag. A class name cannot start with a number!
Example of Class Selector:
Let us check a simple example to change text color under paragraph <p> tag. Here we will use “.green-text” as an Id selector to apply CSS Rule.
<style>
.green-text {
color: green;
}
</style>
<p class="green-text"> This is an example of paragraph text. </p>CSS Universal Selector
The CSS Universal selector is used as a selection of all elements. It is defined by an asterisk character ( * ).
Example of Universal Selector:
In the following example, Universal Selector will select all HTML elements and apply text color blue and font-size 30px including paragraph (p) and heading tag (h1).
<style>
* {
color: blue;
font-size: 30px;
}
</style>
<p> Sample text . </p>
<h1> This is Heading Text </h1>CSS Group Selector
The grouping selector is used to combine all the elements that need the same style rules. You can apply a style to multiple selectors by separating the selectors with a comma. Example: p, h1 { color : blue; }
Suppose we want to apply blue color to the text under paragraph (p) & heading (h1) tags. We can group them as given in the following example:
<style>
p, h1 {
color: blue;
}
</style>
<p> Sample text . </p>
<h1> This is Heading Text </h1>Complete Example using Different Selectors:
You can try the following example which uses multiple selectors. Each selector performs his own style formatting.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
* {
text-decoration: underline;
}
h1, p {
font-size: 30px;
color: skyblue;
}
.class10 {
color: yellow;
font-size: 12px;
}
#id20 {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2 class="class10"> Small Heading Text</h2>
<p id="id20"> This sample text is defined under pragraph</p>
</body>
</html>| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |