Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the use of CSS ruleset ?

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!