Ultimate CSS Cheat Sheet

Selectors

• * — Universal selector, targets all elements globally.
• element — Type selector, e.g., div selects all
  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.

.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.

Styled Text — font and color applied with center alignment.

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

Flexbox Example

  
Item 1
  
Item 2

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

Grid Example

  
A
  
B

.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 {
  background: linear-gradient(45deg, #0ff, #f0f);
  color: #fff;
  padding: 20px;
  text-align: center;
}

Transitions & Hover

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

Box Shadow & Border Radius

.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

.filtered-img {
  filter: grayscale(100%) brightness(120%);
  width: 25%;
  height: auto;
}

CSS Variables Inline

.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: #0ff;
}
.hover-link:hover {
  color: #ff0;
}

3D Transform Example