What is the use of CSS ruleset ?

Last Updated : 02 Jun, 2023

In this article, we will learn about the CSS Ruleset & its implementation. The CSS Ruleset is various affirmations to various pieces or elements of the document. The objective is to apply a bunch of properties for certain distinct qualities to a solitary, or a particular arrangement of components in the connected HTML page. It provides a way to declare the key: value pair property with the defined structure for organizing the content in a webpage in an appropriate manner. For instance, consider the following example:

.container {
    padding: 10 px;
}

This is the basic CSS property to apply the padding with a value of 10px for the container class. To understand this, we will break down each component.

The complete declaration is a ruleset.
The .container is a selector. The selector is of 2 types, namely, id selector denoted by hash(#), used to apply the property having the unique id. The second is a class selector denoted by dot(.), used to select all elements which belong to a particular class attribute.
The key/value pair which is separated by a colon in between & ending with a semi-colon is a declaration.
The key is property name & the value is property value, both the key and values are case-insensitive by default in CSS.
The portion in which the curly braces & the properties are declared is declaration block.

The CSS Ruleset is used to apply a set of properties with some define values for the element or a specific set of elements that are used in the HTML page. Please refer to the What is CSS ruleset ? article for further details.

Let’s understand the ruleset in detail through the examples.

Example 1: This example illustrates the use of the CSS ruleset in an appropriate manner.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        /* Selector */
        span {
 
            /* Declaration-block */
            background-color: purple;
            color: white;
            padding: 5px;
            font-size: 15px;
            border-radius: 50px;
        }
 
        .divClass {
            font-family: Sans-serif;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="divClass">
        <h1>GeeksforGeeks</h1>
        <span>A Computer Science portal for Geeks</span>
    </div>
</body>
</html>

Explanation: We have applied all the required properties for the declared HTML elements. We have used the class selector which is used to select all elements which belong to a particular class attribute.

Output:

Example 2: In this example, we have used an id selector that is used to apply the property having the unique id.

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Style of class selector -->
    <style>
        #heading {
            color: green;
            font-size: 40px;
            font-weight: bold;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="heading">GeeksforGeeks</div>
    <p>A Computer Science Portal for Geeks</p>
</body>
</html>