How to use Traditional Reset In CSS
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.
<!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/w3wiki">
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>
*{
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
What is a CSS Reset ?
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