CSS reset and normalisation
Browser has its built-in styles, which can vary depending on the operating system or the browser itself. This variation can lead to inconsistencies in how a webpage is displayed to users.
To address this issue, developers use two main techniques: CSS Reset and Normalize CSS. Both methods aim to override the browser's default styles to achieve uniformity, but they do so in different ways.
CSS Reset:
- Overrides default browser styles for consistency
- Removes most default styles completely
- Popular tools include Eric Meyer's Reset and YUI Reset
- Pros: Consistency, control, streamlined development
- Cons: Potential side effects, increased file size, learning curve
Normalize.css:
- Standardizes styles across browsers while keeping useful defaults
- Targets specific elements for consistent appearance
- Pros: Preserves helpful defaults, less drastic changes, improves consistency
- Cons: Possible style conflicts and unwanted styles
While CSS Reset removes all default browser styles to provide a blank canvas, Normalize CSS takes a more balanced approach by maintaining useful default styles and ensuring consistency across browsers.
One of the simplest and most straightforward methods to include CSS reset or normalize in your project. You can use a Content Delivery Network (CDN) link to include these files directly in your HTML's head section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- For Normalize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- OR for a CSS Reset (using Eric Meyer's Reset CSS 2.0) -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> -->
<!-- Your custom styles should come after -->
<link rel="stylesheet" href="your-custom-styles.css">
</head>
<body>
<!-- Your content here -->
</body>
</html>