Interesting Facts About CSS
Last Updated :
11 Jul, 2025
CSS (Cascading Style Sheets) is what makes websites look good. While HTML provides the structure, CSS adds colours, fonts, and layouts to create visually appealing designs. It ensures a smooth and consistent appearance across all browsers. The "Cascading" part refers to how styles are layered and applied, ensuring everything fits together perfectly.
Here are some interesting facts about CSS
- Invented by Håkon Wium Lie: CSS was created by Håkon Wium Lie at CERN with Tim Berners-Lee. It was designed to separate content from design, making websites easier to style and more flexible.
- CSS: Successor of Agros: CSS is the successor to Agros, an earlier styling language created by Pierre S. Agros. Agros helped separate design from content, but CSS improved on it, offering more control and flexibility for designers.
- CSS Variables Make Customization Easier:CSS Variables (also known as Custom Properties) allow developers to define reusable values that can be referenced throughout a stylesheet.
- Responsive Design: CSS helps designers create websites that automatically adjust to different screen sizes and devices, making websites look good on phones, tablets, and desktops.
- CSS for Accessibility: CSS plays an important role in making websites more accessible. For example, you can use CSS to improve the visual presentation of content for users with disabilities.
- Pseudo-Classes and Pseudo-Elements: CSS provides powerful tools called pseudo-classes and pseudo-elements to apply styles to elements based on their state or structure, without needing to add additional classes or JavaScript.
- Web Performance: While CSS is used for presentation, it can also impact the performance of a website. Optimizing CSS is an essential practice for improving the loading times and responsiveness of web pages.
- Support for Custom Fonts: For many years, web design was limited to the fonts available on the user's device. However, @font-face allows designers to import custom fonts.
- CSS Is Declarative, Not Imperative: CSS is a declarative language where you define the desired style, and the browser handles the implementation, unlike imperative languages like JavaScript, which specify step-by-step instructions.
- CSS Is Not Just for Web Pages: While CSS is most commonly associated with web design, it can also be used in other contexts, such as in email templates, mobile apps (using React Native or NativeScript), and even in print media.
Important Concepts About CSS
- Evolved Significantly Over the Years: The CSS has changed dramatically since its introduction, with new features and techniques added to make it more powerful and flexible. Some key milestones include
- CSS2: Released in 1998, CSS2 added more layout controls, including the ability to define media types and position elements.
- CSS3: Released in 1999, CSS3 introduced major enhancements
- CSS4 (Work in Progress): While there isn't an official "CSS4" specification, new features are constantly being added to CSS through modules. The CSS Working Group continues to develop features such as CSS Grid Layout, CSS Variables (Custom Properties), and CSS Subgrid.
- Can be written in 3 ways: CSS offers three main ways to apply styles to HTML elements.
- Inline CSS: Styles are applied directly within HTML tags using the style attribute.
- Internal CSS: Styles are defined in the <style> tag inside the <head> section of an HTML document.
- External CSS: Styles are stored in a separate .css file, which is then linked to the HTML document using the <link> tag.
- Cascading in CSS: It refers to the way styles are applied to elements. If multiple styles are applied to the same element, they "cascade" in a specific order of precedence. The order of precedence is generally as follows:
- Inline styles (styles defined directly on HTML elements using the style attribute).
- !important declarations (these override all other styles, regardless of their source).
- Internal styles (styles defined within the <style> tag in the HTML document).
- External styles (styles defined in linked .css files).
- User styles (styles set by the user, like custom browser settings or user-defined stylesheets).
- CSS Validator : The CSS Validator checks your stylesheets for errors and ensures they meet web standards, improving code quality and compatibility, In this you can paste your CSS code or you can add your complete web file as it is with HTML and CSS or you can even add your CSS file to it.
CSS Interesting Practical Uses
CSS Hover Effects
CSS hover effects are simple but powerful ways to make elements interactive when the user hovers over them. Hover means whenever a user takes his/her mouse onto an element.
HTML
<html>
<head>
<style>
.box {
margin-left: 300px;
margin-top: 200px;
width: 150px;
height: 150px;
background-color: lightblue;
transition: transform 0.3s;
}
.box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output
Hover EffectThe .box element will grow in size when hovered over, thanks to the scale() transform and a smooth transition effect the scale method helps to increase the size of an element with respect to its original size.
CSS Flexbox for 2D designs
Flexbox makes centering elements both vertically and horizontally very easy and efficient. It also helps us to create 2 dimensional designs in our document.
HTML
<html>
<head>
<style>
.container {
position: relative;
left: 100px;
top: 300px;
height: 200px;
width: 200px;
border: 2px solid black;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
color: aliceblue;
}
.box {
height: 100px;
width: 100px;
border: 2px solid black;
background-color: brown;
}
p {
margin-top: 100px;
margin-left: 100px;
color: aliceblue;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
Box
</div>
</div>
<p>Container</p>
</body>
</html>
Output
Centred the box inside the container using flexboxThe .box is perfectly centered inside the .container both vertically and horizontally using Flexbox's justify-content and alig-items.
CSS Gradients for Beautiful Backgrounds
CSS gradients allow you to create smooth color transitions for backgrounds, making them look modern and visually appealing.
HTML
<html>
<head>
<style>
.box {
height: 200px;
width: 200px;
border: 2px solid black;
background: linear-gradient(to right, pink, violet);
position: relative;
left: 300px;
top: 300px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
Output
Creating a visually appealing background using linear-gradientThis code creates a box with class named as class and with the help of linear-gradient property in CSS we can create any number of color transitions and mixtures making our website more visually appealing.
CSS Variables for Reusable Values
CSS variables store values that can be reused throughout your stylesheet, making it easier to maintain consistent styling.
HTML
<html>
<head>
<style>
:root {
--mycolor: blue;
}
.box {
position: relative;
height: 200px;
width: 200px;
left: 300px;
top: 200px;
border: 2px solid black;
background-color: var(--mycolor);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
Output
CSS variable magic:root is the block in which you can create variables consider it as the main block of your CSS code where you can allocate memory to the variables just like we do it in the other languages like C, C++, etc.