Reset CSS

Reset CSS is a set of CSS rules designed to reset the default styles applied by web browsers to HTML elements. The purpose of a reset CSS is to create a consistent baseline style across different browsers and devices, allowing web developers to start styling from scratch without being affected by the browser’s default styles. It typically includes rules that remove margins, paddings, list styles, and other default styles from HTML elements, making it easier for developers to create their own styles without worrying about conflicting with the browser’s defaults. Reset CSS is not always necessary, and its use depends on the specific needs of each project.

Why use reset css

Here are some reasons why you might want to use a reset CSS:

1. Consistent styling: Different browsers have different default styles for HTML elements, which can make your web page look inconsistent across different devices and browsers. A reset CSS ensures that your web page has a consistent starting point for styling.
2. Cross-browser compatibility: By resetting the default styles applied by browsers, a reset CSS can help ensure that your web page looks and behaves consistently across different browsers and platforms.
3. Easier development: A reset CSS can save you time and effort when developing a web page, as it provides a standardized set of styles to work with.
4. More control: A reset CSS can give you more control over the styling of your web page, as it removes the default styles that can sometimes interfere with your custom styles.

Overall, using a reset CSS can help you create a more consistent, cross-browser compatible, and controlled web page styling experience for your users.

Some key features of reset CSS include:

1. Resetting Default Styles: Reset CSS resets the default styles of HTML elements to a standardized value, which ensures consistency in the appearance of a website across different browsers and devices.
2. Universal Selector: Reset CSS applies the reset styles to all HTML elements using the universal selector. This ensures that no element is left out and all elements are treated equally.
3. Box Sizing: Reset CSS sets the box-sizing property to border-box for all elements. This ensures that the padding and border of an element are included in its total width and height.
4. Font and Text Styles: Reset CSS sets the font and text styles to a standard value to ensure consistency across different browsers and devices.
5. Margin and Padding: Reset CSS sets the margin and padding of HTML elements to 0, which ensures that no element has any default margin or padding.
6. List Styles: Reset CSS sets the list styles to none for all list elements. This ensures that no bullet points or numbering are displayed by default.
7. Link Styles: Reset CSS sets the link styles to a standard value, which ensures consistency in the appearance of links across different browsers and devices.
   
   

   /* Box sizing rules */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   /* Reset margin and padding */
   html,
   body,
   div,
   span,
   applet,
   object,
   iframe,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   blockquote,
   pre,
   a,
   abbr,
   acronym,
   address,
   big,
   cite,
   code,
   del,
   dfn,
   em,
   img,
   ins,
   kbd,
   q,
   s,
   samp,
   small,
   strike,
   strong,
   sub,
   sup,
   tt,
   var,
   b,
   u,
   i,
   center,
   dl,
   dt,
   dd,
   ol,
   ul,
   li,
   fieldset,
   form,
   label,
   legend,
   table,
   caption,
   tbody,
   tfoot,
   thead,
   tr,
   th,
   td {
     margin: 0;
     padding: 0;
     border: 0;
     vertical-align: baseline;
   }
   
   /* Set font-size to 16px and font-family to sans-serif */
   body {
     font-size: 16px;
     line-height: 1.5;
     font-family: Arial, sans-serif;
     background-color: #fff;
     color: #000;
   }
   
   /* Remove list styles */
   ul,
   ol {
     list-style: none;
   }
   
   
   /* Remove border outline for form elements */
   button,
   input,
   select,
   textarea {
     outline: none;
     border: none;
   }
   
   /* Remove default hyperlink styling */
   a {
     text-decoration: none;
     color: inherit;
   }
   
   /* Remove default table border */
   table {
     border-collapse: collapse;
     border-spacing: 0;
   }
   
   /* Remove default button styles */
   button {
     background-color: transparent;
     cursor: pointer;
   }
   
   /* Remove default input styles */
   input {
     border: none;
     background-color: transparent;
   }
   
   /* Set default max width */
   .container {
     max-width: 1200px;
     margin: 0 auto;
   }
   
   /* removr default style */
   blockquote:before,
   blockquote:after,
   q:before,
   q:after {
     content: "";
     content: none;
   }