What is the use of CSS ruleset ?

30 Aug, 2021
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 the 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>
Output:
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.