Global (reset) CSS

Have you ever noticed how websites can have wildly varying visual styles in different browsers?

To combat this inconsistency, we need a global set of styles that aligns default styling across all browsers.

This normalization helps to create more uniform and consistent user interfaces across different browsers and devices.

global.cssDemo (raw html)

Contents

It includes an impressive array of the most used HTML elements that you will undoubtedly need in any web application. Strips away all that unwanted spacing and leaves a clean canvas for your own styles. Also adds font normalization and line height adjustments.

Root elements:

  • html
  • body

Text elements:

  • h1-h6
  • blockquote, quotes
  • b, strong, em, i
  • small
  • address
  • cite
  • dfn
  • code
  • kbd
  • samp
  • pre

List elements:

  • dir
  • menu
  • ol
  • ul
  • dd
  • dl

Media elements:

  • figure
  • picture
  • img
  • video (coming soon)

Table elements:

  • table
  • caption
  • tbody, tfoot, thead
  • th, tr, td

Form elements:

  • fieldset, legend
  • label
  • input[type="text"]
  • input[type="email"]
  • input[type="search"]
  • input[type="range"]
  • select
  • textarea
  • ::placeholder

States:

  • :focus-visible with :focus fallback
  • ::selection, mark

Link & buttons elements:

  • a
  • button
  • input[type="button"]
  • input[type="reset"]
  • input[type="submit"]

Other elements:

  • hr
  • iframe