Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of CSS ruleset?
CSS stands for the cascading style sheet. It is used to style the HTML element. HTML is used to create web pages or add content to web pages. After that, the developer uses CSS to render the HTML content in a particular style to make it look awesome.
The CSS ruleset contains mainly two parts. One is a CSS selector, and another is a declaration block.
The CSS selector is used to select HTML elements, and the declaration block contains the CSS properties in the key-value format to apply to the HTML element.
Syntax
Users can follow the syntax below to use the CSS ruleset to style the HTML element.
selector {
/* declaration block */
}
In the above syntax, ‘selector’ can be the HTML element's class name, id, etc., to select the HTML element. The declaration block contains multiple CSS properties with its value to apply to the HTML element.
Example 1 (CSS Classname Selector)
In the example below, we have used the class name as a CSS selector while defining the CSS ruleset. We have three div elements in the code below containing the different class names. We have selected every div element by its class name and applied different CSS styles, which users 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 the <i> class selector </i> in CSS ruleset </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 example below, we have used the id of the HTML element as a CSS selector while defining the CSS ruleset. In HTML, two elements can never contain the same id.
Here, we have a div element with the ‘card’ id, which contains two more div elements with the id equal to the ‘content1’ and ‘content2’. We have styled all HTML elements by accessing them by their id, which users can observe in the output.
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: grey;
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 the <i> id selector </i> in CSS ruleset </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
Example 3 (CSS Multiple Selectors)
In the example below, we have used the multiple CSS selector to apply the same CSS style on multiple HTML elements in a single go.
We have three <p> elements with different class names and IDs. In the CSS, we have used the ‘.text1, .text2, #para1’ CSS selector to apply the same style added in the declaration block to all HTML elements.
Also, we have separately selected all three HTML elements using the class name and id CSS selector to apply different styles on the different elements.
<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 the <i> Multiple selector </i> in CSS ruleset </h2>
<p class = "text1"> This is the first paragraph </p>
<p class = "text2"> This is a second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
Example 4 (CSS Nested Elements Selector)
In the example below, we have introduced the nested selectors of CSS. In HTML, the div element contains the multiple <a> element with the class name ‘link’.
In CSS, we have used the ‘div .link’ CSS selector, which selects all HTML elements with the class name ‘link’ and the descendent of the div element. If we use the ‘div.link’ as a CSS selector, it applies styles on all div elements which has a class name ‘link’. So, ‘div.link’ and ‘div .link’ are both different CSS selectors.
In the output, users can observe that CSS style is applied on all <a> HTML elements, which are the descendent of the div element but not applied on the element which is outside of the div element.
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> Using the <i> nested selectors </i> in CSS ruleset </h2>
<div>
<a href = "#" class = "link"> Link1 </a>
<a href = "#" class = "link"> Link2 </a>
<a href = "#" class = "link"> Link3 </a>
</div><br>
<a href = "#" class = "link"> Link 5 </a>
</body>
</html>
Example 5 (CSS Pseudo Selector)
In this example, we have demonstrated using the CSS pseudo selector. There are various CSS pseudo-selectors, and we have used some of them here.
Here, we have a ‘container’ div element which contains the 4 child elements with the ‘element’ class name. We have used the ‘:hover’ pseudo selector to change the background color of the ‘container’ div element when users hover over the div element.
After that, we used the ‘:first-child’, ‘:last-child’, and ‘:nth-child()’ CSS selectors with the ‘.element’ selector to select the first child, last child, and nth-child, respectively.
In the output, users can observe that different CSS styles applied to the first child, last child, and second child.
<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: grey;
color: black;
}
/* nth child pseudo class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2> Using the <i> pseudo selectors </i> in CSS ruleset </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>
Users learned to use the different CSS rulesets in this tutorial. We used the class name and id as a selector. Also, we learned to use multiple CSS selectors and nested CSS selectors. In the last example, we learned to use the pseudo selectors in the CSS ruleset.
327 Views
