CSS Properties Cheat Sheet
Text Properties
color:
Use: Sets text color
Syntax: color: red;
font-size:
Use: Sets text size
Syntax: font-size: 16px;
font-family:
Use: Sets the font
Syntax: font-family: Arial, sans-serif;
font-weight:
Use: Sets thickness of text
Syntax: font-weight: bold;
font-style:
Use: Italicizes text
Syntax: font-style: italic;
text-align:
Use: Aligns text
Syntax: text-align: center;
text-decoration:
Use: Adds underline, line-through, etc.
Syntax: text-decoration: underline;
line-height:
Use: Sets space between lines
Syntax: line-height: 1.5;
letter-spacing:
Use: Space between letters
Syntax: letter-spacing: 2px;
word-spacing:
Use: Space between words
Syntax: word-spacing: 4px;
CSS Properties Cheat Sheet
text-transform:
Use: Uppercase/lowercase/capitalize text
Syntax: text-transform: uppercase;
Box Model Properties
margin:
Use: Outside space of an element
Syntax: margin: 10px;
padding:
Use: Inside space of an element
Syntax: padding: 15px;
border:
Use: Sets border
Syntax: border: 1px solid black;
width:
Use: Sets element width
Syntax: width: 300px;
height:
Use: Sets element height
Syntax: height: 200px;
box-sizing:
Use: Defines how width/height are calculated
Syntax: box-sizing: border-box;
Background Properties
background-color:
Use: Sets background color
Syntax: background-color: #f0f0f0;
background-image:
Use: Sets background image
Syntax: background-image: url('img.jpg');
background-size:
Use: Sets background size
CSS Properties Cheat Sheet
Syntax: background-size: cover;
background-repeat:
Use: Repeat image or not
Syntax: background-repeat: no-repeat;
background-position:
Use: Position of image
Syntax: background-position: center;
Positioning and Layout
display:
Use: Sets display type (block, flex, grid, etc.)
Syntax: display: flex;
position:
Use: Position element (relative, absolute, etc.)
Syntax: position: absolute;
top / left / right / bottom:
Use: Offsets for positioned elements
Syntax: top: 10px;
z-index:
Use: Stack order
Syntax: z-index: 10;
float:
Use: Float element left or right
Syntax: float: left;
clear:
Use: Stops float wrapping
Syntax: clear: both;
Flexbox
display:
Use: Turns container into flexbox
Syntax: display: flex;
CSS Properties Cheat Sheet
flex-direction:
Use: Row or column layout
Syntax: flex-direction: row;
justify-content:
Use: Align items horizontally
Syntax: justify-content: space-between;
align-items:
Use: Align items vertically
Syntax: align-items: center;
flex-wrap:
Use: Wrap flex items
Syntax: flex-wrap: wrap;
flex:
Use: Control flex item sizing
Syntax: flex: 1;
Grid
display:
Use: Turns container into grid
Syntax: display: grid;
grid-template-columns:
Use: Defines columns
Syntax: grid-template-columns: 1fr 1fr;
grid-template-rows:
Use: Defines rows
Syntax: grid-template-rows: auto 100px;
gap:
Use: Sets space between grid items
Syntax: gap: 20px;
grid-column / grid-row:
Use: Position items
Syntax: grid-column: 1 / 3;
CSS Properties Cheat Sheet
Animation and Transition
transition:
Use: Smooth property changes
Syntax: transition: all 0.3s ease;
animation:
Use: Animates element
Syntax: animation: slide 3s infinite;
@keyframes:
Use: Defines animation steps
Syntax: @keyframes slide { from { left: 0; } to { left: 100px; } }
Others
overflow:
Use: Controls overflow behavior
Syntax: overflow: auto;
visibility:
Use: Shows/hides element
Syntax: visibility: hidden;
opacity:
Use: Transparency
Syntax: opacity: 0.5;
cursor:
Use: Mouse pointer appearance
Syntax: cursor: pointer;
box-shadow:
Use: Adds shadow to element
Syntax: box-shadow: 2px 2px 5px gray;
border-radius:
Use: Rounds corners
Syntax: border-radius: 10px;
