carefree-ladka/CSS Interview Cheatsheet.mdx

## CSS Interview Cheatsheet.mdx

      
    Raw
  

              CSS Interview Cheatsheet.mdx
            
          
    CSS Interview Cheatsheet

Table of Contents


CSS Reset & Box Model
Selectors
Specificity
Display & Positioning
Flexbox
Grid
Typography
Colors & Backgrounds
Borders & Shadows
Transitions & Transforms
Pseudo-classes & Pseudo-elements
Common Layout Patterns
Responsive Design


CSS Reset & Box Model

Universal Reset

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Box Model Theory

Every element is a box with:

Content: The actual content (text, images)
Padding: Space inside the border
Border: Line around padding
Margin: Space outside the border

/* box-sizing controls how width/height are calculated */
box-sizing: content-box;  /* Default: width = content only */
box-sizing: border-box;   /* Modern: width = content + padding + border */

width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
Total size calculation:

content-box: Total width = 200 + 40 (padding) + 10 (border) = 250px
border-box: Total width = 200px (includes padding & border)


Selectors

/* Universal */
* { }

/* Element */
div { }
h1 { }

/* ID (highest specificity) */
#header { }

/* Class */
.button { }
.card { }

/* Attribute */
input[type="text"] { }
a[href^="https"] { }  /* starts with */
a[href$=".pdf"] { }   /* ends with */
a[href*="google"] { } /* contains */

/* Combinators */
div p { }       /* Descendant: all p inside div */
div > p { }     /* Direct child: only immediate p children */
div + p { }     /* Adjacent sibling: p immediately after div */
div ~ p { }     /* General sibling: all p siblings after div */

/* Grouping */
h1, h2, h3 { }  /* Multiple selectors */

Specificity

Theory: Determines which CSS rule applies when multiple rules target the same element.
Calculation (from highest to lowest):

Inline styles: style="color: red" (1000)
IDs: #header (100)
Classes, attributes, pseudo-classes: .button, [type], :hover (10)
Elements, pseudo-elements: div, ::before (1)

/* Specificity examples */
div { }                    /* 1 */
.class { }                 /* 10 */
#id { }                    /* 100 */
div.class { }              /* 11 */
div#id { }                 /* 101 */
#id .class div { }         /* 111 */
Important note: !important overrides everything (avoid in production).

Display & Positioning

Display

display: block;        /* Takes full width, stacks vertically */
display: inline;       /* Flows with text, can't set width/height */
display: inline-block; /* Inline but can set dimensions */
display: flex;         /* Flexbox container */
display: grid;         /* Grid container */
display: none;         /* Removes from layout */
visibility: hidden;    /* Hides but keeps space */
Position

position: static;      /* Default: normal flow */
position: relative;    /* Relative to normal position, doesn't affect others */
position: absolute;    /* Relative to nearest positioned ancestor */
position: fixed;       /* Relative to viewport, stays on scroll */
position: sticky;      /* Hybrid: relative until threshold, then fixed */

/* Offset properties (with positioned elements) */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;

/* Stacking order */
z-index: 10;  /* Higher = on top (only works with positioned elements) */
Overflow

overflow: visible;  /* Content overflows (default) */
overflow: hidden;   /* Clips overflow */
overflow: scroll;   /* Always shows scrollbar */
overflow: auto;     /* Scrollbar only when needed */

Flexbox

Theory: One-dimensional layout (row or column). Parent controls child alignment.
/* Container properties */
.container {
  display: flex;
  
  /* Main axis direction */
  flex-direction: row | row-reverse | column | column-reverse;
  
  /* Wrap items */
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  /* Main axis alignment */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  
  /* Cross axis alignment */
  align-items: flex-start | flex-end | center | baseline | stretch;
  
  /* Multi-line cross axis */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  
  /* Shorthand */
  flex-flow: row wrap;  /* direction + wrap */
  gap: 10px;  /* Space between items */
}

/* Item properties */
.item {
  flex-grow: 1;    /* Grow factor (default 0) */
  flex-shrink: 1;  /* Shrink factor (default 1) */
  flex-basis: 200px; /* Initial size before grow/shrink */
  
  /* Shorthand: grow shrink basis */
  flex: 1 1 200px;
  flex: 1;  /* Common: grow=1, shrink=1, basis=0 */
  
  /* Override container alignment */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  
  /* Order */
  order: 2;  /* Default 0, negative values come first */
}

Grid

Theory: Two-dimensional layout (rows and columns). More powerful than Flexbox for complex layouts.
/* Container properties */
.container {
  display: grid;
  
  /* Define columns */
  grid-template-columns: 200px 200px 200px;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-columns: 1fr 2fr 1fr;     /* Proportional */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */
  
  /* Define rows */
  grid-template-rows: 100px auto 100px;
  
  /* Gaps */
  gap: 20px;              /* Row and column gap */
  row-gap: 10px;
  column-gap: 20px;
  
  /* Alignment */
  justify-items: start | end | center | stretch;  /* Horizontal */
  align-items: start | end | center | stretch;    /* Vertical */
  justify-content: start | end | center | space-between | space-around;
  align-content: start | end | center | space-between | space-around;
}

/* Item properties */
.item {
  /* Position by line numbers */
  grid-column: 1 / 3;    /* Span from column 1 to 3 */
  grid-row: 2 / 4;
  
  /* Shorthand */
  grid-area: 2 / 1 / 4 / 3;  /* row-start / col-start / row-end / col-end */
  
  /* Span syntax */
  grid-column: span 2;   /* Span 2 columns */
  
  /* Self-alignment */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Typography

/* Font properties */
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 16px | 1rem | 1.2em;
font-weight: normal | bold | 100-900;
font-style: normal | italic | oblique;

/* Text properties */
line-height: 1.5;      /* Multiplier of font-size */
text-align: left | center | right | justify;
text-decoration: none | underline | line-through;
text-transform: none | uppercase | lowercase | capitalize;
letter-spacing: 1px;   /* Space between characters */
word-spacing: 2px;     /* Space between words */
white-space: normal | nowrap | pre | pre-wrap;

/* Overflow handling */
text-overflow: clip | ellipsis;  /* Requires white-space: nowrap */
overflow: hidden;
white-space: nowrap;

/* Multi-line ellipsis */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Colors & Backgrounds

Colors

/* Color formats */
color: #000000;              /* Hex */
color: #000;                 /* Short hex */
color: rgb(0, 0, 0);         /* RGB */
color: rgba(0, 0, 0, 0.5);   /* RGB with alpha */
color: hsl(0, 0%, 0%);       /* HSL */
color: hsla(0, 0%, 0%, 0.5); /* HSL with alpha */

background-color: #ffffff;
opacity: 0.5;  /* Affects entire element including children */
Backgrounds

/* Individual properties */
background-color: #fff;
background-image: url('image.jpg');
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
background-position: center | top left | 50% 50%;
background-size: cover | contain | 100% 100% | auto;
background-attachment: scroll | fixed | local;

/* Shorthand */
background: #fff url('image.jpg') no-repeat center/cover;

/* Multiple backgrounds */
background: 
  url('top.png') no-repeat top,
  url('bottom.png') no-repeat bottom;

/* Gradients */
background: linear-gradient(to right, #ff0000, #0000ff);
background: radial-gradient(circle, #ff0000, #0000ff);

Borders & Shadows

Borders

/* Individual properties */
border-width: 1px;
border-style: solid | dashed | dotted | double | none;
border-color: #000;

/* Shorthand */
border: 1px solid #000;

/* Individual sides */
border-top: 2px solid red;
border-right: 1px dashed blue;
border-bottom: 3px dotted green;
border-left: 1px solid black;

/* Rounded corners */
border-radius: 5px;
border-radius: 10px 20px 30px 40px;  /* top-left, top-right, bottom-right, bottom-left */
border-radius: 50%;  /* Circle */
Shadows

/* Box shadow */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/* h-offset v-offset blur spread color */
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);

/* Multiple shadows */
box-shadow: 
  2px 2px 5px rgba(0, 0, 0, 0.3),
  -2px -2px 5px rgba(255, 255, 255, 0.5);

/* Inset shadow */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

/* Text shadow */
text-shadow: 1px 1px 2px #000;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

Transitions & Transforms

Transitions

/* Individual properties */
transition-property: all | opacity | transform;
transition-duration: 0.3s;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-delay: 0.1s;

/* Shorthand */
transition: all 0.3s ease;
transition: opacity 0.5s ease-in-out 0.1s;

/* Multiple properties */
transition: 
  opacity 0.3s ease,
  transform 0.5s ease-in-out;
Transforms

/* 2D Transforms */
transform: translateX(10px);
transform: translateY(20px);
transform: translate(10px, 20px);
transform: rotate(45deg);
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: skew(10deg, 5deg);

/* 3D Transforms */
transform: translateZ(50px);
transform: translate3d(10px, 20px, 30px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);

/* Multiple transforms */
transform: translateX(10px) rotate(45deg) scale(1.2);

/* Transform origin */
transform-origin: center | top left | 50% 50%;

Pseudo-classes & Pseudo-elements

Pseudo-classes (select elements in specific states)

/* Link states */
a:link { }      /* Unvisited */
a:visited { }   /* Visited */
a:hover { }     /* Mouse over */
a:active { }    /* Being clicked */
a:focus { }     /* Keyboard focus */

/* Structural */
:first-child { }
:last-child { }
:nth-child(2) { }       /* Second child */
:nth-child(odd) { }     /* 1, 3, 5... */
:nth-child(even) { }    /* 2, 4, 6... */
:nth-child(3n) { }      /* Every 3rd */
:nth-child(3n+1) { }    /* 1, 4, 7... */

:first-of-type { }
:last-of-type { }
:nth-of-type(2) { }

:only-child { }
:only-of-type { }
:empty { }      /* No children */

/* Forms */
:checked { }
:disabled { }
:enabled { }
:valid { }
:invalid { }
:required { }
:optional { }

/* Other */
:not(.class) { }  /* Negation */
:root { }         /* Document root */
Pseudo-elements (create virtual elements)

/* Content injection */
::before {
  content: "★ ";
  color: gold;
}

::after {
  content: "";
  display: block;
  clear: both;
}

/* Other pseudo-elements */
::first-letter { }
::first-line { }
::selection { }      /* Text selection */
::placeholder { }    /* Input placeholder */

Common Layout Patterns

Centering Techniques

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

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

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

/* Margin auto (for blocks with width) */
.center-margin {
  margin: 0 auto;
  width: 80%;
}
Holy Grail Layout (Header, Footer, Sidebar, Content)

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

header {
  grid-column: 1 / -1;
}

aside {
  grid-row: 2;
}

main {
  grid-row: 2;
}

footer {
  grid-column: 1 / -1;
}
Card Layout

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Responsive Design

Media Queries

/* Mobile first approach */
/* Base styles for mobile */
.container {
  width: 100%;
}

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

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

/* Common breakpoints */
@media (max-width: 575px) { }   /* Extra small */
@media (min-width: 576px) { }   /* Small */
@media (min-width: 768px) { }   /* Medium */
@media (min-width: 992px) { }   /* Large */
@media (min-width: 1200px) { }  /* Extra large */

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

/* Other media features */
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }
Responsive Units

/* Relative units */
1em   /* Relative to parent font-size */
1rem  /* Relative to root font-size */
1vh   /* 1% of viewport height */
1vw   /* 1% of viewport width */
1vmin /* 1% of smaller viewport dimension */
1vmax /* 1% of larger viewport dimension */
%     /* Percentage of parent */

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

Quick Interview Tips


Always use box-sizing: border-box for predictable layouts
Flexbox for 1D layouts (navbar, card content), Grid for 2D (page layout)
Mobile-first responsive design is modern standard
Avoid !important - indicates specificity issues
Use semantic HTML with CSS, not styling divs for everything
CSS Variables for theming:

:root {
  --primary-color: #007bff;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}


Performance: Avoid animating properties that trigger layout (width, height, top, left). Prefer transform and opacity.


Accessibility: Ensure sufficient color contrast, focus states, and don't rely solely on color for information.
No results found