Modern CSS Cheatsheet
Your complete guide to CSS with interactive examples and code snippets
Selectors
Element Selector
Selects all elements of the specified type
p {
color: blue;
}
Class Selector
Selects elements with the specified class
.highlight {
background-color: yellow;
}
ID Selector
Selects the element with the specified ID
#header {
font-size: 2rem;
}
Box Model
Margin
Controls space outside the element’s border
.box {
margin: 20px;
}
Padding
Controls space inside the element’s border
.box {
padding: 20px;
}
Content with padding
Border
Controls the element’s border
.box {
border: 2px solid #4361ee;
}
Layout – Flexbox
Flex Container
Defines a flex container
.container {
display: flex;
}
1
2
3
Justify Content
Aligns items along the main axis
.container {
justify-content: center;
}
1
2
3
Align Items
Aligns items along the cross axis
.container {
align-items: center;
}
1
2
3
Responsive Design
Media Queries
Applies styles based on device characteristics
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Fluid Layouts
Using relative units for flexible layouts
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
Viewport Units
Units relative to the viewport size
.header {
height: 100vh;
width: 100vw;
}