Home

CSS Cheatsheet

🎯 CSS Selectors

/* Universal Selector */
* { margin: 0; padding: 0; }

/* Type Selector */
p { color: blue; }

/* Class Selector */
.box { border: 1px solid #333; }

/* ID Selector */
#header { background: #f4f4f4; }

/* Descendant Selector */
nav a { text-decoration: none; }

/* Attribute Selector */
input[type="text"] { border: 2px solid red; }

🎨 Colors & Backgrounds

body {
  background-color: #f0f0f0;
  color: #333;
}

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

section {
  background-image: url("bg.jpg");
  background-size: cover;
}

🔠 Typography

h1 {
  font-family: "Arial", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

📦 Box Model

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px auto;
  box-sizing: border-box;
}

📐 Flexbox

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  padding: 10px;
}

🔲 CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid div {
  background: lightblue;
  padding: 20px;
}

📍 Position

.box1 { position: static; }
.box2 { position: relative; top: 10px; left: 20px; }
.box3 { position: absolute; top: 0; right: 0; }
.box4 { position: fixed; bottom: 10px; right: 10px; }
.box5 { position: sticky; top: 0; }

⚡ Transitions

button {
  background: blue;
  color: white;
  transition: background 0.3s ease;
}

button:hover {
  background: darkblue;
}

🎬 Animations

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

.box {
  animation: bounce 2s infinite;
}

🧩 CSS Variables

:root {
  --main-color: #ff5722;
  --padding: 10px;
}

button {
  background: var(--main-color);
  padding: var(--padding);
}

🌈 CSS Filters

img {
  filter: grayscale(100%) blur(2px);
}

div {
  backdrop-filter: blur(5px) brightness(0.8);
}

📱 Media Queries

@media (max-width: 768px) {
  body {
    background: lightyellow;
  }
  h1 {
    font-size: 1.5rem;
  }
}

✨ Pseudo-Classes & Pseudo-Elements

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

p::first-letter { font-size: 2rem; color: blue; }
p::before { content: "👉 "; }
p::after { content: " 🚀"; }

🔳 Clip-Path

.circle {
  clip-path: circle(50% at 50% 50%);
}

.polygon {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

🖱️ Custom Scrollbar

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

⚡ Toggle CSS Class with JS

<button onclick="toggleBox()">Toggle Box</button>
<div id="myBox">Box</div>

<script>
function toggleBox() {
  document.getElementById("myBox").classList.toggle("active");
}
</script>

<style>
#myBox {
  width: 100px; height: 100px;
  background: red;
  transition: 0.3s;
}
#myBox.active {
  background: green;
  transform: scale(1.2);
}
</style>

🌙 Dark Mode Toggle

<button onclick="toggleDarkMode()">Dark Mode</button>

<script>
function toggleDarkMode() {
  document.body.classList.toggle("dark-mode");
}
</script>

<style>
.dark-mode {
  background: #121212;
  color: #fff;
}
</style>

🚀 Animate on Scroll

<div class="fade" style="margin-top:100vh">Hello World</div>

<script>
window.addEventListener("scroll", function() {
  document.querySelectorAll(".fade").forEach(el => {
    if (el.getBoundingClientRect().top < window.innerHeight - 50) {
      el.classList.add("show");
    }
  });
});
</script>

<style>
.fade {
  opacity: 0; transform: translateY(50px);
  transition: 0.6s;
}
.fade.show {
  opacity: 1; transform: translateY(0);
}
</style>

📂 Accordion (Toggle Content)

<button onclick="toggleAccordion()">Show More</button>
<div id="panel">Hidden Content</div>

<script>
function toggleAccordion() {
  document.getElementById("panel").classList.toggle("open");
}
</script>

<style>
#panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
#panel.open {
  max-height: 200px;
}
</style>

📦 Modal Popup

<button onclick="openModal()">Open Modal</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span onclick="closeModal()" class="close">&times;</span>
    <p>Hello! I'm a Modal.</p>
  </div>
</div>

<script>
function openModal() { document.getElementById("modal").style.display = "block"; }
function closeModal() { document.getElementById("modal").style.display = "none"; }
</script>

<style>
.modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
}
.modal-content {
  background: #fff; margin: 15% auto; padding: 20px;
  width: 300px; border-radius: 8px;
}
.close { cursor: pointer; float: right; }
</style>

🎨 CSS Variables (Custom Properties)

<style>
:root {
  --main-color: #3498db;
  --padding: 10px;
}
.box {
  background: var(--main-color);
  padding: var(--padding);
}
.box:hover {
  --main-color: #e74c3c; /* change variable on hover */
}
</style>
<div class="box">I use CSS Variables</div>

💡 Tip: Beginners can use variables for reusability. Advanced devs combine them with dark mode or themes.

🧩 CSS Grid Layout

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid div {
  background: #2ecc71;
  padding: 20px;
  text-align: center;
}
</style>
<div class="grid">
  <div>1</div> <div>2</div> <div>3</div>
</div>

💡 Tip: Beginners: think of it as a table replacement. Advanced: combine grid with minmax() + auto-fit for responsive layouts.

📦 Flexbox Tricks

<style>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex div { background: #f39c12; padding: 10px; }
</style>
<div class="flex">
  <div>Left</div> <div>Center</div> <div>Right</div>
</div>

💡 Tip: Beginners: use flex for navbar. Advanced: combine with flex-wrap and gap for responsive layouts.

✂️ CSS Clip-Path (Shapes)

<style>
.clip {
  width: 200px; height: 200px;
  background: #9b59b6;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
<div class="clip"></div>

💡 Tip: Beginners: start with simple circle/triangle. Advanced: create custom SVG shapes and animations.

🎞️ CSS Keyframe Animations

<style>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}
.ball {
  width: 50px; height: 50px;
  background: #e74c3c; border-radius: 50%;
  animation: bounce 1s infinite;
}
</style>
<div class="ball"></div>

💡 Tip: Beginners: animate hover effects. Advanced: chain animations & use cubic-bezier() for custom timing.

✨ Pseudo Elements (::before & ::after)

<style>
.btn {
  position: relative;
  padding: 10px 20px;
  background: #2980b9; color: white;
}
.btn::after {
  content: " →";
  position: absolute;
  right: 10px;
}
</style>
<button class="btn">Click Me</button>

💡 Tip: Beginners: add arrows or icons. Advanced: use them for tooltips, highlights & creative effects.

🔮 CSS Filters

<style>
.img-filter {
  width: 250px;
  filter: grayscale(100%) blur(2px);
  transition: filter 0.3s;
}
.img-filter:hover {
  filter: none;
}
</style>
<img src="https://via.placeholder.com/250" class="img-filter" />

💡 Tip: Beginners: use grayscale/blur. Advanced: stack multiple filters + transitions for effects.

📌 Position: Sticky

<style>
header {
  position: sticky;
  top: 0;
  background: #1abc9c;
  padding: 10px;
}
</style>
<header>I'm sticky header</header>
<p style="height:2000px">Scroll Down</p>

💡 Tip: Beginners: use sticky for navbars. Advanced: combine with scroll animations.

Post a Comment