CSS — Cascading Style Sheets

Think of HTML as the skeleton of a house — walls, rooms, doors. CSS is the interior design — paint colors, furniture arrangement, spacing between objects. Without CSS, every webpage would look like a plain text document from 1995.

CSS controls how HTML elements look — colors, spacing, layout, fonts, animations. There are three ways to add CSS to your page:

CSS Selectors

Why do selectors exist? Imagine you are a teacher in a classroom of 30 students. You need a way to say "Hey, YOU specifically" or "everyone in the back row" or "all students wearing blue shirts." CSS selectors are exactly that — they are how you point at specific HTML elements and say "I want to style YOU."

Without selectors, you would have to put inline styles on every single element. Selectors let you write one rule that applies to many elements at once, or target one very specific element.

/* Element selector — targets ALL paragraphs */
p { color: blue; }

/* Class selector — targets anything with class="highlight" */
.highlight { background: yellow; }

/* ID selector — targets the ONE element with id="header" */
#header { font-size: 24px; }

/* Descendant vs Child — EXAM FAVORITE */
div p   { color: red; }   /* ALL p inside div (any depth) */
div > p { color: blue; }  /* only DIRECT p children of div */

/* Attribute selector */
a[target="_blank"] { color: red; }

Box Model

Why does the box model matter? Here is the single most important thing to understand about CSS layout: every single HTML element is a rectangular box. Not some elements. Not just divs. EVERY element — paragraphs, headings, images, links — they are all invisible boxes sitting on the page.

The box model describes the four layers that make up every one of these boxes. Think of it like a picture in a frame:

• Content — the picture itself (your text, image, or whatever the element displays)
• Padding — the matting around the picture (space between the picture and the frame). Same background color as the content.
• Border — the actual frame around the matting
• Margin — the wall space between this frame and the next frame hanging on the wall. Always transparent — you can never color a margin.

/*
┌──────────────── margin ────────────────┐
│ ┌──────────── border ────────────────┐ │
│ │ ┌────────── padding ────────────┐  │ │
│ │ │ ┌──────── content ─────────┐  │  │ │
│ │ │ │                          │  │  │ │
│ │ │ └──────────────────────────┘  │  │ │
│ │ └───────────────────────────────┘  │ │
│ └────────────────────────────────────┘ │
└────────────────────────────────────────┘
*/

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
/* Total width on screen: 200 + 20*2 + 5*2 = 250px */
/* Total space occupied: 250 + 10*2 = 270px */

/* Fix: use border-box so width means total width */
* { box-sizing: border-box; }

Specificity & Cascade

Why does specificity exist? Imagine you have 3 bosses. Boss A says "paint the wall blue." Boss B says "paint the wall red." Boss C says "paint the wall green." Whose instruction do you follow? You need a pecking order — a way to decide who wins.

That is exactly what specificity is. When multiple CSS rules target the same element with conflicting styles, the browser needs a tiebreaker. Specificity is a scoring system — each selector gets a score, and the highest score wins.

Think of it as a 4-digit address system: Inline, IDs, Classes, Elements — each column is 10x more powerful than the one to its right. One ID beats a hundred classes. One inline style beats everything.

/* Specificity examples — count IDs, classes, elements */
p              { }  /* 0,0,0,1 */
.intro         { }  /* 0,0,1,0 */
p.intro        { }  /* 0,0,1,1 */
#main          { }  /* 0,1,0,0 */
#main p.intro  { }  /* 0,1,1,1 */

/* #main p.intro WINS over .intro because 0,1,1,1 > 0,0,1,0 */

Display & Position

Display property

Why does display exist? Every HTML element has a default way it behaves in the page flow. Some elements are like bricks in a wall — they stack vertically and take up the full width (block elements). Others are like words in a sentence — they sit next to each other and only take the space they need (inline elements). The display property lets you change this fundamental behavior.

Position property

Why does position exist? Normal HTML flows like a Word document — elements stack top to bottom, left to right. But what if you want a chat button floating in the bottom-right corner? Or a navbar that stays at the top when you scroll? Or a tooltip that appears right next to the element you hover? Normal flow cannot do that. The position property lets you break out of normal flow and place elements exactly where you want.

/* Relative — nudge from normal position, original space preserved */
.box1 {
  position: relative;
  top: 20px;    /* moves 20px DOWN from where it would normally be */
  left: 10px;   /* moves 10px RIGHT */
}

/* Absolute — ripped out of flow, positioned inside nearest positioned parent */
.parent { position: relative; }  /* parent MUST be positioned! */
.child  {
  position: absolute;
  top: 0;
  right: 0;   /* top-right corner of .parent */
}

/* Fixed — stays on screen even when scrolling */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Flexbox

Why does Flexbox exist? Before Flexbox, centering a div vertically was a legendary CSS struggle. Developers used hacks with tables, floats, and negative margins just to put something in the middle of the page. Flexbox was invented to solve this: it gives you a simple, powerful way to arrange elements in a row or column, with total control over spacing and alignment.

The analogy: Think of a flex container as a shelf. The items on the shelf are flex items. You can decide:

• Should items go left-to-right (row) or top-to-bottom (column)?
• Should items bunch up at the start, spread out evenly, or center themselves?
• Should items stretch to fill the shelf height, or stay their natural size?
• If there are too many items, should they wrap to a new row?

All you do is put display: flex on the parent — the children automatically become flex items.

Container properties (parent)

Item properties (children)

/* Center something perfectly — the #1 reason Flexbox was invented */
.container {
  display: flex;
  justify-content: center;  /* horizontal center (main axis) */
  align-items: center;      /* vertical center (cross axis) */
  height: 100vh;            /* need a height, or nothing to center against */
}

/* Navigation bar — logo on left, links on right */
.nav {
  display: flex;
  justify-content: space-between;  /* pushes first and last item to edges */
  align-items: center;
}

/* Flex shorthand: flex-grow flex-shrink flex-basis */
.item { flex: 1; }            /* same as flex: 1 1 0% — all items grow equally */
.item { flex: 0 0 200px; }   /* fixed 200px, don't grow, don't shrink */

CSS Grid

Why does Grid exist if we have Flexbox? Flexbox is one-dimensional — it handles a row OR a column. Grid is two-dimensional — it handles rows AND columns at the same time. Think of Flexbox as arranging items on a clothesline (one direction). Grid is like arranging items on a chessboard (rows and columns simultaneously).

Grid is less likely on the FA exam but good to know the basics. Use Grid when you need a page-level layout with defined rows and columns.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 columns: 25% 50% 25% */
  grid-template-rows: auto;
  gap: 16px;                            /* space between grid cells */
}

/* Span multiple columns/rows */
.wide {
  grid-column: 1 / 3;  /* spans column line 1 to line 3 (= 2 columns) */
}

/* Repeat shorthand */
.container {
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
}

Units — px, em, rem, %

Why are there so many unit types? Imagine building with only centimeters — it works for a bookshelf but not for a building that needs to scale. CSS has different units because different situations need different kinds of measurement:

• Fixed sizes (borders, shadows) → px
• Scalable text that respects user preferences → rem
• Relative sizing based on parent → em, %
• Viewport-based layouts → vw, vh

/* If html font-size is 16px (browser default): */
1rem = 16px
2rem = 32px
0.5rem = 8px

/* em depends on parent — this is where it gets tricky: */
.parent { font-size: 20px; }
.child  { font-size: 1.5em; }  /* = 30px (20 × 1.5) */

Colors & Backgrounds

Why so many color formats? Different formats exist for different use cases: named colors are readable, hex is compact, RGB gives precise control, and RGBA adds transparency. For the exam, know all formats and especially understand opacity vs rgba.

/* Background shorthand */
.hero {
  background: #1a1a2e url("bg.jpg") no-repeat center/cover;
}

/* Gradient */
.banner {
  background: linear-gradient(to right, #e94560, #0f3460);
}

/* opacity — affects the ENTIRE element including ALL children */
.faded { opacity: 0.5; }

/* Use rgba for transparent backgrounds WITHOUT affecting children */
.overlay { background: rgba(0, 0, 0, 0.5); }

Text & Fonts

Text styling controls how your content reads. The key insight: font-* properties control the typeface itself (family, size, weight), while text-* properties control how the text is displayed (alignment, decoration, transformation).

/* Font shorthand: style weight size/line-height family */
p {
  font: italic 700 16px/1.5 'Arial', sans-serif;
}

/* Remove underline from links */
a { text-decoration: none; }

/* Ellipsis for overflow text — all 3 properties are required */
.truncate {
  white-space: nowrap;       /* prevent text wrapping */
  overflow: hidden;          /* hide the overflow */
  text-overflow: ellipsis;   /* show "..." at the cut point */
}

Pseudo-classes & Pseudo-elements

Why do these exist? Sometimes you want to style an element based on its state (is the mouse hovering over it? is it the first item in a list?) or a part of an element (just the first letter, or insert an icon before it). You cannot create a CSS class for "the paragraph the mouse is currently hovering over" because that changes every second. Pseudo-classes and pseudo-elements solve this.

Pseudo-classes (single colon — state/position)

Pseudo-elements (double colon — parts of element)

/* Link states — order matters! (LoVe HAte) */
a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: red; }
a:active  { color: orange; }

/* Zebra-striped table rows */
tr:nth-child(even) { background: #f4f4f4; }

/* ::before and ::after REQUIRE the content property — without it, nothing appears */
.required::after {
  content: " *";
  color: red;
}

Transitions & Animations

Why do transitions exist? Without transitions, CSS changes happen instantly — a button goes from blue to red in 0 milliseconds. That feels jarring and cheap. Transitions add smooth, gradual changes that make your UI feel polished and professional. Think of it like a dimmer switch vs a light switch — both control brightness, but the dimmer does it smoothly.

Transition vs Animation: A transition is a simple A-to-B change triggered by a state change (like hover). An animation can have multiple steps (A → B → C → D), can loop, and can run automatically without any trigger.

/* Transition — smooth change when state changes (e.g., hover) */
.btn {
  background: #e94560;
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #d63850;
  transform: scale(1.05);
}

/* Transition shorthand: property duration timing-function delay */
.box { transition: all 0.3s ease-in-out; }

/* Animation with @keyframes — multiple steps, can loop */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fadeIn 1s ease-in forwards;
  /* forwards = stay at the final state after animation ends */
}

Responsive Design

Why does responsive design matter? People browse on phones, tablets, laptops, and 4K monitors. A design that looks perfect on a laptop will be unreadable on a phone if it is not responsive. Media queries let you write different CSS rules for different screen sizes — like having different outfits for different weather.

There are two approaches:

• Mobile-first (recommended): Write base CSS for mobile, then use min-width to add styles for larger screens. You are "building up."
• Desktop-first: Write base CSS for desktop, then use max-width to override for smaller screens. You are "scaling down."

/* Mobile-first approach — start small, scale up */
.container { width: 100%; }  /* base: full width on mobile */

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

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

/* Desktop-first (max-width) — hide sidebar on mobile */
@media (max-width: 600px) {
  .sidebar { display: none; }
  .main    { margin-left: 0; }
}

Shorthand Properties

Shorthand properties let you set multiple related properties in one line. Less typing, cleaner code. But you need to remember the order of values.

/* Margin / Padding shorthand */
margin: 10px;                  /* all 4 sides = 10px */
margin: 10px 20px;             /* top/bottom = 10px, left/right = 20px */
margin: 10px 20px 30px;        /* top = 10, left/right = 20, bottom = 30 */
margin: 10px 20px 30px 40px;   /* top right bottom left (clockwise) */

/* Border shorthand */
border: 2px solid #333;       /* width  style  color */

/* Background shorthand */
background: #fff url("img.png") no-repeat center/cover;

/* Font shorthand */
font: italic bold 16px/1.5 Arial, sans-serif;

More Practice Questions