# Pico CSS — Minimal Classless CSS Framework for Semantic HTML

> A lightweight CSS framework that styles native HTML elements without requiring utility classes, delivering elegant default styling with a single stylesheet.

## Install

Save in your project root:

# Pico CSS — Minimal Classless CSS Framework for Semantic HTML

## Quick Use
```html
<!-- CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
```
```html
<main class="container">
  <h1>Hello Pico</h1>
  <p>This paragraph is styled automatically.</p>
  <form>
    <input type="email" placeholder="Email" />
    <button type="submit">Subscribe</button>
  </form>
</main>
```

## Introduction
Pico CSS is a minimal, classless CSS framework that applies clean, modern styles to standard HTML elements. Instead of requiring developers to memorize utility classes or component APIs, Pico makes semantic HTML look polished out of the box. It is ideal for prototyping, documentation sites, and small projects where simplicity matters.

## What Pico CSS Does
- Styles all native HTML elements (headings, forms, tables, code blocks) without adding classes
- Provides built-in light and dark mode with automatic OS preference detection
- Ships a responsive grid and container system using minimal markup
- Includes form element styling with built-in validation states
- Offers conditional CSS modules for loading only what you need

## Architecture Overview
Pico CSS is a pure CSS library with no JavaScript. It uses CSS custom properties extensively for theming and ships as a single minified stylesheet under 10 KB gzipped. The framework targets HTML semantic elements via element selectors rather than class selectors, which means existing HTML documents gain styling simply by linking the stylesheet. Optional class-based utilities exist for layout (container, grid) and color schemes.

## Self-Hosting & Configuration
- Link the CDN stylesheet or install via npm with ``npm install @picocss/pico``
- Customize colors and spacing by overriding CSS custom properties
- Use SCSS source files for deeper customization of component styles
- Conditional imports let you load only specific modules (buttons, forms, tables)
- Works with any static site generator, CMS, or HTML page

## Key Features
- Under 10 KB gzipped with zero JavaScript dependencies
- Automatic dark mode based on ``prefers-color-scheme`` media query
- Semantic HTML first approach reduces markup complexity
- 14 color themes available through CSS variable overrides
- Fully responsive typography with fluid scaling

## Comparison with Similar Tools
- **Tailwind CSS** — utility-first with many classes; Pico is classless and styles elements directly
- **Bootstrap** — full component framework with JavaScript; Pico is CSS-only and far smaller
- **Water.css** — similar classless approach but fewer features; Pico adds grid, themes, and form states
- **MVP.css** — minimal classless styling; Pico offers more customization via CSS variables
- **Simple.css** — lightweight semantic CSS; Pico provides more polished form and table components

## FAQ
**Q: Can I use Pico CSS with React or Vue?**
A: Yes. Pico styles native HTML elements, so it works in any framework that renders standard HTML.

**Q: How do I enable dark mode?**
A: Dark mode activates automatically based on the OS setting. You can also force it with ``data-theme="dark"`` on the html element.

**Q: Is Pico CSS suitable for production applications?**
A: Yes, for content-focused sites and admin tools. For complex UIs with many custom components, pair it with a component library.

**Q: Can I use classes alongside Pico?**
A: Yes. Pico provides optional class-based utilities for grid and containers while keeping element-level styling classless.

## Sources
- https://github.com/picocss/pico
- https://picocss.com

---
Source: https://tokrepo.com/en/workflows/asset-7b494903
Author: AI Open Source