Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the use of CSS ruleset?
CSS stands for Cascading Style Sheets. It is used to style HTML elements and control the visual presentation of web pages. A CSS ruleset is the fundamental building block that defines how HTML elements should be styled.
A CSS ruleset contains two main parts: a selector and a declaration block. The selector targets specific HTML elements, while the declaration block contains CSS properties and their values.
Syntax
selector {
property: value;
property: value;
}
In the above syntax, the selector identifies which HTML elements to style, and the declaration block (enclosed in curly braces) contains one or more CSS properties with their corresponding values.
Components of CSS Ruleset
| Component | Description |
|---|---|
| Selector | Targets HTML elements (class, id, element name, etc.) |
| Declaration Block | Contains CSS properties and values enclosed in { } |
| Property | The style attribute to be changed (color, font-size, etc.) |
| Value | The setting for the property |
Example 1: Class Name Selector
The following example uses class names as selectors to style different div elements
<!DOCTYPE html>
<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 Ruleset</h2>
<div class="one">First Box</div>
<div class="two">Second Box</div>
<div class="three">Third Box</div>
</body>
</html>
Three styled boxes appear: a red box with green border, a green box with yellow border, and a blue box with pink border. Each has white text and consistent padding.
Example 2: ID Selector
This example demonstrates using ID selectors to style HTML elements uniquely
<!DOCTYPE html>
<html>
<head>
<style>
#card {
width: 200px;
height: 300px;
background-color: grey;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
#content1 {
width: 100px;
height: 80px;
background-color: blue;
border-radius: 8px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
#content2 {
width: 100px;
height: 80px;
background-color: green;
border-radius: 8px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2>Using ID Selectors in CSS Ruleset</h2>
<div id="card">
<div id="content1">HTML</div>
<div id="content2">CSS</div>
</div>
</body>
</html>
A grey card container with rounded corners appears, containing two smaller boxes: a blue box labeled "HTML" and a green box labeled "CSS", both with white text and rounded corners.
Example 3: Multiple Selectors
This example shows how to apply the same styles to multiple elements using comma-separated selectors
<!DOCTYPE html>
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
padding: 15px;
width: 300px;
border-radius: 5px;
}
.text1 {
background-color: red;
color: white;
font-size: 1.2rem;
}
.text2 {
background-color: green;
color: white;
font-size: 1.1rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2>Using Multiple Selectors in CSS Ruleset</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>
Three styled paragraphs appear: a red paragraph, a green paragraph, and a blue paragraph. All share common padding and margin but have different colors and font sizes.
Example 4: Descendant Selector
This example demonstrates nested selectors to style elements based on their parent-child relationship
<!DOCTYPE html>
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
font-size: 1.1rem;
margin: 10px;
}
div .link:hover {
color: darkred;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Using Descendant Selectors in CSS Ruleset</h2>
<div>
<a href="#" class="link">Link inside div</a>
<a href="#" class="link">Another link inside div</a>
</div>
<br>
<a href="#" class="link">Link outside div (not styled)</a>
</body>
</html>
Two red links appear inside the div container, while the link outside the div remains with default browser styling. The descendant selector only affects links within the div element.
Conclusion
CSS rulesets are essential for styling web pages. They consist of selectors (to target elements) and declaration blocks (containing style properties). Understanding different selector types allows you to create precise and efficient stylesheets for your web projects.
716 Views
