Interesting Facts About CSS

Last Updated : 11 May, 2026

CSS (Cascading Style Sheets) is what makes websites look good. While HTML provides the structure, CSS adds colours, fonts, borders and shadows to create visually appealing designs.

  • Adds style, colours, fonts, and layouts to HTML elements.
  • Maintains consistency and responsiveness across different browsers.

Facts about CSS

  • Invented by Håkon Wium Lie: CSS was created at CERN with Tim Berners-Lee to separate content from design for easier styling and flexibility.
  • Successor of Agros: CSS built on Agros, offering greater control and flexibility for designers.
  • CSS Variables: CSS variables allow reusable custom values to simplify stylesheet maintenance.
  • Responsive Design: Enables websites to automatically adjust to phones, tablets, and desktops.
  • Accessibility: Improves visual presentation for users with disabilities.
  • Pseudo-Classes & Pseudo-Elements: Pseudo-classes and pseudo-elements allow you to style elements based on their state or structure without needing extra classes or JavaScript.
  • Web Performance: Optimized CSS enhances loading times and responsiveness.
  • Custom Fonts: @font-face allows importing and using custom fonts beyond device defaults.
  • Declarative Language: CSS is a declarative language, defining desired styles while the browser handles their implementation.
  • Beyond Web Pages: CSS can be used in emails, mobile apps (React Native, NativeScript), and print media.

Important Concepts About CSS

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

  • Selectors: New ways to target elements using selectors patterns to select specific elements in a document.
  • Borders and Shadows: Round corners (border-radius) and box shadows (box-shadow).
  • Gradients: Background gradients without images.
  • Animations and Transitions: CSS animations to create dynamic effects without JavaScript.

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: Inline CSS applies styles directly within HTML tags using the style attribute, allowing quick styling for individual elements.
  • Internal CSS: Internal CSS defines styles within a <style> tag inside the <head> section of an HTML document, allowing you to apply styles to multiple elements on the same page.
  • External CSS: External CSS stores styles in a separate .css file, which is linked to the HTML document using the <link> tag, allowing consistent styling across multiple pages.

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 has many practical uses, from styling text and layouts to creating animations, responsive designs, and enhancing accessibility across websites and applications.

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
<!--Driver Code Starts-->
<html>

<head>
<!--Driver Code Ends-->

    <style>
        .box {
            margin-left: 300px;
            width: 150px;
            height: 150px;
            background-color: lightblue;
            transition: transform 0.3s;
        }

        .box:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<!--Driver Code Starts-->

<body>
    <div class="box"></div>
</body>

</html>
<!--Driver Code Ends-->

The .box element will grow in size when hovered over, thanks to the scale() transform and a smooth transitions 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
<!--Driver Code Starts-->
<html>

<head>
<!--Driver Code Ends-->

    <style>
        .container {
            position: relative;
            left: 100px;
            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 {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            color: aliceblue;
        }

<!--Driver Code Starts-->
    </style>
</head>

<body>

    <div class="container">

        <p>Container</p>

        <div class="box">
            Box
        </div>

    </div>

</body>

</html>
<!--Driver Code Ends-->

The .box is perfectly centered inside the .container both vertically and horizontally using Flexbox's justify-content and align-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
<!--Driver Code Starts-->
<html>

<head>

<!--Driver Code Ends-->

    <style>
        .box {
            height: 200px;
            width: 200px;
            border: 2px solid black;
            background: linear-gradient(to right, pink, violet);
            position: relative;
            left: 300px;
        }
    </style>
</head>

<!--Driver Code Starts-->

<body>
    <div class="box">

    </div>
</body>

</html>
<!--Driver Code Ends-->

This 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
<!--Driver Code Starts-->
<html>

<head>
<!--Driver Code Ends-->

    <style>
        :root {
            --mycolor: blue;
        }

        .box {
            position: relative;
            height: 200px;
            width: 200px;
            left: 300px;
            border: 2px solid black;
            background-color: var(--mycolor);
        }
    </style>
</head>

<!--Driver Code Starts-->

<body>
    <div class="box">
    </div>
</body>

</html>
<!--Driver Code Ends-->

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.

Comment
Article Tags:
GBlog
CSS-Basics
CSS-Misc

Explore