CSS3.

The cascade decides which declaration wins when several rules set the same property on one element. It sorts them by origin and importance first, so author styles beat browser defaults, and then by cascade layer. Only then does specificity decide, and if specificity ties, the declaration that comes later in the source wins.

Specificity is a weight with three columns, compared from left to right:

• IDs, such as #nav
• classes, attributes and pseudo-classes, such as .btn, [type="text"] and :hover
• elements and pseudo-elements, such as p and ::before

The first column that differs decides. One ID beats any number of classes, so #nav a outranks a selector of eleven classes. The universal selector * and :where() add nothing.

An inline style attribute beats any selector in a normal author stylesheet. !important lifts a declaration above all normal declarations, whatever their specificity, so use it sparingly.

display: none removes the element from the layout, so it takes no space and the content around it closes the gap. visibility: hidden keeps the element's box in the layout and only stops drawing it, so an empty space stays where it was.

They also differ for children. A child of a visibility: hidden parent can set visibility: visible and appear again, while nothing inside a display: none element renders.

In two ways they behave the same:

• Neither one can be clicked or take keyboard focus.
• Both leave the accessibility tree, so neither hides text visually while keeping it for screen readers.

Toggling display makes the browser recalculate the layout, because the page reflows around the gap. Toggling visibility only repaints.

opacity: 0 is a third option. It keeps the space and still receives clicks, which is why fade effects often pair it with visibility.

Padding is space inside an element's border, between the border and the content, while margin is space outside the border that pushes neighboring elements away.

Where each one sits explains how they behave:

• The background color fills the padding. The margin is always transparent.
• Padding adds to the rendered size under the default content-box. With box-sizing: border-box, padding sits inside the declared width instead. Margin never counts toward the width.
• Vertical margins between blocks can collapse into one gap. Padding never collapses.
• Margin can be negative or auto, and margin: 0 auto centers a block that has a width. Padding cannot be negative.

Use padding to give the content room inside its box, and margin to space boxes apart.

CSS selectors pick out elements or parts of elements by their features, their place in the document, or their state.

• Element, class and ID selectors match names such as div, .classname and #idname.
• Attribute selectors match on an attribute, as in [type="text"].
• Combinators relate two elements.
  • The descendant combinator in div p matches at any depth.
  • The child combinator in div > p matches direct children only.
  • The adjacent sibling in h2 + p is the p right after an H2 heading.
  • The general sibling in h2 ~ p is any later p sibling of an H2 heading.
• A pseudo-class such as :hover matches a state, and a pseudo-element such as ::before targets part of an element.

The universal selector * matches every element. On its own it adds nothing to specificity. In your own stylesheet, any type, class or ID rule for the same property overrides a bare *. Its two common uses are a reset at the top of a stylesheet and a rule for everything inside a container.

/* Reset all margins and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Target all descendants */
.container * {
  font-family: Arial, sans-serif;
}

The reset zeroes the browser's default spacing and switches every box to border-box. It wins over browser defaults because author styles beat them whatever their specificity. Because * does not match pseudo-elements, resets often list *, *::before, *::after.

Use it sparingly, because it can affect performance and override styles you did not intend. It sets the value directly on each element, which beats any value that element would inherit. And .container * has the class's specificity, so it also beats type rules such as code { font-family: monospace; } inside the container.

The box model says every element renders as a rectangle built from four layers, from the inside out:

1. Content, where the text and images sit, sized by width and height.
2. Padding, clear space between the content and the border.
3. Border, the line drawn around the padding.
4. Margin, transparent space outside the border that separates the box from its neighbors.

The space a box takes up is the content plus padding, border and margin on both sides. With the default box-sizing: content-box, width sets only the content, so padding and border are added on top. A box with width: 200px, padding: 20px and a 5px border renders 250px wide before its margins.

Setting box-sizing: border-box makes width include the padding and border, so the same box stays 200px wide. Margins always sit outside, and vertical margins between blocks can collapse into one gap.

overflow takes five values that decide whether content bigger than its box spills out, gets clipped, or scrolls.

• visible, the default, lets content spill outside the box.
• hidden clips content at the padding edge with no scrollbars, though script can still scroll it.
• scroll clips and always shows scrollbars, even when nothing overflows.
• auto clips and shows scrollbars only when content overflows.
• clip clips like hidden but allows no scrolling at all, even from script.

Every value except visible and clip creates a new block formatting context. So overflow: hidden contains floats and stops margin collapsing with children, while clip does neither.

overflow is shorthand for overflow-x and overflow-y, so overflow: hidden auto sets each axis on its own.

Make the parent a flex or grid container and let it align the child. Three methods are common, and the first two are the usual choice today.

Flexbox centers on both axes: justify-content aligns along the main axis and align-items along the cross axis.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid centers with a single alignment declaration. place-items: center sets align-items and justify-items together.

.container {
  display: grid;
  place-items: center;
}

Absolute positioning fits an element that must sit on top of other content, such as a modal. top and left move its top-left corner to the middle of the positioned parent, and translate pulls it back by half its own size.

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox and grid center a child of any size and keep it in normal flow. The absolute method takes the element out of flow, and its parent needs a position other than static.

The position property decides whether an element stays in normal flow and what its offset properties are measured from. It has five values:

• static, the default, keeps the element in normal flow and ignores offsets.
• relative keeps its space in the flow and shifts the element visually.
• absolute takes the element out of the flow and places it against its nearest positioned ancestor, or the initial containing block.
• fixed takes the element out of the flow and places it against the viewport, so it stays put while the page scrolls.
• sticky acts like relative until scrolling reaches its offset, then sticks there, but only while its containing block is still on screen.

A sticky element sticks inside its nearest scrolling ancestor, so overflow: hidden on a parent can stop it working.

A fixed element is placed against an ancestor instead of the viewport when that ancestor has a transform, filter or perspective.

A media query applies a block of CSS only while the device or viewport matches a condition, such as a minimum width. The browser re-checks the condition as the window resizes, so the styles switch live.

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

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

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

The example is mobile first. The base rule styles the smallest screens, and each min-width block layers on changes once the viewport is wide enough. On a wide screen both blocks match, and the desktop width wins because it comes later with the same specificity.

The features queried most are the viewport's width and height. orientation and resolution cover screen shape and pixel density. Media queries also test user preferences such as prefers-color-scheme, and media types such as print. Conditions combine with and, and a comma between queries means or.

min-width applies its styles when the viewport is at least that wide, and max-width applies them when the viewport is at most that wide. Both include the value itself.

/* Mobile first */
@media (min-width: 768px) { /* Tablet and up */ }

/* Desktop first */
@media (max-width: 767px) { /* Mobile only */ }

The choice sets the direction you build in. With mobile first, the base styles target small screens and min-width queries add layout as the screen grows. With desktop first, the base styles target large screens and max-width queries undo or simplify them as it shrinks.

Mobile first is generally preferred, partly for performance, because phones never apply the rules inside the wider blocks. It also keeps the base styles simple, since small screens start from a single column with nothing to override. Desktop first piles up overrides, because each smaller breakpoint undoes the one above it.

The viewport meta tag tells a mobile browser how wide to lay out the page and how far to zoom. Without it, a phone lays the page out in a virtual viewport, usually 980px wide, then shrinks it to fit, so text renders tiny.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width makes the layout viewport match the device's width in CSS pixels.
• initial-scale=1.0 opens the page at normal zoom instead of zoomed out.
• user-scalable=no blocks pinch zoom. Avoid it, because it stops people with low vision from enlarging the text.

Responsive CSS depends on this tag. Media queries test the layout viewport, so without it a phone matches the desktop breakpoints. On phones with a notch, adding viewport-fit=cover extends the page under it, and env(safe-area-inset-top) and its siblings pad content back into view.

Make the image fluid so it shrinks with its container, then use srcset to let the browser download a file sized for the screen.

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% stops an image from overflowing a narrow container, and height: auto keeps its aspect ratio as it scales.

<img src="image-400.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Description">

srcset lists the same image at several widths, and sizes tells the browser how wide it will display at each breakpoint. The browser weighs that against the screen's pixel density and downloads only the best match. For a different crop on small screens, <picture> with <source media> handles art direction.

When an image must fill a fixed frame, aspect-ratio reserves the box and object-fit: cover crops the image to fill it.

CSS background images use media queries, or image-set() for pixel density, to swap files.

Vendor prefixes are engine-specific prefixes on property names that browsers used for experimental CSS, and today they are rarely needed. Each engine had its own:

• -webkit- for Chrome, Safari and newer Edge
• -moz- for Firefox
• -ms- for Internet Explorer and Edge before Chromium
• -o- for old Opera

.element {
  -webkit-transform: rotate(45deg); /* Safari/Chrome */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE */
  transform: rotate(45deg);         /* Standard */
}

The standard declaration goes last, so any browser that supports it uses it.

Browsers now ship experimental features behind flags instead, and modern CSS features need fewer prefixes. A few properties still require one, such as -webkit-line-clamp. Use a tool like Autoprefixer to add prefixes automatically, only where your supported browsers need them.

@import pulls another stylesheet into the current one, and the imported rules apply as if they were written at that point in the file.

/* Must be at top of stylesheet */
@import url("base.css");
@import url("components.css") screen and (min-width: 768px);
@import "utilities.css" layer(utilities);

/* Regular styles after imports */
.custom {
  color: red;
}

The main limitation is speed. The browser only discovers an @import after it downloads and parses the file that contains it, so the files load one after another. Rendering stays blocked until the imported CSS arrives. Separate <link> tags in the HTML download in parallel, so they are better for performance.

The rule must come before every other rule in the file, except @charset and @layer statements, or the browser ignores it. Imports can be conditional on a media query or a supports() condition, and the browser can skip a file whose condition fails. layer() puts the imported rules into a cascade layer.