CSS cheat sheet
96 one-line examples for CSS. Open it while you code, or print it and keep it near the keyboard. Free, with no signup and no ads.
Text and Color
| Code | What it does |
|---|---|
color: red; | Sets the text color. |
background-color: #fff; | Sets the box background color. |
font-size: 16px; | Sets the text size. |
font-weight: bold; | Makes text bold. |
font-family: Arial, sans-serif; | Sets the text font. |
text-align: center; | Centers text in its box. |
text-decoration: underline; | Adds a line under text. |
line-height: 1.5; | Sets space between text lines. |
letter-spacing: 1px; | Adds space between letters. |
text-transform: uppercase; | Changes text to uppercase letters. |
font-style: italic; | Makes text italic. |
opacity: 0.5; | Makes the element partly see-through. |
Box Model
| Code | What it does |
|---|---|
width: 200px; | Sets the element width. |
height: 100px; | Sets the element height. |
padding: 10px; | Adds space inside the border. |
margin: 20px; | Adds space outside the border. |
border: 1px solid black; | Draws a line around the element. |
border-radius: 8px; | Rounds the corners of the box. |
box-sizing: border-box; | Includes padding and border in the width. |
max-width: 100%; | Stops the element from growing too wide. |
min-height: 50px; | Sets the smallest allowed height. |
margin: 0 auto; | Centers a block element horizontally. |
padding: 10px 20px; | Sets vertical and horizontal padding. |
overflow: hidden; | Clips content that leaves the box. |
Layout with Flexbox
| Code | What it does |
|---|---|
display: flex; | Turns the element into a flex container. |
flex-direction: column; | Stacks flex items vertically. |
justify-content: center; | Centers items on the main axis. |
align-items: center; | Centers items on the cross axis. |
gap: 10px; | Adds space between flex items. |
flex-wrap: wrap; | Lets items move to the next line. |
flex: 1; | Lets an item grow to fill space. |
justify-content: space-between; | Pushes items to the outer edges. |
align-self: flex-end; | Aligns one item on the cross axis. |
flex-grow: 2; | Makes an item grow twice as fast. |
order: 1; | Changes the display order of an item. |
display: inline-flex; | Makes an inline flex container. |
Position and Display
| Code | What it does |
|---|---|
display: block; | Makes the element take a full line. |
display: inline; | Makes the element flow with text. |
display: inline-block; | Makes an inline element with box controls. |
display: none; | Hides the element and removes its space. |
position: relative; | Moves the element from its normal place. |
position: absolute; | Places the element against a parent. |
position: fixed; | Keeps the element fixed on the screen. |
position: sticky; | Keeps the element visible while scrolling. |
top: 0; | Sets the top offset of a positioned element. |
z-index: 10; | Sets which element sits on top. |
float: left; | Pushes the element to the left side. |
clear: both; | Stops the element from wrapping floats. |
Selectors
| Code | What it does |
|---|---|
.card { } | Selects elements with class card. |
#header { } | Selects the element with id header. |
a:hover { } | Selects a link under the mouse. |
li:first-child { } | Selects the first list item. |
input:focus { } | Selects a focused input field. |
p + p { } | Selects a paragraph after a paragraph. |
div > p { } | Selects direct child paragraphs. |
* { } | Selects every element on the page. |
[type="text"] { } | Selects elements by attribute value. |
h1, h2 { } | Selects several elements at once. |
li:nth-child(2) { } | Selects the second list item. |
a:not(.active) { } | Selects links without the active class. |
Backgrounds and Borders
| Code | What it does |
|---|---|
background: #eee; | Sets the background color. |
background-image: url(a.png); | Sets an image as the background. |
background-size: cover; | Scales the image to fill the box. |
background-repeat: no-repeat; | Stops the background image from repeating. |
background-position: center; | Places the background image in the center. |
border-top: 2px dashed red; | Draws a dashed line on top. |
border-radius: 50%; | Makes a round shape. |
box-shadow: 0 2px 4px #0003; | Adds a shadow around the box. |
outline: 2px solid blue; | Draws a line outside the border. |
background: linear-gradient(red, blue); | Sets a color gradient background. |
border-collapse: collapse; | Joins table cell borders. |
background-attachment: fixed; | Keeps the background fixed on scroll. |
Transitions and Transforms
| Code | What it does |
|---|---|
transition: all 0.3s ease; | Animates changes over 0.3 seconds. |
transition: color 0.2s; | Animates only the text color. |
transform: scale(1.1); | Makes the element ten percent larger. |
transform: rotate(45deg); | Rotates the element by 45 degrees. |
transform: translateX(10px); | Moves the element right by 10 pixels. |
transform: translate(-50%, -50%); | Centers an element with absolute position. |
cursor: pointer; | Shows a hand cursor on hover. |
transition-delay: 0.1s; | Waits before the transition starts. |
transform-origin: center; | Sets the point for rotation and scaling. |
transition-timing-function: linear; | Makes the transition speed constant. |
transform: skew(10deg); | Slants the element by 10 degrees. |
will-change: transform; | Tells the browser to prepare for changes. |
Responsive and Variables
| Code | What it does |
|---|---|
@media (max-width: 600px) { } | Applies rules on small screens. |
@media (min-width: 768px) { } | Applies rules on wider screens. |
--main-color: #333; | Defines a custom color variable. |
color: var(--main-color); | Uses the custom variable value. |
width: 50vw; | Sets width to half the viewport. |
height: 100vh; | Sets height to the full viewport. |
font-size: 1rem; | Sets size from the root font. |
width: calc(100% - 20px); | Calculates a width with a formula. |
@media (hover: hover) { } | Applies rules on devices with a mouse. |
aspect-ratio: 16 / 9; | Sets a fixed width to height ratio. |
clamp(1rem, 2vw, 2rem); | Sets a size between two limits. |
@media print { } | Applies rules when printing the page. |