Bookmark this page
CSS Playground
Quick reference for CSS with practice options
Code Runner
You can practice by running CSS examples in a pop-up code runner (which also includes some HTML).
Table of content
CSS Basics
Colors
Learn how to color text and elements in CSS.
<!DOCTYPE html> <html> <head> <title>CSS Colors</title> <style> /* We can define classes or tag-level styling */ h1 { color: green; } p { color: #555; /* using hex code */ } .highlight { color: red; /* using named color */ font-weight: bold; } </style> </head> <body> <h1>Color Example</h1> <p>This paragraph is using a darker shade of gray (#555).</p> <p class="highlight">This one is red and bold!</p> </body> </html>
Backgrounds
Using background colors and gradients.
<!DOCTYPE html> <html> <head> <title>CSS Backgrounds</title> <style> body { background-color: #f0f0f0; /* light gray */ } .box { width: 200px; height: 100px; background-color: pink; margin: 10px 0; } .gradient { width: 200px; height: 100px; background: linear-gradient(to right, #ff6b6b, #ffd93b); } </style> </head> <body> <h1>Background Example</h1> <div class="box"></div> <div class="gradient"></div> </body> </html>
Layout
Box Model
Demonstrating CSS box model with padding, border, margin.
<!DOCTYPE html> <html> <head> <title>CSS Box Model</title> <style> .box { width: 150px; padding: 20px; border: 2px solid #333; margin: 10px; background-color: #eee; } </style> </head> <body> <h1>Box Model Example</h1> <div class="box">Content with padding, border, and margin.</div> </body> </html>
Flexbox
Creating a flexible layout using flexbox.
<!DOCTYPE html> <html> <head> <title>Flexbox Layout</title> <style> .container { display: flex; gap: 10px; border: 2px solid #333; padding: 10px; } .item { flex: 1; background-color: #0070f3; color: white; text-align: center; padding: 20px; } </style> </head> <body> <h1>Flexbox Example</h1> <div class="container"> <div class="item">Box 1</div> <div class="item">Box 2</div> <div class="item">Box 3</div> </div> </body> </html>
Grid Layout
Building a grid layout using CSS Grid.
<!DOCTYPE html> <html> <head> <title>CSS Grid Layout</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; background-color: #eee; padding: 10px; } .grid-item { background-color: #0070f3; color: white; text-align: center; padding: 20px; } </style> </head> <body> <h1>Grid Layout Example</h1> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> </body> </html>
Transitions & Animations
Transitions
Smooth changes to CSS properties on hover or other events.
<!DOCTYPE html> <html> <head> <title>CSS Transitions</title> <style> .box { width: 100px; height: 100px; background-color: #0070f3; transition: background-color 0.5s, transform 0.5s; } .box:hover { background-color: #00c853; /* green */ transform: rotate(20deg) scale(1.2); } </style> </head> <body> <h1>Transition Example</h1> <p>Hover over the box to see transitions.</p> <div class="box"></div> </body> </html>
Keyframe Animations
Using @keyframes to create more complex animations.
<!DOCTYPE html> <html> <head> <title>CSS Animation</title> <style> @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-50px); } 100% { transform: translateY(0); } } .animated-box { width: 100px; height: 100px; background-color: #ff6b6b; animation: bounce 1s infinite; } </style> </head> <body> <h1>Animation Example</h1> <p>The box bounces indefinitely.</p> <div class="animated-box"></div> </body> </html>