CSS Properties Reference 🎨
Complete guide to CSS properties with interactive examples, browser support information, and practical usage patterns. Master everything from basic layout to advanced modern CSS features.
Understanding CSS Properties
CSS properties are the building blocks of web styling. Each property controls a specific aspect of an element's appearance or behavior, from basic colors and fonts to complex animations and layouts.
📚 Property Structure
property-name: value;
Example: color: #3498db;
Key Concepts:
- Inheritance: Some properties inherit values from parent elements
- Cascade: Multiple rules can apply, with specificity determining precedence
- Values: Properties accept different value types (keywords, numbers, colors, functions)
- Shorthand: Many properties have shorthand versions for multiple values
Complete CSS Properties Reference
Reference Features:
- Interactive property cards with live demos
- Browser support information for each property
- Common values and usage examples
- Practical code snippets
- Mobile-responsive design
Interactive Properties Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Properties Reference - Complete Guide</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
background: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.category-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.category-btn.active {
background: #3498db;
color: white;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.property-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.property-card:hover {
transform: translateY(-5px);
}
.property-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.property-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.layout { background: #3498db; }
.typography { background: #9b59b6; }
.color { background: #e74c3c; }
.background { background: #2ecc71; }
.border { background: #f39c12; }
.animation { background: #1abc9c; }
.flexbox { background: #34495e; }
.grid { background: #e67e22; }
.property-name {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.property-description {
color: #7f8c8d;
margin-bottom: 1rem;
line-height: 1.6;
}
.values-list {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.values-list h4 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem;
}
.value-item {
background: white;
padding: 0.5rem;
border-radius: 4px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
border: 1px solid #e9ecef;
}
.example {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 8px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin-top: 1rem;
}
.demo-area {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1rem;
border: 2px dashed #dee2e6;
}
.browser-support {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #ecf0f1;
}
.support-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.supported { background: #d4edda; color: #155724; }
.partial { background: #fff3cd; color: #856404; }
.unsupported { background: #f8d7da; color: #721c24; }
@media (max-width: 768px) {
.properties-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.categories {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 CSS Properties Reference</h1>
<p>Complete guide to CSS properties with examples and browser support</p>
</div>
<div class="categories">
<button class="category-btn active" onclick="filterProperties('all')">All Properties</button>
<button class="category-btn" onclick="filterProperties('layout')">Layout</button>
<button class="category-btn" onclick="filterProperties('typography')">Typography</button>
<button class="category-btn" onclick="filterProperties('color')">Color & Background</button>
<button class="category-btn" onclick="filterProperties('border')">Border & Effects</button>
<button class="category-btn" onclick="filterProperties('animation')">Animation</button>
<button class="category-btn" onclick="filterProperties('flexbox')">Flexbox</button>
<button class="category-btn" onclick="filterProperties('grid')">Grid</button>
</div>
<div class="properties-grid">
<!-- Display Property -->
<div class="property-card" data-category="layout">
<div class="property-header">
<div class="property-icon layout">📐</div>
<div>
<h3>Display</h3>
<p>Controls element's display type</p>
</div>
</div>
<div class="property-name">display</div>
<div class="property-description">
The display property specifies the display behavior of an element. It's fundamental to CSS layout.
</div>
<div class="values-list">
<h4>Common Values:</h4>
<div class="values-grid">
<div class="value-item">block</div>
<div class="value-item">inline</div>
<div class="value-item">inline-block</div>
<div class="value-item">flex</div>
<div class="value-item">grid</div>
<div class="value-item">none</div>
<div class="value-item">inline-flex</div>
<div class="value-item">inline-grid</div>
</div>
</div>
<div class="example">
<span class="comment">/* Basic display examples */</span><br>
.element {<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
}<br><br>
.hidden {<br>
display: none;<br>
}
</div>
<div class="demo-area">
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<div style="padding: 1rem; background: #3498db; color: white; border-radius: 5px;">Block</div>
<div style="display: inline; padding: 0.5rem; background: #e74c3c; color: white; border-radius: 3px;">Inline</div>
<div style="display: inline-block; padding: 1rem; background: #2ecc71; color: white; border-radius: 5px;">Inline-Block</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">12+</span>
</div>
</div>
<!-- Position Property -->
<div class="property-card" data-category="layout">
<div class="property-header">
<div class="property-icon layout">📍</div>
<div>
<h3>Position</h3>
<p>Element positioning method</p>
</div>
</div>
<div class="property-name">position</div>
<div class="property-description">
Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
</div>
<div class="values-list">
<h4>Values:</h4>
<div class="values-grid">
<div class="value-item">static</div>
<div class="value-item">relative</div>
<div class="value-item">absolute</div>
<div class="value-item">fixed</div>
<div class="value-item">sticky</div>
</div>
</div>
<div class="example">
<span class="comment">/* Position examples */</span><br>
.sticky-header {<br>
position: sticky;<br>
top: 0;<br>
background: white;<br>
z-index: 1000;<br>
}<br><br>
.modal {<br>
position: fixed;<br>
top: 50%;<br>
left: 50%;<br>
transform: translate(-50%, -50%);<br>
}
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">12+</span>
</div>
</div>
<!-- Color Property -->
<div class="property-card" data-category="color">
<div class="property-header">
<div class="property-icon color">🎨</div>
<div>
<h3>Color</h3>
<p>Text color specification</p>
</div>
</div>
<div class="property-name">color</div>
<div class="property-description">
Sets the color of an element's text content and text decorations.
</div>
<div class="values-list">
<h4>Color Formats:</h4>
<div class="values-grid">
<div class="value-item">hex (#ff0000)</div>
<div class="value-item">rgb(255,0,0)</div>
<div class="value-item">rgba(255,0,0,0.5)</div>
<div class="value-item">hsl(0,100%,50%)</div>
<div class="value-item">hsla(0,100%,50%,0.5)</div>
<div class="value-item">named colors</div>
</div>
</div>
<div class="example">
<span class="comment">/* Color examples */</span><br>
.primary-text {<br>
color: #3498db;<br>
}<br><br>
.secondary-text {<br>
color: rgba(52, 152, 219, 0.7);<br>
}<br><br>
.accent-text {<br>
color: hsl(204, 70%, 53%);<br>
}
</div>
<div class="demo-area">
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<div style="color: #e74c3c; font-weight: bold;">Red Text</div>
<div style="color: #2ecc71; font-weight: bold;">Green Text</div>
<div style="color: #3498db; font-weight: bold;">Blue Text</div>
<div style="color: rgba(155, 89, 182, 0.7); font-weight: bold;">Transparent Purple</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Flexbox Properties -->
<div class="property-card" data-category="flexbox">
<div class="property-header">
<div class="property-icon flexbox">📦</div>
<div>
<h3>Flexbox</h3>
<p>One-dimensional layout system</p>
</div>
</div>
<div class="property-name">display: flex</div>
<div class="property-description">
Flexbox is a layout model that allows efficient arrangement of items in a container.
</div>
<div class="values-list">
<h4>Key Properties:</h4>
<div class="values-grid">
<div class="value-item">flex-direction</div>
<div class="value-item">justify-content</div>
<div class="value-item">align-items</div>
<div class="value-item">flex-wrap</div>
<div class="value-item">gap</div>
<div class="value-item">flex-grow</div>
</div>
</div>
<div class="example">
<span class="comment">/* Flexbox container */</span><br>
.container {<br>
display: flex;<br>
flex-direction: row;<br>
justify-content: space-between;<br>
align-items: center;<br>
gap: 1rem;<br>
}<br><br>
.item {<br>
flex: 1;<br>
min-width: 100px;<br>
}
</div>
<div class="demo-area">
<div style="display: flex; justify-content: space-around; align-items: center; gap: 1rem; padding: 1rem; background: #34495e; border-radius: 8px;">
<div style="background: #3498db; color: white; padding: 1rem; border-radius: 5px; flex: 1;">Item 1</div>
<div style="background: #e74c3c; color: white; padding: 1rem; border-radius: 5px; flex: 1;">Item 2</div>
<div style="background: #2ecc71; color: white; padding: 1rem; border-radius: 5px; flex: 1;">Item 3</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">29+</span>
<span class="support-badge supported">28+</span>
<span class="support-badge supported">12+</span>
</div>
</div>
<!-- Grid Properties -->
<div class="property-card" data-category="grid">
<div class="property-header">
<div class="property-icon grid">🔲</div>
<div>
<h3>CSS Grid</h3>
<p>Two-dimensional layout system</p>
</div>
</div>
<div class="property-name">display: grid</div>
<div class="property-description">
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer.
</div>
<div class="values-list">
<h4>Key Properties:</h4>
<div class="values-grid">
<div class="value-item">grid-template-columns</div>
<div class="value-item">grid-template-rows</div>
<div class="value-item">grid-gap</div>
<div class="value-item">grid-area</div>
<div class="value-item">grid-template-areas</div>
<div class="value-item">place-items</div>
</div>
</div>
<div class="example">
<span class="comment">/* Grid layout */</span><br>
.grid-container {<br>
display: grid;<br>
grid-template-columns: 1fr 2fr 1fr;<br>
grid-template-rows: auto 1fr auto;<br>
gap: 1rem;<br>
height: 400px;<br>
}<br><br>
.header { grid-column: 1 / -1; }<br>
.sidebar { grid-row: 2; }<br>
.main { grid-column: 2; }
</div>
<div class="demo-area">
<div style="display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0.5rem; padding: 1rem; background: #e67e22; border-radius: 8px;">
<div style="background: #3498db; color: white; padding: 1rem; border-radius: 5px; grid-column: 1 / -1;">Header</div>
<div style="background: #2ecc71; color: white; padding: 1rem; border-radius: 5px;">Sidebar</div>
<div style="background: #9b59b6; color: white; padding: 1rem; border-radius: 5px;">Main Content</div>
<div style="background: #e74c3c; color: white; padding: 1rem; border-radius: 5px;">Right Sidebar</div>
<div style="background: #34495e; color: white; padding: 1rem; border-radius: 5px; grid-column: 1 / -1;">Footer</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">97%</span>
<span class="support-badge supported">57+</span>
<span class="support-badge supported">52+</span>
<span class="support-badge supported">16+</span>
</div>
</div>
<!-- Animation Properties -->
<div class="property-card" data-category="animation">
<div class="property-header">
<div class="property-icon animation">🎬</div>
<div>
<h3>Animation</h3>
<p>CSS animations and transitions</p>
</div>
</div>
<div class="property-name">animation & transition</div>
<div class="property-description">
CSS animations and transitions allow you to animate CSS properties from one value to another.
</div>
<div class="values-list">
<h4>Key Properties:</h4>
<div class="values-grid">
<div class="value-item">transition</div>
<div class="value-item">animation</div>
<div class="value-item">@keyframes</div>
<div class="value-item">transform</div>
<div class="value-item">animation-delay</div>
<div class="value-item">transition-timing-function</div>
</div>
</div>
<div class="example">
<span class="comment">/* Animation examples */</span><br>
.animated-box {<br>
transition: all 0.3s ease-in-out;<br>
animation: slideIn 1s ease-out;<br>
}<br><br>
@keyframes slideIn {<br>
from { transform: translateX(-100%); }<br>
to { transform: translateX(0); }<br>
}<br><br>
.animated-box:hover {<br>
transform: scale(1.1);<br>
}
</div>
<div class="demo-area">
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<div style="background: #3498db; color: white; padding: 1rem; border-radius: 5px; transition: all 0.3s ease; cursor: pointer;"
onmouseover="this.style.transform='scale(1.1)'; this.style.background='#2980b9'"
onmouseout="this.style.transform='scale(1)'; this.style.background='#3498db'">
Hover Me
</div>
<div style="background: #e74c3c; color: white; padding: 1rem; border-radius: 5px; animation: pulse 2s infinite;">
Pulsing
</div>
</div>
<style>
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">96%</span>
<span class="support-badge supported">43+</span>
<span class="support-badge supported">16+</span>
<span class="support-badge supported">12+</span>
</div>
</div>
</div>
</div>
<script>
function filterProperties(category) {
const cards = document.querySelectorAll('.property-card');
const buttons = document.querySelectorAll('.category-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category)) {
btn.classList.add('active');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>Advanced CSS Properties
Modern CSS Features
Explore cutting-edge CSS properties that enable advanced layouts, animations, and visual effects.
backdrop-filter: blur(10px);
aspect-ratio: 16 / 9;
scroll-snap-type: y mandatory;
CSS Custom Properties
Variables in CSS for dynamic theming and consistent design tokens across your application.
:root {
--primary-color: #3498db;
--spacing: 1rem;
}
Advanced Properties Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Properties - Modern CSS Features</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
}
.advanced-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.property-group {
margin-bottom: 2rem;
}
.property-group h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #3498db;
}
.property-item {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid #3498db;
}
.property-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.property-description {
color: #7f8c8d;
margin-bottom: 0.5rem;
}
.demo-container {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
}
.custom-props-demo {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--spacing: 1rem;
--border-radius: 8px;
}
.clip-path-demo {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #3498db, #9b59b6);
margin: 1rem auto;
}
.backdrop-demo {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233498db"/><circle cx="50" cy="50" r="40" fill="%232ecc71"/></svg>');
padding: 2rem;
border-radius: 10px;
position: relative;
}
.backdrop-content {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 1rem;
border-radius: 8px;
color: white;
text-align: center;
}
.aspect-ratio-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.aspect-box {
background: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.scroll-demo {
height: 150px;
overflow-y: auto;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
margin: 1rem 0;
}
.scroll-content {
height: 300px;
}
@media (max-width: 768px) {
.advanced-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Advanced CSS Properties</h1>
<p>Modern CSS features and properties for cutting-edge web design</p>
</div>
<div class="advanced-grid">
<!-- Custom Properties -->
<div class="advanced-card custom-props-demo">
<h2>🎨 CSS Custom Properties (CSS Variables)</h2>
<div class="property-group">
<h3>Variable Declaration & Usage</h3>
<div class="property-item">
<div class="property-syntax">--variable-name: value;</div>
<div class="property-description">
Declare custom properties in :root or any selector
</div>
</div>
<div class="property-item">
<div class="property-syntax">var(--variable-name, fallback)</div>
<div class="property-description">
Use variables with optional fallback values
</div>
</div>
</div>
<div class="demo-container">
<h4>Custom Properties Demo:</h4>
<div style="background: var(--primary-color); color: white; padding: var(--spacing); border-radius: var(--border-radius); margin: 1rem 0;">
Primary Color Box
</div>
<div style="background: var(--secondary-color); color: white; padding: var(--spacing); border-radius: var(--border-radius);">
Secondary Color Box
</div>
</div>
<div class="property-description">
<strong>Benefits:</strong> Dynamic theming, consistent design tokens, JavaScript integration
</div>
</div>
<!-- Clip-path & Shape -->
<div class="advanced-card">
<h2>✂️ Clip-path & Shapes</h2>
<div class="property-group">
<h3>Shape Creation</h3>
<div class="property-item">
<div class="property-syntax">clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</div>
<div class="property-description">
Create complex shapes using polygon coordinates
</div>
</div>
<div class="property-item">
<div class="property-syntax">clip-path: circle(50% at 50% 50%);</div>
<div class="property-description">
Create circular clipping paths
</div>
</div>
</div>
<div class="demo-container">
<h4>Clip-path Examples:</h4>
<div class="aspect-ratio-demo">
<div class="aspect-box" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">Diamond</div>
<div class="aspect-box" style="clip-path: circle(50%);">Circle</div>
<div class="aspect-box" style="clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);">Speech</div>
</div>
</div>
</div>
<!-- Backdrop Filter -->
<div class="advanced-card">
<h2>🌫️ Backdrop Filter</h2>
<div class="property-group">
<h3>Background Effects</h3>
<div class="property-item">
<div class="property-syntax">backdrop-filter: blur(10px);</div>
<div class="property-description">
Apply blur effect to area behind element
</div>
</div>
<div class="property-item">
<div class="property-syntax">backdrop-filter: brightness(1.2) contrast(0.8);</div>
<div class="property-description">
Multiple filter effects combined
</div>
</div>
</div>
<div class="demo-container backdrop-demo">
<h4>Backdrop Filter Demo:</h4>
<div class="backdrop-content">
<h3>Glass Morphism Effect</h3>
<p>This content has a backdrop filter applied</p>
</div>
</div>
</div>
<!-- Aspect Ratio -->
<div class="advanced-card">
<h2>📐 Aspect Ratio</h2>
<div class="property-group">
<h3>Ratio Control</h3>
<div class="property-item">
<div class="property-syntax">aspect-ratio: 16 / 9;</div>
<div class="property-description">
Maintain specific width-to-height ratio
</div>
</div>
<div class="property-item">
<div class="property-syntax">aspect-ratio: 1;</div>
<div class="property-description">
Perfect square ratio
</div>
</div>
</div>
<div class="demo-container">
<h4>Aspect Ratio Examples:</h4>
<div class="aspect-ratio-demo">
<div class="aspect-box" style="aspect-ratio: 16/9;">16:9</div>
<div class="aspect-box" style="aspect-ratio: 4/3;">4:3</div>
<div class="aspect-box" style="aspect-ratio: 1;">1:1</div>
<div class="aspect-box" style="aspect-ratio: 2/3;">2:3</div>
</div>
</div>
</div>
<!-- Scroll Snap -->
<div class="advanced-card">
<h2>📜 Scroll Snap</h2>
<div class="property-group">
<h3>Scroll Behavior</h3>
<div class="property-item">
<div class="property-syntax">scroll-snap-type: y mandatory;</div>
<div class="property-description">
Enable scroll snapping with mandatory alignment
</div>
</div>
<div class="property-item">
<div class="property-syntax">scroll-snap-align: start;</div>
<div class="property-description">
Define snap alignment for child elements
</div>
</div>
</div>
<div class="demo-container">
<h4>Scroll Snap Demo:</h4>
<div class="scroll-demo" style="scroll-snap-type: y mandatory;">
<div class="scroll-content">
<div style="height: 150px; scroll-snap-align: start; background: #3498db; color: white; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0;">
Snap Point 1
</div>
<div style="height: 150px; scroll-snap-align: start; background: #2ecc71; color: white; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0;">
Snap Point 2
</div>
<div style="height: 150px; scroll-snap-align: start; background: #e74c3c; color: white; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0;">
Snap Point 3
</div>
</div>
</div>
</div>
</div>
<!-- Container Queries -->
<div class="advanced-card">
<h2>📱 Container Queries</h2>
<div class="property-group">
<h3>Element-based Responsive Design</h3>
<div class="property-item">
<div class="property-syntax">@container (min-width: 400px) { ... }</div>
<div class="property-description">
Apply styles based on container size
</div>
</div>
<div class="property-item">
<div class="property-syntax">container-type: inline-size;</div>
<div class="property-description">
Define container for query context
</div>
</div>
</div>
<div class="demo-container">
<h4>Container Query Concept:</h4>
<div style="container-type: inline-size; width: 100%; border: 2px dashed #3498db; padding: 1rem;">
<div style="background: #3498db; color: white; padding: 1rem; text-align: center;">
This element responds to its container size
</div>
</div>
<p style="margin-top: 1rem; color: #7f8c8d;">
Note: Container queries are supported in modern browsers. Resize the container to see effects.
</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS Properties Cheatsheet
Quick Reference Guide
Essential CSS properties organized by category for quick lookup and reference during development.
/* Layout Properties */
display: flex | grid | block | inline;
position: relative | absolute | fixed | sticky;
z-index: auto | number;
Complete Cheatsheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Properties Cheatsheet - Quick Reference Guide</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.cheatsheet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.cheatsheet-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.section-icon {
font-size: 2rem;
}
.layout { border-color: #3498db; }
.typography { border-color: #9b59b6; }
.color { border-color: #e74c3c; }
.spacing { border-color: #2ecc71; }
.border { border-color: #f39c12; }
.effects { border-color: #1abc9c; }
.property-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.property-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.property-row:hover {
background: #e9ecef;
}
.property-name {
font-family: 'Fira Code', monospace;
font-weight: 600;
color: #2c3e50;
}
.property-values {
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
color: #7f8c8d;
text-align: right;
}
.quick-examples {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.example-title {
color: #3498db;
margin-bottom: 1rem;
font-weight: 600;
}
.code-block {
background: #34495e;
padding: 1rem;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.usage-tips {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
}
.browser-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.browser-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.browser-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.cheatsheet-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.property-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.property-values {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📋 CSS Properties Cheatsheet</h1>
<p>Quick reference guide for essential CSS properties and values</p>
</div>
<div class="cheatsheet-grid">
<!-- Layout Section -->
<div class="cheatsheet-section layout">
<div class="section-header">
<div class="section-icon">📐</div>
<h2>Layout & Display</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">display</span>
<span class="property-values">block | inline | flex | grid | none</span>
</div>
<div class="property-row">
<span class="property-name">position</span>
<span class="property-values">static | relative | absolute | fixed | sticky</span>
</div>
<div class="property-row">
<span class="property-name">float</span>
<span class="property-values">left | right | none</span>
</div>
<div class="property-row">
<span class="property-name">clear</span>
<span class="property-values">left | right | both | none</span>
</div>
<div class="property-row">
<span class="property-name">z-index</span>
<span class="property-values">auto | number</span>
</div>
<div class="property-row">
<span class="property-name">visibility</span>
<span class="property-values">visible | hidden | collapse</span>
</div>
<div class="property-row">
<span class="property-name">overflow</span>
<span class="property-values">visible | hidden | scroll | auto</span>
</div>
</div>
</div>
<!-- Typography Section -->
<div class="cheatsheet-section typography">
<div class="section-header">
<div class="section-icon">🔤</div>
<h2>Typography</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">font-family</span>
<span class="property-values">Arial, sans-serif | "Times New Roman"</span>
</div>
<div class="property-row">
<span class="property-name">font-size</span>
<span class="property-values">16px | 1rem | 100% | larger</span>
</div>
<div class="property-row">
<span class="property-name">font-weight</span>
<span class="property-values">normal | bold | 100-900</span>
</div>
<div class="property-row">
<span class="property-name">font-style</span>
<span class="property-values">normal | italic | oblique</span>
</div>
<div class="property-row">
<span class="property-name">text-align</span>
<span class="property-values">left | center | right | justify</span>
</div>
<div class="property-row">
<span class="property-name">line-height</span>
<span class="property-values">normal | 1.5 | 24px</span>
</div>
<div class="property-row">
<span class="property-name">text-decoration</span>
<span class="property-values">none | underline | line-through</span>
</div>
</div>
</div>
<!-- Color & Background Section -->
<div class="cheatsheet-section color">
<div class="section-header">
<div class="section-icon">🎨</div>
<h2>Color & Background</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">color</span>
<span class="property-values">#ff0000 | rgb(255,0,0) | red</span>
</div>
<div class="property-row">
<span class="property-name">background-color</span>
<span class="property-values">transparent | color</span>
</div>
<div class="property-row">
<span class="property-name">background-image</span>
<span class="property-values">url() | linear-gradient()</span>
</div>
<div class="property-row">
<span class="property-name">background-size</span>
<span class="property-values">cover | contain | 100% 100%</span>
</div>
<div class="property-row">
<span class="property-name">background-position</span>
<span class="property-values">center | top left | 50% 50%</span>
</div>
<div class="property-row">
<span class="property-name">background-repeat</span>
<span class="property-values">repeat | no-repeat | repeat-x</span>
</div>
<div class="property-row">
<span class="property-name">opacity</span>
<span class="property-values">0-1 | 0.5</span>
</div>
</div>
</div>
<!-- Spacing Section -->
<div class="cheatsheet-section spacing">
<div class="section-header">
<div class="section-icon">📏</div>
<h2>Spacing & Sizing</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">margin</span>
<span class="property-values">0 | auto | 10px | 1rem</span>
</div>
<div class="property-row">
<span class="property-name">padding</span>
<span class="property-values">0 | 10px | 1rem 2rem</span>
</div>
<div class="property-row">
<span class="property-name">width</span>
<span class="property-values">auto | 100% | 300px | 50vw</span>
</div>
<div class="property-row">
<span class="property-name">height</span>
<span class="property-values">auto | 100% | 200px | 50vh</span>
</div>
<div class="property-row">
<span class="property-name">min-width</span>
<span class="property-values">0 | 300px | 50%</span>
</div>
<div class="property-row">
<span class="property-name">max-width</span>
<span class="property-values">none | 1200px | 100%</span>
</div>
<div class="property-row">
<span class="property-name">box-sizing</span>
<span class="property-values">content-box | border-box</span>
</div>
</div>
</div>
<!-- Border Section -->
<div class="cheatsheet-section border">
<div class="section-header">
<div class="section-icon">🔲</div>
<h2>Border & Outline</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">border</span>
<span class="property-values">1px solid #000</span>
</div>
<div class="property-row">
<span class="property-name">border-radius</span>
<span class="property-values">0 | 5px | 50%</span>
</div>
<div class="property-row">
<span class="property-name">border-width</span>
<span class="property-values">1px | thin | medium | thick</span>
</div>
<div class="property-row">
<span class="property-name">border-style</span>
<span class="property-values">solid | dashed | dotted | none</span>
</div>
<div class="property-row">
<span class="property-name">border-color</span>
<span class="property-values">#000 | transparent | currentColor</span>
</div>
<div class="property-row">
<span class="property-name">outline</span>
<span class="property-values">1px solid red | none</span>
</div>
<div class="property-row">
<span class="property-name">box-shadow</span>
<span class="property-values">2px 2px 5px rgba(0,0,0,0.3)</span>
</div>
</div>
</div>
<!-- Effects Section -->
<div class="cheatsheet-section effects">
<div class="section-header">
<div class="section-icon">✨</div>
<h2>Effects & Animation</h2>
</div>
<div class="property-list">
<div class="property-row">
<span class="property-name">transform</span>
<span class="property-values">translate() | rotate() | scale()</span>
</div>
<div class="property-row">
<span class="property-name">transition</span>
<span class="property-values">all 0.3s ease</span>
</div>
<div class="property-row">
<span class="property-name">animation</span>
<span class="property-values">name duration timing delay</span>
</div>
<div class="property-row">
<span class="property-name">filter</span>
<span class="property-values">blur() | brightness() | contrast()</span>
</div>
<div class="property-row">
<span class="property-name">cursor</span>
<span class="property-values">pointer | default | not-allowed</span>
</div>
<div class="property-row">
<span class="property-name">pointer-events</span>
<span class="property-values">auto | none</span>
</div>
<div class="property-row">
<span class="property-name">user-select</span>
<span class="property-values">auto | none | text | all</span>
</div>
</div>
</div>
</div>
<!-- Quick Examples Section -->
<div class="quick-examples">
<div class="example-title">🚀 Common CSS Patterns</div>
<div class="code-block">
<span class="comment">/* Center element horizontally and vertically */</span><br>
.centered {<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
height: 100vh;<br>
}<br><br>
<span class="comment">/* Responsive grid layout */</span><br>
.grid-container {<br>
display: grid;<br>
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));<br>
gap: 1rem;<br>
}<br><br>
<span class="comment">/* Smooth hover transition */</span><br>
.button {<br>
transition: all 0.3s ease;<br>
transform: scale(1);<br>
}<br>
.button:hover {<br>
transform: scale(1.05);<br>
box-shadow: 0 4px 15px rgba(0,0,0,0.2);<br>
}
</div>
</div>
<!-- Usage Tips -->
<div class="usage-tips">
<h3>💡 CSS Best Practices</h3>
<ul>
<li>Use semantic class names that describe purpose, not appearance</li>
<li>Organize CSS with a methodology (BEM, SMACSS, etc.)</li>
<li>Use CSS variables for consistent theming</li>
<li>Leverage the cascade and inheritance</li>
<li>Mobile-first responsive design approach</li>
<li>Use modern layout techniques (Flexbox, Grid)</li>
<li>Optimize for performance with efficient selectors</li>
</ul>
</div>
<!-- Browser Support -->
<div class="browser-support">
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Chrome</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Firefox</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Safari</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Edge</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
</div>
</div>
</body>
</html>Practical Applications & Patterns
🎯 Common Use Cases
- Responsive layouts with Flexbox and Grid
- Interactive animations and transitions
- Custom styling for forms and inputs
- Creating modern card-based designs
- Building navigation menus and headers
- Implementing dark/light theme switching
🔧 Development Workflow
- Start with mobile-first responsive design
- Use CSS variables for consistent theming
- Leverage modern layout techniques
- Test across different browsers
- Optimize for performance
- Use developer tools for debugging
💡 Pro Tips for CSS Mastery
Property Selection:
- Choose the right property for the task
- Understand property inheritance
- Use shorthand properties when appropriate
- Know when to use !important (sparingly)
Performance:
- Use efficient CSS selectors
- Minimize repaints and reflows
- Leverage hardware acceleration for animations
- Use will-change property strategically
Master CSS Properties Today! 🚀
Start exploring CSS properties with interactive examples and practical demos. Build your CSS skills with comprehensive reference materials and real-world usage patterns.