Ultimate CSS Cheat Sheet

Comprehensive reference with all CSS selectors, properties, layouts, typography, colors, effects, animations, variables, and inline examples.

Selectors

* — Universal selector, targets all elements globally.
element — Type selector, e.g., div selects all <div> elements.
.class — Class selector, targets all elements with this class.
#id — ID selector, targets the unique element with this ID.
element, element — Grouping selector, applies styles to multiple types.
element element — Descendant selector, targets children at any depth.
element > element — Direct child selector, only immediate children.
element + element — Adjacent sibling, targets the next element only.
element ~ element — General sibling, targets all following siblings.
[attr], [attr=value], [attr^=value], [attr$=value], [attr*=value] — Attribute selectors, match elements by attribute presence or value.
:hover, :focus, :active, :first-child, :last-child, :nth-child(n), :not(selector) — Pseudo-classes, define dynamic or structural states.
::before, ::after, ::first-letter, ::first-line — Pseudo-elements, target part of an element for styling.

Box Model

width, height — Set element dimensions, e.g., width:100% stretches full container.
padding — Inner spacing between content and border, e.g., padding:10px.
margin — Outer spacing between elements, e.g., margin:20px.
border — Border width, style, and color, e.g., border:2px solid #0ff.
box-sizing: content-box|border-box; — Defines whether padding and border are included in width/height.
overflow: visible|hidden|scroll|auto; — Controls content overflow.
z-index — Controls stacking order of positioned elements.
position: static|relative|absolute|fixed|sticky; — Sets element positioning context.
top, right, bottom, left — Offsets for positioned elements.
float, clear — Controls element flow and wrapping.
overflow-wrap, word-break, white-space — Manage text wrapping and whitespace.

Flexbox

display: flex; — Enables flex layout for children.
flex-direction: row|column|row-reverse|column-reverse; — Controls main axis direction.
justify-content — Aligns items along main axis: flex-start, center, space-between, etc.
align-items — Aligns items along cross axis.
align-content — Aligns multiple lines along cross axis.
flex-wrap: nowrap|wrap|wrap-reverse; — Controls line wrapping.
flex: grow shrink basis; — Shorthand for flexible sizing.
order — Reorders flex items visually without changing HTML.

CSS Grid

display: grid; — Enables grid layout.
grid-template-columns/rows — Defines column/row sizes.
grid-template-areas — Assigns named areas for layout.
gap — Sets spacing between grid items.
grid-column, grid-row — Position items inside grid.
justify-items / align-items — Align single items within cells.
justify-content / align-content — Align the grid container itself.
grid-auto-flow — Controls automatic placement of items.

Typography

font-family — Defines typeface.
font-size — Sets text size.
font-weight — Sets text boldness.
line-height — Sets vertical spacing of lines.
letter-spacing — Sets spacing between characters.
text-transform — Capitalization control.
text-align — Horizontal alignment.
text-decoration — Adds underline, overline, or strike-through.
text-shadow — Adds shadow to text.
word-wrap, overflow-wrap — Controls breaking of long words.

Colors & Backgrounds

color — Sets text color.
background-color — Fills element background.
background-image — Applies images as backgrounds.
linear-gradient, radial-gradient, repeating-linear-gradient — Gradient backgrounds.
background-size, background-position, background-repeat — Controls image rendering.
opacity — Transparency of element.
mix-blend-mode — Blends element with background.
background-clip — Limits background to border, padding, or content box.

Filters & Effects

filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() — Visual effects on element.
backdrop-filter — Applies filter to background behind element.
box-shadow — Adds shadow outside or inside element.
text-shadow — Shadow on text.
clip-path — Creates custom shapes for elements.
transform: translate(), scale(), rotate(), skew(), perspective() — Moves or rotates elements in 2D/3D.
transition, animation — Smooth changes over time.
will-change — Hint for performance optimization on transform/animation.
contain — Limits layout or paint impact for performance.

CSS Variables & Calculations

--my-color: #00ffff; — Declare reusable variable.
var(--my-color) — Use variable value.
:root — Global scope for variables.
calc() — Perform calculations in CSS, e.g., width: calc(100% - 20px);
clamp(min, val, max) — Restrict value between min and max.

Inline CSS Examples

Directly apply styles to elements using style attribute.

Box Model

Box Example — padding adds inner spacing, margin adds outer spacing.

index.html

<div class="box-model">Box Example — padding adds inner spacing, margin adds outer spacing.</div>

styles.css

.box-model {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 2px solid #0ff;
  background: #111;
  color: #0ff;
}

Text & Typography

Styled Text — font and color applied with center alignment.

index.html

<p class="styled-text">Styled Text — font and color applied with center alignment.</p>

styles.css

.styled-text {
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: #ff0;
  text-align: center;
}

Flexbox Example

Item 1

Item 2

index.html

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

styles.css

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  background: #222;
  color: #0ff;
}

Grid Example

index.html

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
</div>

styles.css

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  background: #111;
  color: #0ff;
  padding: 10px;
}
.grid-item {
  padding: 10px;
  background: #333;
  color: #0ff;
}

Gradient Background

Gradient Box — diagonal gradient applied.

styles.css

.gradient-box {
  background: linear-gradient(45deg, #0ff, #f0f);
  color: #fff;
  padding: 20px;
  text-align: center;
}

Transitions & Hover

Hover Me — grows smoothly on hover.

styles.css

.hover-scale {
  transition: transform 0.5s;
}
.hover-scale:hover {
  transform: scale(1.5);
}

Box Shadow & Border Radius

Shadow Box — rounded corners with glowing shadow.

styles.css

.shadow-box {
  width: 150px;
  height: 80px;
  background: #222;
  border: 2px solid #0ff;
  border-radius: 12px;
  box-shadow: 0 0 10px #0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

Filters

styles.css

.filtered-img {
  filter: grayscale(100%) brightness(120%);
  width: 25%;       /* reduces size to 1/4 */
  height: auto;     /* maintain aspect ratio */
}

CSS Variables Inline

Variable Color — color controlled via CSS variable.

styles.css

.variable-box {
  --main-color: #ff0;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  padding: 10px;
  margin: 10px;
}

Pseudo-class Hover Example

Hover Link — color changes on hover.

styles.css

.hover-link {
  color: #0ff;
}
.hover-link:hover {
  color: #ff0;
}

3D Transform Example

3D Box — rotated along X and Y axes.

styles.css

.box-3d {
  width: 100px;
  height: 100px;
  background: #0ff;
  transform: rotateY(45deg) rotateX(20deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

Neumorphism Box Example

Neumorphic — soft embossed look.

styles.css

.neumorphic-box {
  width: 120px;
  height: 60px;
  background: #111;
  border-radius: 12px;
  box-shadow: 8px 8px 15px #000, -8px -8px 15px #222;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

Nested Grid Example

1A
1B

styles.css

.nested-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  background: #111;
  color: #0ff;
  padding: 10px;
}
.nested-grid div:first-child {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  background: #333;
  padding: 5px;
}
.nested-grid div:last-child {
  background: #555;
  padding: 5px;
}

Clip-path / Shapes

Circle — element clipped into circle.

styles.css

.clip-circle {
  width: 120px;
  height: 120px;
  background: #0ff;
  clip-path: circle(50% at 50% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

Multiple Filters

styles.css

.multi-filter {
  filter: blur(2px) contrast(150%) hue-rotate(90deg);
}

Hover Color Transition

Hover Color — smooth color change

styles.css

.hover-color {
  width: 150px;
  height: 80px;
  background: #0ff;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.5s, color 0.5s;
}
.hover-color:hover {
  background: #ff0;
  color: #111;
}

Rotate & Scale Animation

Animate Box — rotates and scales

styles.css

.rotate-scale {
  width: 100px;
  height: 100px;
  background: rgb(5, 238, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateScale 2s infinite alternate;
}

Bouncing Effect

Bounce — vertical motion

styles.css

.bounce-box {
  width: 80px;
  height: 80px;
  background: #0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce 1s infinite;
}

Fade In / Fade Out

Fade Text — opacity changes

styles.css

.fade-text {
  width: 120px;
  height: 60px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0ff;
  animation: fadeInOut 3s infinite;
}

Pulse / Glow Effect

Glow — pulsing box shadow

styles.css

.pulse-glow {
  width: 100px;
  height: 100px;
  background: #0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px #0ff;
  animation: pulse 1.5s infinite;
}