Global styles

Global styles provide you with good design defaults for a wide selection of HTML elements – all based on your design tokens.

Using global styles is as simple as writing semantic HTML. No class names. No components.

Below are tables of all the elements included in the SmoothCSS global styles. The descriptions explain the intention of the styles rather than the implementation details. This gives us the flexibility to change the implementation details as the browser, HTML and CSS evolve and improve.

There are some common HTML elements that are not covered by the global styles. This is generally for one of two reasons:

1. The styling depends on the context. For example, an <aside> might be used for a callout or a sidebar.
2. The visual styling is not specific to a single HTML element. Like how a visual button could be a <button>, <a>, or <input type="submit">.

In SmoothCSS these types of styles are covered by styling skins.

To make it easier to find the element your looking for, the elements are grouped into the following tables:

• General elements
• Typography
• Lists
• Media
• Tables
• Interactive elements
• Forms

To see all of the global styles in context, please see this example page.

General elements

Typography

Lists

Media

Tables

Interactive elements

Forms