Learn CSS - 10 Code Examples & CST Typing Practice Test

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls layout, colors, fonts, spacing, and visual effects, separating content structure from design.

View all 10 CSS code examples →

CSS Flexbox Centering CSS Grid Gallery CSS Variables and Theming CSS Card Hover Animation CSS Button Ripple Effect CSS Responsive Typography CSS Flexbox Card Layout CSS Animated Loader CSS Gradient Background CSS Sticky Header

Learn CSS with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

CSS Flexbox Centering

body, html {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #f0f0f0;
}

.box {
    width: 200px;
    height: 200px;
    background: #007bff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

Centers content horizontally and vertically using Flexbox.

Let’s Try →

CSS Grid Gallery

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.gallery img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);
}

Creates a responsive image gallery using CSS Grid.

Let’s Try →

CSS Variables and Theming

:root {
    --primary-color: #ff6347;
    --secondary-color: #4caf50;
}

body {
    background: var(--secondary-color);
    color: white;
    font-family: sans-serif;
}

.button {
    background: var(--primary-color);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

.button:hover {
    background: darken(var(--primary-color), 10%);
}

Demonstrates using CSS custom properties for color theming.

Let’s Try →

CSS Card Hover Animation

.card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Adds a smooth scale-up effect on card hover using transitions.

Let’s Try →

CSS Button Ripple Effect

.ripple-button {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    background: #007bff;
    color: white;
    cursor: pointer;
}

.ripple-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    top: 0;
    left: 0;
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.5s, opacity 1s;
}

.ripple-button:active::after {
    transform: scale(2);
    opacity: 0;
    transition: 0s;
}

Creates a ripple effect on button click using pseudo-elements and transitions.

Let’s Try →

CSS Responsive Typography

h1 {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
p {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
}

Adjusts font sizes dynamically using clamp() for responsive text.

Let’s Try →

CSS Flexbox Card Layout

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.card {
    flex: 1 1 200px;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Arranges multiple cards in a responsive Flexbox layout.

Let’s Try →

CSS Animated Loader

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Creates a spinning loader using keyframes animation.

Let’s Try →

CSS Gradient Background

body {
    background: linear-gradient(135deg, #007bff, #6c757d);
    color: white;
    font-family: sans-serif;
}

.radial-box {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #ff6347, #ffeb3b);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

Uses linear and radial gradients for backgrounds.

Let’s Try →

CSS Sticky Header

header {
    position: sticky;
    top: 0;
    background: #007bff;
    color: white;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

Demonstrates a sticky header that stays visible while scrolling.

Let’s Try →

Frequently Asked Questions about CSS

What is CSS?

What are the primary use cases for CSS?

Styling web pages and HTML elements. Responsive design for multiple screen sizes. Creating layouts using Flexbox and Grid. Applying animations and transitions. Theme management and branding for websites

What are the strengths of CSS?

Improves maintainability of web design. Enables responsive layouts across devices. Widely supported by all modern browsers. Powerful visual effects and animations. Integrates with preprocessors like SASS and LESS

What are the limitations of CSS?

Cannot manipulate HTML content directly. Limited logic capabilities (no loops or conditionals natively). Browser inconsistencies in older versions. Complexity grows in large projects without preprocessors. Debugging specificity and inheritance issues can be tricky

How can I practice CSS typing speed?

CodeSpeedTest offers 10+ real CSS code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

CSS Flexbox Centering

body, html {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #f0f0f0;
}

.box {
    width: 200px;
    height: 200px;
    background: #007bff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

Centers content horizontally and vertically using Flexbox.

Let’s Try →

CSS Grid Gallery

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.gallery img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);
}

Creates a responsive image gallery using CSS Grid.

Let’s Try →

CSS Variables and Theming

:root {
    --primary-color: #ff6347;
    --secondary-color: #4caf50;
}

body {
    background: var(--secondary-color);
    color: white;
    font-family: sans-serif;
}

.button {
    background: var(--primary-color);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

.button:hover {
    background: darken(var(--primary-color), 10%);
}

Demonstrates using CSS custom properties for color theming.

Let’s Try →

CSS Card Hover Animation

.card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Adds a smooth scale-up effect on card hover using transitions.

Let’s Try →

CSS Button Ripple Effect

.ripple-button {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    background: #007bff;
    color: white;
    cursor: pointer;
}

.ripple-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    top: 0;
    left: 0;
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.5s, opacity 1s;
}

.ripple-button:active::after {
    transform: scale(2);
    opacity: 0;
    transition: 0s;
}

Creates a ripple effect on button click using pseudo-elements and transitions.

Let’s Try →

CSS Responsive Typography

h1 {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
p {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
}

Adjusts font sizes dynamically using clamp() for responsive text.

Let’s Try →

CSS Flexbox Card Layout

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.card {
    flex: 1 1 200px;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Arranges multiple cards in a responsive Flexbox layout.

Let’s Try →

CSS Animated Loader

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Creates a spinning loader using keyframes animation.

Let’s Try →

CSS Gradient Background

body {
    background: linear-gradient(135deg, #007bff, #6c757d);
    color: white;
    font-family: sans-serif;
}

.radial-box {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #ff6347, #ffeb3b);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

Uses linear and radial gradients for backgrounds.

Let’s Try →

CSS Sticky Header

header {
    position: sticky;
    top: 0;
    background: #007bff;
    color: white;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

Demonstrates a sticky header that stays visible while scrolling.

Let’s Try →

Frequently Asked Questions about CSS

What is CSS?

What are the primary use cases for CSS?

What are the strengths of CSS?

What are the limitations of CSS?

How can I practice CSS typing speed?

CodeSpeedTest offers 10+ real CSS code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.