CSS CheatSheet – A Quick Guide for Beginners & Developers

This CheatSheet covers these all topics from basic to advance concept of CSS

1. CSS Selectors

p { color: blue; }              /* element selector */
#id { color: red; }             /* id selector */
.class { color: green; }        /* class selector */
* { margin: 0; }                /* universal selector */

div p { color: purple; }        /* descendant */
div > p { color: pink; }        /* direct child */
div + p { color: orange; }      /* adjacent sibling */
div ~ p { color: teal; }        /* general sibling */

input[type="text"] { color: blue; }
a[target="_blank"] { color: red; }

ul li:first-child { font-weight: bold; }
ul li:last-child { font-style: italic; }
ul li:nth-child(2) { color: orange; }

2. Colors

color: red;
color: #ff0000;
color: rgb(255,0,0);
color: rgba(255,0,0,0.5);
color: hsl(0,100%,50%);
opacity: 0.8;

3. Text

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: none;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

4. Box Model

width: 200px;
height: 100px;
max-width: 100%;
min-height: 50px;
margin: 10px auto;
padding: 20px;
border: 2px solid black;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
box-sizing: border-box;

5. Background

background-color: lightblue;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-clip: content-box;
background-origin: border-box;

background: linear-gradient(to right, red, yellow);
background: radial-gradient(circle, red, yellow, green);

6. Display & Positioning

display: block;
display: inline;
display: inline-block;
display: none;

visibility: hidden;

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

float: left;
clear: both;

z-index: 100;

overflow: hidden;
overflow-x: auto;
overflow-y: scroll;

7. Flexbox

display: flex;
flex-direction: row;
flex-direction: column-reverse;

justify-content: center;
justify-content: space-between;

align-items: center;
align-self: flex-start;

gap: 10px;
flex-wrap: wrap;

flex: 1;

8. Grid

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-auto-rows: minmax(100px, auto);

gap: 10px;

grid-column: 1 / 3;
grid-row: 1 / 2;

align-items: start;
justify-items: center;
place-items: center;

9. Transitions & Animations

div {
  transition: all 0.3s ease-in-out;
}
div:hover {
  transform: scale(1.1) rotate(5deg);
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

div {
  animation: bounce 1s infinite alternate;
}

animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

10. Common Units

px → pixels  
% → relative to parent  
em → relative to parent font size  
rem → relative to root font size  
vh / vw → viewport height / width  
fr → grid fraction unit  
ch → width of "0" character  
ex → height of lowercase "x"  
vmin / vmax → relative to viewport smallest/largest dimension  

11. Pseudo-classes & Pseudo-elements

a:hover { color: red; }
a:active { color: green; }
a:visited { color: purple; }

p::first-letter { font-size: 24px; }
p::before { content: " "; }
p::after { content: " "; }

input:focus { border: 2px solid blue; }
input:disabled { background: #ccc; }

:root { --main-color: blue; }

12. CSS Variables

:root {
  --main-color: #3498db;
  --padding: 10px;
}
div {
  color: var(--main-color);
  padding: var(--padding);
}

13. Transformations

transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(20deg, 10deg);
transform-origin: center;

14. Filters

filter: blur(5px);
filter: brightness(120%);
filter: contrast(150%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);

Checkout My YouTube Channel

Checkout All CheatSheets

1. CSS Cheat Sheet

Personal Recommendation:

1. CSS CheatSheet
2. JavaScript CheatSheet
3. React CheatSheet
4. Python CheatSheet

Read my other Blogs

1. Top 5 Mistakes Beginners Make While Learning to Code (And How to Avoid Them)
2. Best Programming Languages to Learn in 2025 (and Why)
3. Before You Learn Web Development: The Advice No One Gave Me
4. How to Start Coding in 2025: Beginner’s Roadmap
5. Why Coding is Important: The Language of the Future
6. Are Coding and Programming the Same? – The Complete Truth You Need to Know
7. Will Coding Be Replaced by AI?
8. C++ Programming: Everything You Need to Know