CSS Examples & Practice
CSS Templates
A template is a ready-made page layout you can copy, run and adapt. These three responsive templates — a landing page, a blog and a portfolio — are complete, self-contained HTML documents with modern CSS (flexbox, grid, custom properties). Paste any of them into the live editor, press Run, then change colors and text to make them yours.
How to use these templates
- Click a code block, copy the whole HTML document, and paste it into the Try it Yourself editor.
- Press Run to preview it live in the browser.
- Change the CSS custom properties at the top (colors, spacing) to rebrand instantly.
- Swap the placeholder text and links for your own content.
💡
Each template is a single file with the CSS inside a <style> tag — no build step, no external assets. That makes them ideal for learning and quick prototypes.
Template 1 — Responsive landing page
A hero section with a headline, call-to-action buttons and a three-column feature row that stacks on mobile using CSS grid with auto-fit.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root { --brand:#0f766e; --ink:#1f2937; --bg:#f8fafc; }
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center;
padding:18px 24px; }
.logo { font-weight:800; color:var(--brand); }
nav a { margin-left:18px; text-decoration:none; color:var(--ink); }
.hero { text-align:center; padding:72px 24px; }
.hero h1 { font-size:clamp(28px,5vw,48px); margin-bottom:12px; }
.hero p { color:#475569; max-width:560px; margin:0 auto 24px; }
.btn { display:inline-block; padding:12px 22px; border-radius:8px;
text-decoration:none; font-weight:600; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-ghost { border:1px solid #cbd5e1; color:var(--ink); margin-left:10px; }
.features { display:grid; gap:20px; padding:24px;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
max-width:960px; margin:0 auto 48px; }
.feature { background:#fff; padding:24px; border-radius:12px;
box-shadow:0 4px 16px rgba(0,0,0,.06); }
.feature h3 { color:var(--brand); margin-bottom:8px; }
</style>
</head>
<body>
<header>
<span class="logo">Nimbus</span>
<nav><a href="#">Features</a><a href="#">Pricing</a><a href="#">Sign in</a></nav>
</header>
<section class="hero">
<h1>Ship your ideas faster</h1>
<p>A clean, responsive starting point for your next product landing page.</p>
<a class="btn btn-primary" href="#">Get started</a>
<a class="btn btn-ghost" href="#">Live demo</a>
</section>
<section class="features">
<div class="feature"><h3>Fast</h3><p>Loads in milliseconds with zero bloat.</p></div>
<div class="feature"><h3>Responsive</h3><p>Looks great on phones, tablets and desktops.</p></div>
<div class="feature"><h3>Accessible</h3><p>Semantic markup and readable contrast by default.</p></div>
</section>
</body>
</html>Template 2 — Blog article layout
A centered, readable column with a max width around 70 characters, comfortable line height and a subtle sidebar that drops below the article on narrow screens.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root { --accent:#7c3aed; }
* { box-sizing:border-box; }
body { font-family:Georgia,serif; color:#1f2937; margin:0;
line-height:1.7; background:#fff; }
.wrap { max-width:1040px; margin:0 auto; padding:24px;
display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:820px){ .wrap { grid-template-columns:2.2fr 1fr; } }
article { max-width:68ch; }
h1 { font-size:34px; line-height:1.2; }
.meta { color:#6b7280; font-style:italic; margin-bottom:24px; }
article p { margin:0 0 18px; }
blockquote { border-left:4px solid var(--accent); margin:24px 0;
padding:8px 18px; color:#4b5563; background:#faf5ff; }
aside { font-family:system-ui,sans-serif; font-size:15px; }
aside h4 { border-bottom:2px solid var(--accent); padding-bottom:6px; }
aside a { display:block; color:var(--accent); text-decoration:none;
padding:6px 0; }
</style>
</head>
<body>
<div class="wrap">
<article>
<h1>Writing CSS that lasts</h1>
<p class="meta">By A. Developer · 6 min read</p>
<p>Good stylesheets read like well-organised prose: predictable names, shallow nesting and reusable pieces.</p>
<blockquote>Simplicity is the ultimate sophistication in a design system.</blockquote>
<p>Start from semantic HTML, layer on layout with grid and flexbox, and keep component styles close to their markup.</p>
</article>
<aside>
<h4>Related</h4>
<a href="#">Flexbox in 5 minutes</a>
<a href="#">A modern reset</a>
<a href="#">Fluid typography</a>
</aside>
</div>
</body>
</html>Template 3 — Portfolio grid
A responsive project gallery built with CSS grid. Cards reflow from three columns to one as the screen narrows, and each card lifts on hover.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,sans-serif; background:#0f172a; color:#e2e8f0; }
.intro { text-align:center; padding:56px 24px 24px; }
.intro h1 { font-size:32px; }
.intro p { color:#94a3b8; margin-top:8px; }
.grid { display:grid; gap:20px; padding:24px; max-width:1000px;
margin:0 auto 48px;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.project { background:#1e293b; border-radius:12px; overflow:hidden;
transition:transform .2s, box-shadow .2s; }
.project:hover { transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,.4); }
.thumb { height:140px;
background:linear-gradient(135deg,#06b6d4,#8b5cf6); }
.project .body { padding:16px; }
.project h3 { font-size:18px; margin-bottom:6px; }
.project p { color:#94a3b8; font-size:14px; }
.tag { display:inline-block; margin-top:10px; font-size:12px;
background:#334155; padding:3px 10px; border-radius:999px; }
</style>
</head>
<body>
<div class="intro"><h1>My Work</h1><p>Selected projects and experiments.</p></div>
<div class="grid">
<div class="project"><div class="thumb"></div>
<div class="body"><h3>Weather App</h3><p>Live forecasts with a clean UI.</p><span class="tag">React</span></div></div>
<div class="project"><div class="thumb"></div>
<div class="body"><h3>Recipe Finder</h3><p>Search 10k recipes by ingredient.</p><span class="tag">API</span></div></div>
<div class="project"><div class="thumb"></div>
<div class="body"><h3>Budget Tracker</h3><p>Charts your monthly spending.</p><span class="tag">CSS Grid</span></div></div>
</div>
</body>
</html>ℹ️
These templates use only modern, well-supported CSS. When you are happy with a design, move the CSS from the <style> tag into an external .css file for real projects.