Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How CSS work under the hood?
CSS (Cascading Style Sheets) is a style sheet language used to add visual effects to web pages. It describes the layout and display of HTML elements, allowing developers to manage multiple web pages simultaneously and implement custom properties that enhance appearance.
Syntax
selector {
property: value;
}
Types of CSS
CSS is classified into three main types
External CSS Uses the
<link>element in the head section to connect external style sheets. Best for managing multiple pages simultaneously.Internal CSS Defined within
<style>elements in the head section. Useful when a single HTML page has unique styling requirements.Inline CSS Applied directly to elements using the
styleattribute. Used for styling individual elements with unique appearances.
Example
The following example demonstrates internal CSS with styled heading and div elements
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
h1 {
text-decoration: underline;
color: #333;
}
div {
width: 300px;
height: 50px;
background-color: green;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>CSS Styling Example</h1>
<div>This is a styled div element</div>
</body>
</html>
An underlined heading appears followed by a green rectangular box with centered white text.
How CSS Works Under the Hood
The browser follows a sophisticated process to calculate final CSS properties for HTML elements
1. Data Accumulation
The browser collects all style declarations from various sources: user agents (browser defaults), author stylesheets, and user preferences. These declarations are filtered and validated for syntax correctness.
2. Cascading
This is the core concept behind "Cascading" Style Sheets. The browser prioritizes declarations using
Source importance (user agent, user, author) and
!importantannotationsSelector specificity
Source order (last declaration wins)
3. Setting Default Values
When no declarations exist for a property, the browser applies default values or inherits values from parent elements.
4. Resolving Relative Values
The browser converts relative units (em, rem, %, vh) and keywords into absolute values where possible, without requiring layout calculations.
5. Layout and Formatting
The browser performs layout calculations, resolving remaining relative values and determining element positions using flexbox, grid, or other layout methods.
6. Final Adjustments
Before rendering, the browser makes environment-specific adjustments like rounding float numbers, adjusting for device pixel density, and font availability.
Conclusion
Understanding how CSS works under the hood helps developers write more efficient stylesheets and debug styling issues effectively. The cascading nature of CSS provides flexibility but requires careful consideration of specificity and source order to maintain manageable code.
570 Views
