CSS3 Technical.
Interview cheat sheet.

CSS3 (Cascading Style Sheets Level 3) is the latest evolution of CSS that brings powerful styling capabilities including animations, flexbox, grid layout, transforms, and responsive design features. It enables developers to create rich, interactive user interfaces with pure CSS, reducing dependency on JavaScript for visual effects. This cheatsheet covers essential CSS3 concepts, modern layout techniques, and best practices for technical interviews.

Ways to Include CSS

/* 1. Inline (highest specificity) */
<div style="color: red;">Text</div>

/* 2. Internal */
<style>
  .class { color: blue; }
</style>

/* 3. External (recommended) */
<link rel="stylesheet" href="styles.css">

CSS Syntax

selector {
  property: value;
}

Basic Selectors

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

/* Type/Element */
p { color: black; }

/* Class */
.classname { font-size: 16px; }

/* ID */
#idname { background: yellow; }

/* Attribute */
[type="text"] { border: 1px solid; }
input[disabled] { opacity: 0.5; }

Combinators

/* Descendant (space) */
div p { color: blue; }

/* Child (>) */
div > p { margin: 10px; }

/* Adjacent sibling (+) */
h1 + p { font-weight: bold; }

/* General sibling (~) */
h1 ~ p { color: gray; }

Specificity (0,0,0,0)

• Inline styles: 1,0,0,0
• IDs: 0,1,0,0
• Classes, attributes, pseudo-classes: 0,0,1,0
• Elements: 0,0,0,1

/* Box Model: Content -> Padding -> Border -> Margin */
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
  /* Total width = 300 + 40 + 10 + 20 = 370px */
}

/* Box-sizing */
.box {
  box-sizing: border-box; /* Includes padding & border in width */
  box-sizing: content-box; /* Default - excludes padding & border */
}

/* Static (default) - normal flow */
position: static;

/* Relative - relative to normal position */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Absolute - relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Fixed - relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Sticky - hybrid of relative and fixed */
.sticky {
  position: sticky;
  top: 0;
}

/* Z-index - stacking order */
z-index: 10; /* Higher = on top */

Container Properties

.flex-container {
  display: flex;
  
  /* Direction */
  flex-direction: row | row-reverse | column | column-reverse;
  
  /* Wrap */
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  /* Shorthand */
  flex-flow: row wrap;
  
  /* Main axis alignment */
  justify-content: flex-start | flex-end | center | 
                   space-between | space-around | space-evenly;
  
  /* Cross axis alignment */
  align-items: stretch | flex-start | flex-end | center | baseline;
  
  /* Multi-line alignment */
  align-content: flex-start | flex-end | center | 
                 space-between | space-around | stretch;
}

Item Properties

.flex-item {
  /* Order */
  order: 0; /* Default 0, can be negative */
  
  /* Grow, shrink, basis */
  flex-grow: 0; /* Default 0 */
  flex-shrink: 1; /* Default 1 */
  flex-basis: auto; /* Default auto */
  
  /* Shorthand */
  flex: 1; /* grow: 1, shrink: 1, basis: 0% */
  
  /* Individual alignment */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Container Properties

.grid-container {
  display: grid;
  
  /* Define columns & rows */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 100px auto;
  
  /* Using repeat */
  grid-template-columns: repeat(3, 1fr);
  
  /* Gap */
  gap: 10px; /* row-gap and column-gap */
  
  /* Alignment */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  
  /* Content alignment */
  justify-content: start | end | center | stretch | 
                   space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | 
                 space-around | space-between | space-evenly;
}

Item Properties

.grid-item {
  /* Placement */
  grid-column: 1 / 3; /* Start / End */
  grid-row: 1 / span 2; /* Start / Span count */
  
  /* Shorthand */
  grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
  
  /* Individual alignment */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Media Queries

/* Mobile First */
.container { width: 100%; }

/* Tablet */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { width: 960px; }
}

/* Print */
@media print {
  .no-print { display: none; }
}

/* Orientation */
@media (orientation: landscape) {
  /* Styles for landscape */
}

Responsive Units

/* Relative to viewport */
width: 100vw; /* Viewport width */
height: 100vh; /* Viewport height */
font-size: 5vmin; /* Smaller of vw or vh */
font-size: 5vmax; /* Larger of vw or vh */

/* Relative to font-size */
font-size: 2rem; /* Root element font-size */
padding: 1em; /* Parent element font-size */

/* Percentage - relative to parent */
width: 50%;

Transitions

.button {
  background: blue;
  transition: background 0.3s ease-in-out;
  
  /* Multiple properties */
  transition: background 0.3s, transform 0.2s;
  
  /* All properties */
  transition: all 0.3s ease;
}

.button:hover {
  background: red;
  transform: scale(1.1);
}

Animations

/* Define keyframes */
@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

/* Apply animation */
.animated {
  animation: slide 2s ease-in-out infinite;
  
  /* Detailed properties */
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal | reverse | alternate;
  animation-fill-mode: none | forwards | backwards | both;
}

2D Transforms

.transform-2d {
  transform: translate(50px, 100px);
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: skew(10deg, 20deg);
  
  /* Multiple transforms */
  transform: rotate(45deg) scale(1.2) translateX(50px);
  
  /* Transform origin */
  transform-origin: center; /* Default */
  transform-origin: top left;
  transform-origin: 50% 50%;
}

3D Transforms

.transform-3d {
  transform: translateZ(100px);
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: scale3d(1, 2, 1);
  
  /* Perspective */
  perspective: 1000px;
  transform-style: preserve-3d;
}

Pseudo-classes (single colon :)

/* State */
a:hover { color: red; }
a:active { color: green; }
a:visited { color: purple; }
input:focus { outline: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }

/* Structural */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-of-type(3) { color: red; }
div:only-child { margin: 20px; }
p:not(.special) { color: gray; }

Pseudo-elements (double colon ::)

/* Content */
p::before { content: "→ "; }
p::after { content: " ←"; }

/* Text */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }

/* Selection */
::selection { background: yellow; color: black; }

/* Placeholder */
input::placeholder { color: #999; }

/* Define variables */
:root {
  --primary-color: #007bff;
  --spacing: 16px;
  --border-radius: 4px;
}

/* Use variables */
.button {
  background: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  
  /* With fallback */
  color: var(--text-color, black);
}

/* Scoped variables */
.dark-theme {
  --primary-color: #4a90e2;
}

/* JavaScript access */
/* getComputedStyle(element).getPropertyValue('--primary-color') */
/* element.style.setProperty('--primary-color', 'red') */

CSS Functions

/* calc() */
width: calc(100% - 20px);
padding: calc(var(--spacing) * 2);

/* min() and max() */
width: min(500px, 100%);
font-size: max(1rem, 2vw);

/* clamp() */
font-size: clamp(1rem, 2vw, 2rem); /* min, preferred, max */

/* Color functions */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* Gradient functions */
background: linear-gradient(45deg, red, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green);

CSS Filters

.filtered {
  filter: blur(5px);
  filter: brightness(1.2);
  filter: contrast(1.5);
  filter: grayscale(100%);
  filter: hue-rotate(90deg);
  filter: invert(100%);
  filter: opacity(50%);
  filter: saturate(2);
  filter: sepia(100%);
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
  
  /* Multiple filters */
  filter: blur(5px) brightness(1.2) contrast(1.5);
}

Blend Modes

.blend {
  mix-blend-mode: multiply;
  mix-blend-mode: screen;
  mix-blend-mode: overlay;
  background-blend-mode: darken;
}

CSS Shapes

.shaped {
  clip-path: circle(50%);
  clip-path: ellipse(100px 50px);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  
  /* Shape outside for text wrapping */
  shape-outside: circle(50%);
  float: left;
}

Best Practices

/* 1. Use CSS containment */
.container {
  contain: layout style paint;
}

/* 2. Use will-change sparingly */
.will-animate {
  will-change: transform;
}

/* 3. Avoid expensive properties in animations */
/* Bad: animating width, height, top, left */
/* Good: animating transform, opacity */

/* 4. Use CSS Grid/Flexbox instead of floats */

/* 5. Minimize reflows/repaints */
/* Batch DOM changes, use transform instead of position */

/* 6. Use CSS sprites for small images */

/* 7. Prefer CSS animations over JavaScript */

Critical CSS

/* Inline critical CSS in <head> */
/* Load non-critical CSS asynchronously */
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

CSS Specificity Calculation

Specificity determines which CSS rule wins when multiple rules target the same element:

• Inline styles: 1,0,0,0 (highest priority)
• ID selectors: 0,1,0,0
• Class/pseudo-class/attribute: 0,0,1,0
• Element/pseudo-element: 0,0,0,1
• Universal selector (*): 0,0,0,0

Display Property Comparison

Unit System Comparison

Absolute Units:

• px: Pixels (device pixels)
• pt: Points (1/72 inch)
• cm, mm, in: Physical units

Relative Units:

• em: Relative to parent font-size (compounds)
• rem: Relative to root font-size (consistent)
• %: Relative to parent dimension
• vw/vh: Viewport width/height (1/100)
• vmin/vmax: Smaller/larger of vw or vh

Centering Techniques

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

/* Absolute positioning */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (horizontal only) */
.centered {
  margin: 0 auto;
  width: 200px;
}

Block Formatting Context (BFC)

Definition: Isolated rendering context for block-level box layout

BFC Triggers:

• float: left/right
• position: absolute/fixed
• display: flow-root, table-cell, flex, grid, inline-block
• overflow: hidden/auto/scroll (not visible)
• contain: layout/paint/strict

BFC Benefits:

• Contains floating children
• Prevents margin collapse
• Creates column layouts
• Stops text wrapping around floats

CSS Preprocessors & Tools

CSS Architecture Methodologies

/* BEM - Block Element Modifier */
.card { }                  /* Block */
.card__title { }          /* Element */
.card--featured { }       /* Modifier */

/* SMACSS Categories */
.l-header { }             /* Layout */
.m-button { }             /* Module */
.is-active { }            /* State */
.theme-dark { }           /* Theme */

/* Atomic/Utility CSS */
.mt-4 { margin-top: 1rem; }
.text-center { text-align: center; }

CSS Cascade Algorithm

1. Origin & Importance
   - User !important > Author !important > Author > User > User Agent
2. Specificity
   - Inline > ID > Class > Element
3. Source Order
   - Last rule wins for equal specificity

Rendering Performance

Reflow (Layout): Geometry recalculation

• Triggered by: width, height, padding, margin, position changes
• Expensive operation affecting entire tree

Repaint (Paint): Visual update only

• Triggered by: color, background, visibility, outline
• Less expensive than reflow

Composite: GPU layer composition

• Triggered by: transform, opacity
• Most performant for animations

Common CSS Reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Clearfix

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Aspect Ratio Box

.aspect-ratio-16-9 {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 */
}

.aspect-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Truncate Text

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line truncate */
.truncate-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Custom Scrollbar

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Modern CSS Features (2023+)

/* Container Queries */
@container (min-width: 400px) {
  .card { grid-template-columns: 2fr 1fr; }
}

/* Cascade Layers */
@layer base, components, utilities;
@layer components {
  .button { background: blue; }
}

/* :has() Selector */
.card:has(img) { display: grid; }

/* Logical Properties */
.element {
  margin-inline: auto;  /* margin-left + margin-right */
  padding-block: 1rem;  /* padding-top + padding-bottom */
}

/* aspect-ratio Property */
.video { aspect-ratio: 16 / 9; }

/* CSS Nesting (Native) */
.card {
  padding: 1rem;
  .title { font-size: 1.5rem; }
  &:hover { background: #f0f0f0; }
}

• ✅ Core Concepts: Selectors, specificity, cascade, inheritance
• ✅ Box Model: Content, padding, border, margin, box-sizing
• ✅ Layout Systems: Flexbox, Grid, positioning, floats
• ✅ Responsive Design: Media queries, fluid typography, mobile-first
• ✅ Performance: Critical CSS, reflow/repaint, will-change
• ✅ Modern Features: Custom properties, container queries, layers
• ✅ Debugging: DevTools, computed styles, layout debugging
• ✅ Accessibility: Focus management, ARIA, color contrast
• ✅ Cross-browser: Feature detection, progressive enhancement

Key Takeaway: Master the fundamentals (box model, positioning, flexbox/grid) before diving into advanced features. Understanding how CSS works under the hood (cascade, specificity, rendering) will help you solve complex layout challenges efficiently.