What is the use of CSS ruleset ?
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:
Please Login to comment...