Headings, text and links
Typography is how text looks: heading sizes, line height, spacing between paragraphs. Pico sets it for every text tag, so a blog post reads comfortably without a single line of your own CSS.
Headings and a subtitle
The headings <h1>–<h6> get decreasing sizes and margins. When a heading needs an explanatory line beneath it, wrap both in <hgroup> — Pico makes the second line smaller and muted:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<hgroup>
<h1>A grid without media queries</h1>
<p>March 12 · 5 minute read</p>
</hgroup>
<p>The grid-template-columns property can adapt the number of columns to the screen width by itself.</p>The preview shows a large heading, a grey line with the date under it, and a regular paragraph. Without <hgroup> the date would look like another body paragraph.
Inline emphasis
Pico styles the inline tags from the tutorial:
| Tag | How it looks |
|---|---|
<strong>, <em> | Bold and italic |
<mark> | Yellow highlight |
<small> | Small text |
<code>, <kbd> | Code on grey, a key on dark |
<del>, <ins> | Struck-through and underlined text |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>style.css</code>.</p>
<p><mark>Updated:</mark> the example works in all modern browsers.</p>
<blockquote>
Good layout starts with the right tags.
<footer><cite>— Anna</cite></footer>
</blockquote>
<hr>
<p><small>New posts come out on Fridays.</small></p>The keys look like keyboard buttons, the file name like code, and "Updated" is highlighted. The quote has a bar on the left, and <hr> draws a thin line.
Links
A regular link has the primary color and gets underlined on hover. Less important links take the secondary class (grey), contrasting ones take contrast (the text color):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<p>
<a href="#">Read the post</a> ·
<a href="#" class="secondary">All posts</a> ·
<a href="#" class="contrast">About the author</a>
</p>Three links: blue, grey and almost black. These classes exist only in the regular pico.min.css build.
Common mistake
Picking a heading by its size: putting <h4> under <h1> because <h2> is "too big". Heading levels describe the document structure, and screen readers navigate by them. Use levels in order and change the size with CSS if you must.