What Pico CSS is
Pico CSS is a small CSS framework that styles plain HTML tags. You write the semantic markup from the tutorial — <header>, <article>, <button>, <form> — and add one stylesheet. You hardly need classes: headings, buttons, fields and tables look neat straight away. The course is built on Pico 2.
A classless framework
A classless framework styles tag and attribute selectors instead of its own classes. Compare the same button:
| Framework | Button markup |
|---|---|
| Bootstrap | <button class="btn btn-primary"> |
| Tailwind | <button class="px-4 py-2 rounded bg-blue-600 text-white"> |
| Pico | <button> |
Pico does have a few classes — for the grid, the container and button variants — but the page itself does without them.
When Pico fits
| Task | Why Pico |
|---|---|
| A prototype | The page looks decent within a minute |
| Documentation, a README site | Readable text, tables, code |
| A small site, blog, portfolio | Little CSS, clean HTML |
| Study projects | No hundreds of classes to learn |
If you need a unique design or a complex interface with dozens of components, Bootstrap or Tailwind is a better choice — that is the topic of the last lesson.
In this course we build Anna's personal page: a blog with posts, a project portfolio and a contact form.
Adding it from a CDN
A CDN is a network of servers that hands out popular files. Create a project folder with an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anna's blog</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
<h1>Hi, I'm Anna</h1>
<p>I write about layout and build small websites.</p>
<button>Contact me</button>
</main>
</body>
</html>Open the file in a browser: a large heading, readable spaced text and a blue button with rounded corners. The container class limits the content width and centers it. The @picocss/pico@2 address always points to the latest Pico 2 release.
How the course examples work
From now on, examples are fragments of the <body> content. Each starts with the <link> line so the preview under the code loads Pico itself:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<h2>Latest posts</h2>
<p>Three notes on CSS grid and one on forms.</p>
<button>Read the blog</button>The preview shows a level-two heading, a paragraph and a button, styled without a single class.
Common mistake
Building markup out of <div> and <span> only. Pico styles meaningful tags: a <div> saying "Send" does not become a button, and a <div> instead of <nav> does not turn into a menu. The more precisely you choose tags, the more Pico does for you.