Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How CSS work under the hood?
CSS (Cascading Style Sheets) is a style sheet language which used to add visual effects to the web page. It is used to describe the page layout and display of HTML elements. A good deal of time is saved via CSS. Multiple web pages' layouts can be managed simultaneously using it. It enables the developers to implement various custom properties to the different elements which enhances the appearance of your web page. In this article, we will learn about CSS and how does it work.
CSS is basically classified into 3 types −
External CSS - On every page, the element is used, and the link> tag belongs in the head section. Use the external style sheet if you want to make changes to several pages at once. It is excellent in this circumstance because it enables you to alter the appearance of the entire website by modifying only one file.
Inline CSS - An internal style sheet may be utilized if a single HTML page has a unique style. The style> element in the head section contains the definition of the internal style.
Internal CSS - To give a single element a unique appearance, use an inline style. Use inline styles by adding the style attribute to the appropriate element. The style attribute is a container for any CSS property.
Syntax
selector{
property: value;
}
Example
Given below is an example of how to use CSS within a HTML page. Here, we have inline CSS. The h1 element is underlined, while the div element is green colored.
<!DOCTYPE html>
<html>
<head>
<title> Using CSS within a HTML page </title>
<style>
h1{
text-decoration: underline;
}
div{
width: 30%;
height: 30px;
background-color: green;
}
</style>
</head>
<body>
<h1> Inline CSS </h1>
<div> This is an example. </div>
</body>
</html>
Why should we use CSS?
Time Saving- It provides substantial time savings. Since CSS style definitions are kept in separate CSS files, altering one of those files might have an impact on the entire website.
Multiple Attributes - Compared to plain HTML, CSS offers more precise options for determining the appearance and feel of a website.
Fast page loading - When using CSS, HTML tag attributes do not always need to be written. It is possible to write a rule for a tag only once and have it apply to all instances of that tag. Because CSS uses less code, downloading is quicker.
Website maintenance - A website needs it for maintenance. By just changing the style, all of the components on the web page will instantaneously update if we need to make a global modification to the file. The website's design may be readily modified thanks to the CSS file's flexibility.
ulti-device compatibility - We can use CSS with previous language versions since it has traditionally been compatible with them. Because of this, if the CSS application is created using an earlier version of a programming language and the developer merges it with more recent developments, CSS may be easily integrated with the required adjustments, allowing the developer to successfully update the existing code. Multiple device types can be accommodated by content using CSS.
Working of CSS under the hood
The actual procedure of calculating the final CSS property for a given HTML element is a series of extremely sophisticated steps −
Data Accumulation
At this stage, all style declarations for a specific element are gathered from various sources such as user agents, writers, and users. These declarations must be filtered and validated in order to determine whether they are from stylesheets that are now applicable to this document and are syntactically valid.
Cascading
The word CSS stands for Cascading Style Sheets, which is the essential concept of CSS. This phase must be thoroughly understood because it is the only one that is heavily influenced by developers as author origin. This phase takes an unordered list of declarations collected in the previous step and arranges them in descending order of priority using the following criteria −
Based on a mix of declaration sources (user agent, user, author, transition, animation) and !important annotation.
Based on the specificity of the selector
Based on the order in which they are written
Setting Default Values
When there are no declarations, this step is invoked when attempting to set a value for a CSS property of an element.
Fixing
To get maximum flexibility in responsive design, we use several relative units (auto, em, rem, vh), relative URLs, percentages, or certain human readable keywords (small, normal, bold). This stage will attempt to resolve as many property values as feasible without laying the document, performing network queries, or getting values from somewhere other than its parent.
Formatting
This phase will format the whole document and complete any leftover work from the previous step by attempting to compute the absolute theoretical value utilized in the document's layout. This stage focuses on scenarios such as relative coordination of elements, auto layout, and flex layout. It necessitates several calculations but yields nearly completely useable absolute numbers for browsers to utilize.
Final Changes
Before drawing, this final stage will perform several modifications dependent on the surfing environment, such as browser engine, media kinds, device pixel density, or OS systems. Rounding float numbers to integer values or changing font size based on available fonts are two frequent changes.
Conclusion
Because the CSS cascade is one of the most misunderstood aspects of CSS (and frequently the source of many errors), understanding how it works will offer you a significant advantage in keeping your stylesheets manageable. However, more accountability comes with greater understanding of the CSS cascade. The more specialized sections of the cascade (such as !important, inline styles, and the id selector) produce stylesheets that are more difficult to alter or override in the future.
261 Views
