Global style examples

Most approaches to CSS have some kind of a reset to get to a standard base. Some, like Tailwind, go much further and get rid of all styling. Which you then need to add back one utility class at a time.

This seems like a wasted opportunity.

With CSS you can layer styles – replacing what doesn't work with what does. So why not set good defaults that work most of the time?

This is the apprach we take with SmoothCSS. Set good defaults and only change them when you need to.

This article showcases all the styles you get with base HTML tags. There is a bit of spacing added between each element, but the rest of the styles are the SmoothCSS global defaults.

Alright, let's get into it.

Typgography

This paragraph has many of the HTML tags you'll need to format text. Handy tags like emphasis, strong and small. Also you can cover abbreviations with the abbr (<abbr>) element, and deleted text with <del>. And don't forget inserted text which uses the <ins> tag.

For quotes you have an inline and block option. For inline quotes simply use the <q> tag around your quoted text.

Blockquotes are a bit more involved and are covered in the next section, which you can skip to with this example a link. There's not much distance to travel, but you'll notice smooth scrolling is added in the global styles. And as an extra detail, anchor elements have top margin so they don't hit the top of the window.

When referencing keyboard keys you can use the <kbd> tag to make it clear: shift.

Like you've already seen, you can reference code with the <code> tag. An example code block is shown below.

And if you want to show a sample of computer output, the <samp> tag has you covered: Keyboard not found - press F1 to continue.

If you want to write some basic formulas use the <var> tag to reference a variable. For example, the volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. You can also use subscript (<sub>) (CH₃) and superscript (<sup>) (a² = b² + c²).

Blockquote styles

Will you marry me? Did he leave you any money? Answer the second question first.

A cite should only be used if the quote source can be linked to.

This is a long h2 to test for line-height and balance – it's also a link to check heading link styles

This is a filler sentence to check the spacing above and below the <hr> element.

And this is more filler text below the horizontal rule. This text doesn't even need to make sense, just fill the space. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.

Lists, lists, glorious lists

Lists in various forms.

A simple undordered list

• List item one
• List item two
• List item three, which is a longer item to make sure our marker styles work well for multi-line list items
• List item four

An ordered list

1. List item one
2. List item two
3. List item three, which is a longer item to make sure our marker styles work well for mult-line list items
4. List item four

Nested undordered lists

• Level 1 list item one
  • Level 2 list item one
    • Level 3 list item one
    • Level 3 list item two
  • List 2 list item two
• List 1 list item two
• List 1 list item three

Nested ordered lists

1. Level 1 list item one
   1. Level 2 list item one
      1. Level 3 list item one
      2. Level 3 list item two
   2. List 2 list item two
2. List 1 list item two
3. List 1 list item three

And finally a mix of both

• Level 1 list item one
  88. Level 2 list item one (starting at 88 to check two digit numbers)
      • Level 3 list item one
      • Level 3 list item two
  89. List 2 list item two
• List 1 list item two
• List 1 list item three

Description lists

Description lists are not used often but can be useful.

A description list term

A description list detail

Another term

A slightly longer details element to work with.

Sometimes description lists have multiple details:

This term introduces two details

This is the first one

This is the second one, which is a bit longer

Code blocks / preformatted text

h1 {
  font-size: clamp(2.25rem, 6.25vw + 1rem, 6rem);
}

Tables

Sometimes, a table also has column headers:

Details and summary

Forms

Buttons aren't included in global styles because we often want the same "button" stying for different HTML elements (e.g. <button>, <input type="submit"> and <button>). Instead of using the HTML tag we apply button stylings with CSS classes.

Images, figures, pictures and videos

All images need an alt attribute. Even if you if it's a decorative image, like the one below, it should include an emtpy value of the alt attribute.

An image in a figure with a caption

A picture element

A video element

All of the headings

Generally you should only be using headings up to level 4, because if you’re getting into 5 and 6, you probably want to simplify your content.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.