What is the use of CSS ruleset ?

How does CSS work under the hood ?

Last Updated : 30 Nov, 2021

Cascading Style Sheets referred to as CSS, is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable.

The way elements should be rendered on screen is described by CSS. CSS applies styling to web pages. More importantly, CSS enables this styling independent of the HTML.

CSS is broadly categorized into 3 types:

Internal CSS
Inline CSS
External CSS

Why use CSS?

Web Development: The basic skill that every web developer should know is HTML and CSS.
Reusability of code: CSS files can be reused in multiple HTML pages where we want to apply some styling.
Attractive website: Adding styles to our website surely makes it more presentable to users.
Easy maintenance: Changes in code need to be made in a single file only.
Enhance user experience: A simple yet beautiful UI helps users to go through the website easily.

Syntax: A CSS comprises style rules sets that comprise of a selector followed by a declaration block. These style rules are interpreted by the browser.

p { 
    background-color: aliceblue; 
    font-size: 18px; 
}

Selector: Selector tells about the HTML element to be styled. In this case, the selector is the “p” element.
Declaration: Each declaration includes a CSS property name and value, separated by a semicolon. In this case, its “background-color” and “font-size”.

Example: In this example, all “h1” elements will be center-aligned, have a green color, and have a font size of 30px.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            color: green; 
            font-size: 30px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        Welcome to GeeksforGeeks 
    </h1>   
</body> 
  
</html> 

Output:

How does CSS work under the hood?

Are you confused whether the HTML will be interpreted before CSS’s interpretation or after? Or will it apply as soon as the browser constructs the DOM. Let’s discuss how it actually works. While displaying a document, the browser must combine the document’s content with style information. The document is processed in a number of stages.

Working:

The browser loads the HTML and is converted into DOM (Document Object Model).
Most of the resources are then fetched that is linked to the HTML document such as embedded videos, images, and linked CSS.
The CSS fetched is then parsed by the browser. Based on the selector type used, it figures out which style is to be applied on which nodes in the DOM and attaches styles to them. These are called render trees.
After the rules have been applied to the render tree, its layout structure should appear.
At the Painting stage, a visual display of the page is shown on the screen.

Now if the CSS is parsed already, the elements in the parsed CSS get styled immediately as soon as they are laid on the page. (Preferred to load in <head>) On the other hand, if CSS is loaded late, elements are shown in their ” unstyled form” until their corresponding styles are parsed known as “Flash Of Unstyled Content”.

The below diagram explains the working of CSS in a more simplified manner.

Limitations of CSS:

Confusion among web browsers due to different levels like CSS, CSS 1 up to CSS3.
Scarce existence of security because of its open text-based system.
Cross-Browser issues, work differently on different browsers.

What is the use of CSS ruleset ?

S

siddharth01

Improve

Article Tags :

Similar Reads

How order of classes work in CSS ?

Many developers are aware of the concept of class overwriting in CSS. Well, is true but when it comes to how these classes are overwritten, most of them get confused. Classes are among the important assets of front-end development. Therefore, it is very important to have clarity about them. The attr

How to use web fonts in CSS ?

While designing web pages, developers use different fonts based on what the text represents and which fonts suit the best. Each system comes with some pre-installed fonts which are called system fonts. Since these are limited, one may come across the need to use a different font other than the pre-i

Why does CSS work with fake elements ?

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML

What is the use of css() method in jQuery ?

In this article, we will see how to use css() method to set the styles on elements dynamically using jQuery. The css() method is used to change the style property of the selected element. basically, The CSS() method is used to get the value of a certain CSS property that has been applied to a specif

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 component

How to Learn CSS in 21 Days ?

Have you ever wondered how an actual website is being created? For those who donâ€™t know, all it requires is knowledge of HTML and CSS to create a simple website. Coming to our todayâ€™s agenda, keeping this in mind, today, with the help of this article, weâ€™re going to share some of the most fascinatin

How does auto property work in margin:0 auto in CSS ?

In this article, we will learn how auto property works in margin:0 auto in CSS. The margin property is used to set the margins for an element. The margin property has four values margin-top, margin-right, margin-bottom, and margin-left. Syntax: margin: top_margin right_margin bottom_margin left_marg

How CSS Positioning and Flexbox Work?

CSS positioning and Flexbox are fundamental tools for web layout and design. Understanding how they work can help you create more responsive and well-structured web pages. CSS positioning allows you to control the placement of elements on the web page. There are several positioning schemes in CSS. T

How to link CSS with HTML Document?

CSS is probably the most powerful style language in web development. It allows you to keep presentations of a document separate from the structure using CSS, making the maintenance and updating of a web page quite easy. CSS provides possibilities to style HTML elements, handle layouts, and create re

What to understand Pure CSS Responsive Design ?

In this article, we will learn about Pure.CSS responsive design. It is a collection of responsive CSS modules that can be included in any web application to create faster, beautiful, and responsive websites. In simple words, it is a framework of CSS that is used to build a beautiful and responsive w