Skip to content
Related Articles

Related Articles

What is CSS ruleset ?

Improve Article
Save Article
  • Last Updated : 20 Aug, 2021
Improve Article
Save Article

A 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. 

Visualization of CSS Ruleset :

CSS ruleset

The “.” in the beginning indicates that the rule created will be a class, also “container” indicates the name of the selector. Similarly “first-child” indicates the pseudo-class, and elements inside curly brackets are elements of a declaration block, which contains some CSS properties and their corresponding values. The CSS ruleset will be applied when the selector name is called on the main HTML page. 

CSS Ruleset is the main building block of the CSS stylesheet.

Example 1: The following code demonstrates the application of CSS ruleset on various HTML elements. The class name is used to give property and its corresponding values. The :first-child selector is used to selecting those elements which are the first-child elements as implemented below for the HTML “p” element. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Rulesets in CSS</title>
    <style>
        h1 {
            color: green;
        }
        /* Selector */
        p:first-child{ 
             
            /* Declaration-block */
            background-color: green;
            color: white;
            font-size: 15px;
            border-radius: 50px        
            ;
            text-transform: uppercase                
            ;
            font-weight: bold;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div>
        <p>Welcome To Largest Computer Science portal</p>
  
        <h1>GeeksforGeeks</h1>
        <h2>CSS Rulesets</h2>
  
        <p>GeeksforGeeks </p>
  
    </div>
</body>
</html>


Output : 

Example 2: The following code also applied some of the different CSS ruleset for various HTML elements.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Rulesets in CSS</title>
    <style>
      h1 {
        color: green;
      }
        
      /* Selector */
      span {
          
        /* Declaration-block */
        background-color: green;
        color: white;
        padding: 5px;
        font-size: 15px;
        border-radius: 50px;
        text-transform: uppercase;
      }
  
      h2 {
        font-size: small;
      }
  
      .divClass {
        font-family: "Franklin Gothic Medium", 
                     "Arial Narrow", Arial, sans-serif;
      }
  
      body {
        text-align: center;
      }
    </style>
  </head>
  
  <body>
    <div class="divClass">
      <span> This website is for geeks </span>
      <h1>GeeksforGeeks</h1>
      <h2>
        A CSS ruleset is applying various <br />
        affirmations to various pieces of the document.
      </h2>
    </div>
  </body>
</html>


Output:       

CSS ruleset


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!