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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...