What is a CSS Reset ?

Last Updated : 01 Apr, 2024

A CSS reset is a set of CSS rules that aim to override the default styles provided by web browsers. The purpose of a CSS reset is to establish a consistent design across different browsers by removing any default styling that may vary between them. This creates a certain amount of headaches for developers, who can’t find out how to make their websites look the same in every browser.

Table of Content

Using Traditional Reset
Using Normalize.css

Using Traditional Reset

The traditional CSS reset is a method used to reset default browser styles for HTML elements. It involves setting common CSS properties like margins, padding, and borders to a consistent starting point across all elements.

Syntax:

* {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

Example: This example gives a consistent and clean baseline for styling HTML elements, allowing developers to apply custom styles without interference from default browser styles.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>GFG</title>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
</head>

<body>
    <h2>GFG Social Links</h2>
    <a href="https://in.linkedin.com/company/geeksforgeeks">
          LinkedIn
      </a>
    <a href="https://www.instagram.com/geeks_for_geeks/">
          Instagram
      </a>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>C++</li>
        <li>MERN</li>
    </ul>
</body>

</html>

CSS

*{
    list-style: none;
    margin:0;
    padding: 0;
    text-decoration: none;
    color:black;
    font-weight: normal;
    font-size: 16px;
}

a{
    color:black;
}

Output:

With CSS Reset

Without CSS Reset

Using Normalize.css

Normalize.css is a CSS library that aims to make default browser styles more consistent across different browsers. Unlike traditional CSS resets, which completely remove default styles, Normalize.css preserves useful default styles while normalizing inconsistencies across browsers. Normalize.css is easy to use and can be included in our project by linking to its CSS file in your HTML document.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <!-- Include Normalize.css -->
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #158a00;
        }

        p {
            line-height: 1.6;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <p>Welcome to GeeksforGeeks! We provide high-quality tutorials and articles
        on various programming topics.</p>

    <h2>About GeeksforGeeks:</h2>

    <div>
        <h3>Company Profile and Brand:</h3>
        <p>GeeksforGeeks is a leading platform that provides computer science
            resources and coding challenges for programmers and technology
            enthusiasts, along with interview and exam preparations for upcoming
            aspirants. With a strong emphasis on enhancing coding skills and
            knowledge, it has become a trusted destination for over 12 million
            plus registered users worldwide. The platform offers a vast
            collection of tutorials, practice problems, interview tutorials,
            articles, and courses, covering various domains of computer science.

            Our exceptional mentors hailing from top colleges & organizations
            have the ability to guide you on a journey from the humble
            beginnings of coding to the pinnacle of expertise. Under their
            guidance watch your skills flourish as we lay the foundation and
            help you conquer the world of coding.

        </p>
    </div>

    <div>
        <h3>Company Founders/Directors</h3>
        <p>Our founder Sandeep Jain is a visionary entrepreneur and esteemed
            computer science expert. Fueled by his unwavering passion for coding
            and education, laid the very bedrock upon which GeeksforGeeks stands
            today, and his indomitable spirit has been instrumental in its
            remarkable growth and resounding success. As the steadfast driving
            force behind the company, Sandeep remains a beacon of guidance and
            inspiration, propelling the team to constantly challenging limits
            and craft transformative learning experiences.

            Our CTO, Shikhar Goel has an impeccable track record of developing
            revolutionary products, with their innovative solutions serving as a
            vital catalyst for the remarkable success of GeeksforGeeks. Shikhar,
            the mastermind behind the creation of this platform, has
            demonstrated a progressive approach and an unwavering commitment to
            excellence, propelling the company to become the premier destination
            for coding enthusiasts worldwide.</p>
    </div>
</body>

</html>

Output:

cssreset

Advantages:

Consistency: CSS resets help in achieving consistency across different browsers by removing default styles, ensuring that elements appear the same regardless of the browser being used.
Customization: By resetting default styles, CSS resets provide a clean slate for developers to apply their own styles without worrying about browser-specific defaults interfering with their designs.
Cross-browser Compatibility: CSS resets help mitigate cross-browser compatibility issues by establishing a common baseline for styling, reducing the need for browser-specific works.

Disadvantages:

Overriding Defaults: CSS resets remove all default browser styles, including those that may be useful or desirable. This can lead to additional work for developers, as they must manually reapply styles for basic elements such as headings, paragraphs, and lists.
Increased File Size: Depending on the complexity of the reset, it can add CSS rules to the stylesheet, increasing file size and potentially impacting page load times.
Maintenance Overhead: As web standards evolve and new browsers are released, CSS resets may require updates to remain effective. This can introduce maintenance overhead, especially for large projects with extensive styling requirements.