Default Styles
For removing and adjusting default styling to use modern practices while staying consistent across browsers
Last updated
For removing and adjusting default styling to use modern practices while staying consistent across browsers
Last updated
Though modern CSS and browsers provide consistent and reasonable behavior in User Agents (browsers), a few community libraries can provide a good baseline. Include them in your project, or perhaps better yet, pick and choose which rules make sense for you.
'Reset' stylesheets tend to remove most default styles at once, then reapply those that make sense. 'Normalize' stylesheets adjust styles individually with greater concern for uniform behavior across browsers. Although both provide generally good opinions, it's easier to examine what a 'Normalize' stylesheet exactly adjusts in your project.
In actual use, baseline stylesheets provide a mix of both resets and normalizations. This is particularly true for web designers and CSS design systems, which provide their own opinionated baselines.
These are mostly practical resets to improve layout, positioning, and without having to later remove unnecessary default styles.
Setting media elements from a default display value of inline to block allows for adjusting size and position. Secondly, to ensure any such block-level elements' sizing will be constrained to the dimensions of their parent, we can add max sizing. Although a max-width or max-height of 100% will suffice, max-block-size and max-inline-size will better perform better for international audiences with browser settings for flowing content in varied directions.
By default, form elements use font styles defined by each browser. This creates a disconnect from the surrounding design. To avoid having to explicitly define these elements' styles to those intended, we can set the default to use those inherited from its nearest styled parent element.
The default line-height, or spacing between lines of text, has an average default value of 1.2. When specified without units, it refers to a multiple of the corresponding element's font-size. So a paragraph with a 16px font-size would have an average line-height rendered at 19.2px.
In reality, line-height should variably adjust various font sizes as appropriate.
Large text such as headings, however, will need a smaller default line-height defined, so they don't appear too loose or exaggerated.
By default, text will automatically line-wrap for long sentences by automatically splitting on white space and hyphens. But if there's still not enough space, overlaps and overflows will happen, and scrollbars may appear. By setting the overflow-wrap property to break-word, we allow greater flexibility. While this may be most appropriate for paragraphs and headings, it could be applied as needed to other elements or components too.
For default anchor links that aren't scoped to a class, we can use a regular, underlined style. The code below sets the underline to have a relative thickness while increasing the distance offset from the text. This subtle style can improve perception, particularly in visually dense contexts.
Using max()for the thickness, a browser will choose the larger of the two options: a size relative to the font size or at least 1px thick.
The :focus-visible pseudo-class applies when form input elements have been activated via mouse, tap, or keyboard. Many browsers show a "focus ring" by default.
Interactive elements like links and buttons will also be styled only if activated via keyboard.
In the example below, a single custom property is defined for the selector, while styles are applied using custom properties defined in and outside the selector.
By default, an arrow cursor may appear when hovering over a button element with a mouse. To better convey click-ability, consider changing the cursor property to pointer for buttons and any other elements as needed.
This allows adequate space above or below an element when scrolled to. However, extra padding may be needed if sticky headers are in the viewport.
Below, the :target selector matches when an element is an anchor link target like:
scroll-padding-block-start can add space between targets and the top of the viewport.
scroll-padding-block-end can add space between a focused element and the bottom of the viewport, which can help track the visible focus position.
One or more of these recommendations have been sourced from:
The WCAG (Web Content Accessibility Guidelines) however the line-height to be a minimum of 1.5. This performs better for small text and particularly helps people with visual comprehension impairments like dyslexia.