Published on: July 2026 | By: Lovejeet Singh, CodeSardar
Hello friends! 👋
If you're learning web development, CSS is one of the most important technologies you'll use. It controls how your website looks, feels, and responds on different devices. Whether you're designing a simple webpage or building a modern web application, understanding CSS is essential.
Instead of searching for individual CSS properties every time, wouldn't it be helpful to have everything in one place?
In this complete CSS Cheat Sheet, you'll learn the most commonly used CSS properties, selectors, layouts, Flexbox, Grid, positioning, animations, responsive design techniques, and much more. Think of this guide as a quick reference that you can bookmark and revisit whenever you need it.
💡 My Experience
When I first started learning CSS, I constantly switched between documentation and tutorials just to remember simple properties. Over time, I created my own notes that grouped related properties together. Having a structured cheat sheet saved a lot of time while building websites, and that's exactly what this guide aims to provide.
What Is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance of HTML elements.
With CSS you can:
Change colors
Set fonts
Create layouts
Build responsive websites
Add animations
Design buttons
Control spacing
Create modern user interfaces
Basic CSS Syntax
selector {
property: value;
}
Example:
h1{
color: blue;
font-size:40px;
}
CSS Selectors
| Selector | Example | Description |
|---|---|---|
| Universal | * | Selects every element |
| Element | p | Selects all paragraphs |
| Class | .box | Selects elements with a class |
| ID | #header | Selects one unique element |
| Group | h1,p | Selects multiple elements |
| Child | div > p | Direct child selector |
| Descendant | div p | Nested elements |
| Adjacent | h1 + p | Next sibling |
| General Sibling | h1 ~ p | All following siblings |
| Attribute | [type=text] | Attribute selector |
Typography Properties
Common properties include:
font-family
font-size
font-weight
font-style
line-height
letter-spacing
word-spacing
text-align
text-transform
text-decoration
text-shadow
white-space
Color & Background
Frequently used properties:
color
background
background-color
background-image
background-size
background-position
background-repeat
background-attachment
opacity
Box Model
Every HTML element follows the CSS Box Model.
Margin
└── Border
└── Padding
└── Content
Properties:
width
height
padding
margin
border
outline
box-sizing
Display Properties
| Property | Purpose |
|---|---|
| block | Full width |
| inline | Only content width |
| inline-block | Inline with width support |
| flex | Flexible layout |
| grid | Grid layout |
| none | Hide element |
Position Properties
static
relative
absolute
fixed
sticky
Useful with:
top
right
bottom
left
z-index
Flexbox Cheat Sheet
Display:
display:flex;
Popular properties:
Container:
flex-direction
justify-content
align-items
flex-wrap
gap
align-content
Items:
flex
flex-grow
flex-shrink
order
align-self
CSS Grid Cheat Sheet
Display:
display:grid;
Useful properties:
grid-template-columns
grid-template-rows
grid-area
grid-column
grid-row
gap
place-items
justify-items
align-items
Spacing Properties
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
Border Properties
border
border-width
border-style
border-color
border-radius
Shadow Effects
box-shadow:
text-shadow:
filter: drop-shadow();
Transform Properties
translate()
rotate()
scale()
skew()
matrix()
Transition Properties
transition:
transition-duration:
transition-delay:
transition-property:
transition-timing-function:
Animation Properties
animation
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-fill-mode
animation-direction
animation-play-state
Overflow
overflow
overflow-x
overflow-y
Values:
visible
hidden
scroll
auto
Cursor Styles
Examples:
pointer
move
help
text
wait
progress
not-allowed
crosshair
zoom-in
Object Fit
Useful for images.
object-fit:cover;
object-fit:contain;
Responsive Design
Common techniques:
Media Queries
Relative Units
Flexbox
CSS Grid
Clamp()
Min()
Max()
Example:
@media(max-width:768px){
}
CSS Units
Absolute Units:
px
cm
mm
in
Relative Units:
%
em
rem
vh
vw
vmin
vmax
ch
ex
CSS Variables
:root{
--primary:#4CAF50;
}
button{
color:var(--primary);
}
Useful Pseudo Classes
:hover
:focus
:active
:checked
:disabled
:first-child
:last-child
:nth-child()
:not()
Useful Pseudo Elements
Image/Diagram Suggestions
Consider adding these visuals to improve understanding:
CSS Box Model diagram
Flexbox layout illustration
CSS Grid layout example
Position property comparison
Margin vs Padding visual
Responsive design breakpoints
CSS selector hierarchy chart
💡 My Recommendation
Don't try to memorize every CSS property. Instead, understand the purpose of each group—such as typography, layout, spacing, and animations—and practice them by building small projects. The more websites you create, the more naturally these properties will become part of your workflow.
💡 Pro Tip
Bookmark this cheat sheet and use it as a quick reference while coding. Professional developers also rely on documentation and cheat sheets instead of memorizing every property.
⚠️ Note
Browser support varies for some modern CSS features. Before using newer properties in production, check compatibility with the browsers your audience uses.
Quick Summary Table
| Category | Includes |
|---|---|
| Selectors | Element, Class, ID, Attribute |
| Typography | Fonts, Text, Line Height |
| Colors | Backgrounds, Gradients |
| Layout | Flexbox, Grid |
| Position | Relative, Absolute, Fixed |
| Effects | Shadow, Transform |
| Animation | Transition, Keyframes |
| Responsive | Media Queries, Units |
| Variables | CSS Custom Properties |
Common Beginner Mistakes
Avoid these mistakes:
Using too many
!importantrules.Forgetting
box-sizing: border-box.Mixing
pxandreminconsistently.Overusing absolute positioning.
Ignoring mobile responsiveness.
Creating deeply nested selectors.
Repeating the same CSS instead of using reusable classes.
Interesting Facts
CSS was first introduced in 1996.
Modern CSS includes powerful layout systems like Flexbox and Grid.
CSS can create complex animations without JavaScript.
Variables help keep large stylesheets organized.
Most websites today rely on responsive CSS to work across phones, tablets, and desktops.
Conclusion
CSS is much more than just colors and fonts—it is the foundation of modern web design. By understanding selectors, layouts, spacing, animations, responsive techniques, and reusable styling patterns, you can build websites that are attractive, accessible, and easy to maintain.
Keep this cheat sheet bookmarked and return to it whenever you need a quick reminder. With regular practice, you'll spend less time searching for properties and more time building amazing websites.
Frequently Asked Questions (FAQs)
1. What is CSS used for?
CSS is used to style HTML pages by controlling colors, layouts, fonts, spacing, animations, and responsive design.
2. Is CSS difficult to learn?
No. CSS is beginner-friendly, especially when learned alongside HTML through practical projects.
3. What is the difference between Flexbox and Grid?
Flexbox is designed for one-dimensional layouts (rows or columns), while Grid is ideal for two-dimensional layouts involving both rows and columns.
4. What are CSS variables?
CSS variables, also called custom properties, allow you to define reusable values that can be referenced throughout your stylesheet.
5. Why is responsive design important?
Responsive design ensures that your website looks and functions well on devices of all screen sizes, from smartphones to desktop computers.
6. Should I learn Flexbox before Grid?
Yes. Flexbox is generally easier to understand and is commonly used for many everyday layout tasks before moving on to CSS Grid.
7. Can I build a complete website using only HTML and CSS?
Yes. Static websites can be built entirely with HTML and CSS. JavaScript is only needed when you want interactive or dynamic features.
