Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is CSS ruleset ?

  • Last Updated : 20 Aug, 2021

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
Recommended Articles
Page :

Start Your Coding Journey Now!