What are CSS rulesets useful for?
What is the use of the CSS rule set?
CSS stands for Cascading Style Sheets. It is used to style HTML elements. HTML is used to create web pages or add content to them. Developers then use CSS to render HTML content in a specific style to make it look great.
The CSS rule set mainly consists of two parts. One is the CSS selector, and the other is the declaration block.
CSS selectors are used to select HTML elements, and the declaration block contains CSS properties in key-value format to apply to HTML elements.
Syntax
Users can use CSS rule sets to style HTML elements using the following syntax.
Selector {
/* Declaration block */
}
In the above syntax, “selector” can be a class name, id, or other HTML element to select the HTML element. The declaration block contains multiple CSS properties and their values to apply to the HTML element.
Example 1 (CSS Class Selector)
In the following example, we use class names as CSS selectors to define a CSS rule set. In the code, we have three div elements with different class names. We select each div element by its class name and apply different CSS styles to it, which you can observe in the output.
<html>
<head>
<style>
.one {
background-color: red;
color: white;
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.two {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid yellow;
}
.three {
background-color: blue;
color: white;
padding: 10px;
margin: 10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<h2> Using Class Selectors in CSS Rule Sets </i> </h2>
<div class = "one"> One </div>
<div class = "two"> Two </div>
<div class = "three"> Three </div>
</body>
</html>
Example 2 (CSS ID Selector)
In the following example, we use the ID of an HTML element as a CSS selector to define a CSS rule set. In HTML, two elements can never have the same ID.
Here, we have a div element with the ID “card” that contains two other div elements with IDs equal to “content1” and “content2.” We style all HTML elements by accessing their IDs, and users can observe this effect in the output.
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: gray;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-between;
flex-direction: column;
}
#content1 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 12px;
color: white;
border: 2px solid red;
margin: 20px;
}
#content2 {
width: 100px;
height: 100px;
color: white;
background-color: blue;
border-radius: 12px;
border: 2px solid red;
margin: 20px;
}
</style>
</head>
<body>
<h2> Using ID Selectors in CSS Rule Sets </i> </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
Example 3 (CSS Multiple Selectors)
In the following example, we use multiple CSS selectors to apply the same CSS styles to multiple HTML elements in a single operation.
We have three “p” elements with different class names and IDs. In the CSS, we use the “.text1, .text2, #para1” CSS selector to apply the same styles added in the declaration block to all HTML elements.
Furthermore, we selected all three HTML elements individually and applied different styles to each HTML element using class and ID CSS selectors.
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
height: auto;
padding: 10px;
width: 200px;
}
.text1 {
background-color: red;
color: white;
font-size: 2rem;
}
.text2 {
background-color: green;
color: red;
font-size: 1.7rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2> Using multiple selectors in CSS rule sets </i> </h2>
<p class = "text1"> This is the first paragraph. </p>
<p class = "text2"> This is the second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
Example 4 (CSS Nested Element Selectors)
In the following example, we introduce nested selectors in CSS. In HTML, a div element contains multiple elements with the class name “link.”
In CSS, we use the “div.link” CSS selector to select all HTML elements with the class name “link” and all descendants of the div element. If we use “div.link” as a CSS selector, it will apply styles to all div elements with the class name “link.” Therefore, “div.link” and “div.link” are different CSS selectors.
In the output, users can observe that the CSS styles applied to the outer elements of the div element are not applied to all the HTML elements that are descendants of the div element.
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> Using nested selectors <i> (nested selectors)</i> in the CSS rule set</h2>
<div>
Link 1
Link 2
Link 3
</div><br>
Link 5
</body>
</html>
Example 5 (CSS Pseudo-Selectors)
In this example, we demonstrate how to use CSS pseudo-selectors. There are various CSS pseudo-selectors, and we’ll use a few of them here.
Here we have a file containing 4 We create a “container” div element with a class name of “element” and a child element. We use the “:hover” pseudo-selector to change the background color of the “container” div element when the user hovers the cursor over it.
Later, we use the “:first-child,” “:last-child,” and “:nth-child()” CSS selectors along with the “.element” selector to select the first, last, and nth child, respectively.
In the output, users can observe the different CSS styles applied to the first, last, and second child elements.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
/* hover pseudo class */
.container:hover {
background-color: red;
}
/* first child pseudo class */
.element:first-child {
background-color: green;
color: white;
}
/* last child pseudo class */
.element:last-child {
background-color: gray;
color: black;
}
/* nth child pseudo-class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2>Using <i>Pseudo-Selectors</i> in CSS Rule Sets </h2>
<div class="container">
<div class="element">first child</div>
<div class="element">second child</div>
<div class="element">third child</div>
<div class="element">fourth child</div>
</div>
</body>
</html>
In this tutorial, you learned to use different CSS rule sets. We used class names and IDs as selectors. We also learned to use multiple CSS selectors and nested CSS selectors. In this last example, we learned to use pseudo selectors in CSS rule sets.