Commonly Used CSS Properties - Cheat Sheet
1. Color and Background
color: color: red; color: #333;
background-color: background-color: yellow; background-color: rgba(0,0,0,0.5);
background-image: background-image: url('bg.jpg');
background-size: background-size: cover; contain; 100% 100%;
background-repeat: background-repeat: no-repeat; repeat-x;
background-position: background-position: center center; top left;
background-attachment: background-attachment: fixed; scroll;
opacity: opacity: 0.5; opacity: 1;
2. Text and Font
font-family: font-family: Arial, sans-serif;
font-size: font-size: 16px; 1.5em;
font-weight: font-weight: bold; normal; 400;
font-style: font-style: italic; normal;
text-align: text-align: center; left; justify;
text-decoration: text-decoration: underline; none;
text-transform: text-transform: uppercase; capitalize;
line-height: line-height: 1.5; 2em;
letter-spacing: letter-spacing: 2px;
word-spacing: word-spacing: 4px;
white-space: white-space: nowrap; pre-wrap;
3. Box Model
margin: margin: 10px; 10px 20px; auto;
padding: padding: 10px; 10px 20px;
border: border: 1px solid black;
border-radius: border-radius: 10px; 50%;
Commonly Used CSS Properties - Cheat Sheet
border-style: border-style: solid; dashed;
border-width: border-width: 2px;
border-color: border-color: blue;
box-sizing: box-sizing: border-box;
outline: outline: 2px dashed red;
4. Layout and Position
display: display: block; flex; grid; none;
position: position: relative; absolute; fixed;
top/right/bottom/left: top: 10px; left: 50%;
z-index: z-index: 10; 1000;
overflow: overflow: hidden; scroll;
float: float: left; right;
clear: clear: both; left;
visibility: visibility: hidden; visible;
min/max width/height: min-width: 300px; max-height: 600px;
5. Flexbox
display: display: flex;
flex-direction: flex-direction: row; column;
justify-content: justify-content: center; space-between;
align-items: align-items: stretch; center;
flex-wrap: flex-wrap: wrap; nowrap;
gap: gap: 20px;
flex: flex: 1; 0 1 auto;
align-self: align-self: center; stretch;
6. Grid Layout
display: display: grid;
Commonly Used CSS Properties - Cheat Sheet
grid-template-columns: grid-template-columns: repeat(3, 1fr);
grid-template-rows: grid-template-rows: 100px auto;
gap: gap: 10px; row-gap: 20px;
grid-column/row: grid-column: 1 / 3;
place-items: place-items: center;
7. Transitions & Animations
transition: transition: all 0.3s ease-in-out;
transition-property: transition-property: background-color;
transition-duration: transition-duration: 0.5s;
transition-timing-function: transition-timing-function: ease;
animation-name: animation-name: fadeIn;
animation-duration: animation-duration: 2s;
animation-iteration-count: animation-iteration-count: infinite;
transform: transform: scale(1.2); rotate(45deg);
8. Miscellaneous / Utility
cursor: cursor: pointer; move; not-allowed;
pointer-events: pointer-events: none; auto;
user-select: user-select: none; text;
box-shadow: box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-shadow: text-shadow: 2px 2px 4px #000;
object-fit: object-fit: cover; contain;
aspect-ratio: aspect-ratio: 16/9;
filter: filter: blur(4px); brightness(120%);
