Learn by example

CSS Snippets for Beginners

CSS controls how a web page looks and responds to different screen sizes. With a few understandable rules, you can create cards, navigation bars, grids, buttons, loading indicators, and layouts that feel consistent. The examples on this page are small building blocks rather than a substitute for understanding the rules behind them.

Explore examples Ask a question

What you will learn

Learn the box model, the difference between layout systems, and how selectors choose elements. Prefer reusable classes over long chains of selectors. Start with readable spacing and contrast, then add transitions and decorative effects. A design should remain usable with a keyboard, on a small phone, and when a visitor prefers reduced motion.

Understand the box model

Every element is laid out using content, padding, border, and margin. A global box-sizing rule of border-box makes declared widths easier to reason about because padding and borders are included in the specified width. Use padding for space inside a component and margin or layout gaps for space between components. Avoid adding many unrelated spacing values without a consistent scale.

Choose Flexbox or Grid intentionally

Flexbox is useful when items flow along one main axis, such as a navigation row or a group of buttons. CSS Grid is useful when a layout needs rows and columns together, such as a gallery. The repeat and minmax functions can create flexible columns without writing a separate breakpoint for every device. Use wrapping and minimum widths so content does not become cramped.

Build responsive components

Responsive design means the content adapts to the available space. A width such as min(100%, 360px) can keep a card from overflowing while limiting its maximum size. The clamp function can scale text between a minimum and maximum. Use media queries for meaningful layout changes, not to target a long list of specific phone models.

Make interaction states visible

Buttons and links should have clear hover and keyboard focus states. Do not remove the browser outline unless you replace it with an equally visible focus indicator. Keep text contrast strong and avoid using color as the only way to communicate a status. Motion can provide feedback, but animations should not distract from the task or ignore reduced-motion preferences.

Keep CSS maintainable

Use class names that describe the component or role, group related declarations, and remove rules that no longer affect the page. CSS custom properties are useful for shared colors, spacing, and surface values. When debugging, inspect the computed styles and identify which rule wins instead of adding another override at the bottom of the file.

A practical way to learn from a snippet

Read the goal, inspect the markup, and identify which part provides structure, appearance, or behavior. Run the example before editing it. Then make a small change: rename a heading, change a color, add another item, or alter a condition. Predict the result first and compare your prediction with what the browser shows. This habit develops understanding rather than dependence on copy-and-paste.

Copying code responsibly

Examples are starting points, not complete production systems. Replace placeholder names, links, sample data, and image paths before publishing a project. Check licenses and permissions before reusing third-party assets. Never paste API keys, passwords, private tokens, or personal information into a public code example. Review the full snippet before using it, and remove code that does not serve the purpose of your page.

Accessibility is part of good development

Build for keyboard use as well as pointer input. Give form fields labels, use descriptive link text, keep focus indicators visible, and structure content with meaningful headings. Test zoom and narrow screens. If an interactive element changes state, make that state clear to people using assistive technology. Accessibility is not a final decoration; it is part of whether the interface works for real visitors.

From example to complete project

Once a snippet works, move it into a project with a clear file structure. Keep HTML, CSS, and JavaScript organized, use descriptive file names, and remove unused code. Test the result in more than one modern browser when possible. For a live website, check loading speed, broken links, mobile layout, and error messages. Document unusual behavior so future changes are easier.

A short CSS checklist

Check the page at a narrow mobile width and at a wide desktop width. Look for horizontal scrolling, clipped labels, crowded buttons, and text that becomes difficult to read. Use relative units where they help, avoid fixed heights for sections with variable text, and make focus states visible. Verify that decorative backgrounds do not make text unreadable.

Common beginner mistakes

Overusing ids for styling, writing selectors that are too specific, and repeatedly overriding the same property can make a stylesheet difficult to maintain. Avoid relying on hover alone for important information because touch and keyboard users may not have the same interaction. Do not use color as the only status indicator. Test with realistic, longer text as well as short placeholder content.

How to practise with these examples

Change one property at a time and watch what changes. Try replacing a fixed width with a max-width, adding a gap, or changing the grid minimum size. Use browser developer tools to inspect computed values and experiment safely. When the result is correct, remove unused declarations and name the component class according to its role.

Copy and practise

CSS Snippets library

Search these examples by name or topic. Open Edit code and practise to change the example and its CSS. Run edited preview to see your changes in a sandboxed frame; your edits remain in your browser page and are not uploaded.

CSS · Beginner

Gradient Button

Style a button with a smooth gradient, focus state, and hover effect.

<button class="gradient-button">Get started</button>

How it works

Style a button with a smooth gradient, focus state, and hover effect. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.gradient-button{border:0;border-radius:999px;padding:.8rem 1.25rem;color:white;font-weight:700;background:linear-gradient(120deg,#2563eb,#7c3aed);cursor:pointer;transition:transform .2s}.gradient-button:hover{transform:translateY(-2px)}.gradient-button:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}

CSS · Beginner

Responsive Card

Create a reusable card with comfortable spacing, border, and subtle shadow.

<article class="card"><h2>Starter project</h2><p>A clean card layout for a small piece of content.</p></article>

How it works

Create a reusable card with comfortable spacing, border, and subtle shadow. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.card{width:min(100%,360px);padding:1.25rem;border:1px solid #e2e8f0;border-radius:16px;background:white;box-shadow:0 8px 24px rgba(15,23,42,.08);font-family:system-ui,sans-serif}.card h2{margin-top:0}

CSS · Beginner

Flexbox Layout

Align items in a row that can wrap on smaller screens.

<div class="flex-row"><div>One</div><div>Two</div><div>Three</div></div>

How it works

Align items in a row that can wrap on smaller screens. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.flex-row{display:flex;gap:1rem;flex-wrap:wrap}.flex-row div{flex:1 1 120px;padding:1rem;background:#dbeafe;border-radius:10px;text-align:center}

CSS · Beginner

Responsive Grid Gallery

Use CSS Grid to create columns that adapt to available space.

<div class="gallery"><div>Image 1</div><div>Image 2</div><div>Image 3</div><div>Image 4</div></div>

How it works

Use CSS Grid to create columns that adapt to available space. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.gallery div{min-height:100px;display:grid;place-items:center;background:#e0f2fe;border-radius:12px;padding:1rem}

CSS · Beginner

Dark Mode Panel

Use a class and CSS custom properties to make a dark surface.

<section class="panel dark"><h2>Dark mode</h2><p>Use contrast that keeps text easy to read.</p></section>

How it works

Use a class and CSS custom properties to make a dark surface. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.panel{--panel-bg:#fff;--panel-text:#172033;padding:1.25rem;border-radius:14px;background:var(--panel-bg);color:var(--panel-text)}.panel.dark{--panel-bg:#111827;--panel-text:#f9fafb}.panel p{line-height:1.7}

CSS · Beginner

Loading Spinner

Animate a simple spinner and respect reduced-motion preferences.

<div class="spinner" role="status" aria-label="Loading"></div>

How it works

Animate a simple spinner and respect reduced-motion preferences. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.spinner{width:38px;height:38px;border:4px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

CSS · Beginner

Sticky Header

Keep a compact navigation bar visible while scrolling.

<header class="sticky-header"><strong>My Website</strong><nav><a href="#content">Skip to content</a></nav></header><main id="content">Page content goes here.</main>

How it works

Keep a compact navigation bar visible while scrolling. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.sticky-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:1rem;padding:1rem;background:#fff;border-bottom:1px solid #e2e8f0}.sticky-header a{color:#1d4ed8}main{min-height:120vh;padding:1rem}

CSS · Beginner

Gradient Heading

Apply a decorative gradient to heading text while preserving readability.

<h1 class="gradient-heading">Build something useful</h1>

How it works

Apply a decorative gradient to heading text while preserving readability. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.gradient-heading{font-family:system-ui,sans-serif;font-size:clamp(2rem,6vw,4rem);font-weight:850;line-height:1.1;background:linear-gradient(90deg,#2563eb,#9333ea);-webkit-background-clip:text;background-clip:text;color:transparent}

CSS · Beginner

Pricing Card

Design a pricing card with a clear price and action button.

<article class="price-card"><p>Starter</p><h2>$0 <small>/ month</small></h2><p>Good for trying the basics.</p><a href="#start">Choose plan</a></article>

How it works

Design a pricing card with a clear price and action button. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.price-card{max-width:300px;padding:1.5rem;border:1px solid #cbd5e1;border-radius:16px;font-family:system-ui,sans-serif}.price-card h2{font-size:2rem}.price-card small{font-size:.9rem;color:#64748b}.price-card a{display:inline-block;padding:.7rem 1rem;background:#2563eb;color:#fff;border-radius:8px;text-decoration:none}

CSS · Beginner

Tooltip Label

Show a small explanatory label on hover and keyboard focus.

<button class="tip" data-tip="This is extra help">Hover or focus me</button>

How it works

Show a small explanatory label on hover and keyboard focus. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.tip{position:relative;padding:.7rem 1rem;border:1px solid #cbd5e1;border-radius:8px;background:white}.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:.45rem .6rem;border-radius:6px;background:#111827;color:white;white-space:nowrap;opacity:0;pointer-events:none}.tip:hover::after,.tip:focus-visible::after{opacity:1}

CSS · Beginner

Image Overlay Card

Place readable text over a background image with a gradient overlay.

<article class="image-card"><h2>Explore nature</h2><p>A short description goes here.</p></article>

How it works

Place readable text over a background image with a gradient overlay. Start by changing the sample content to fit your project, then test the result at a narrow screen width and with keyboard navigation. Keep the markup, styling, and behavior easy to identify, and remove any sample values you do not need.

Related styling example

.image-card{min-height:240px;display:flex;flex-direction:column;justify-content:end;padding:1.5rem;color:white;border-radius:16px;background:linear-gradient(0deg,rgba(15,23,42,.9),rgba(15,23,42,0)),url('https://placehold.co/720x400') center/cover}.image-card h2{margin:0 0 .4rem}

Practice note: examples are educational starting points. Check the code, replace placeholder data, and test accessibility, responsive behavior, and any required security controls before using it in a live project.

Frequently Asked Questions

What are CSS snippets?

They are small reusable rules or component examples that demonstrate a particular layout, style, or visual effect.

Where should I put the CSS?

For a real project, a separate stylesheet is usually easiest to maintain. Small demos may use a style block for convenience.

Why does my CSS not apply?

Check the stylesheet path, selector spelling, class names, syntax, and whether another rule overrides the property.

Are these CSS snippets responsive?

The examples aim to be adaptable, but test each component with your actual content and screen sizes before publishing.

Should I use animations everywhere?

No. Use motion only when it helps, keep it subtle, and respect reduced-motion preferences.