CSS Basics: Selectors, Flexbox and Media Queries

CSS (Cascading Style Sheets) is the language that controls how HTML looks: colors, spacing, fonts and layout. Three concepts cover most everyday CSS: selectors decide which elements a rule styles, the box model describes how every element takes up space, and Flexbox lines elements up in a row or column. This guide explains each one, plus media queries, colors and units.

Key takeaways#

• Selectors choose which elements a rule applies to; classes are the reusable default, and ID selectors are harder to override.
• Every element is a box made of content, padding, border and margin, and box-sizing decides whether width includes the padding and border.
• Adding display: flex to a container lines up its children in a row or column and makes aligning them easy.
• Media queries apply styles only when a condition is true, such as the viewport reaching a minimum width.

What does CSS do?#

HTML provides the structure of a page (the skeleton). CSS provides the presentation (the skin and clothes).

Without your own CSS, a page falls back to the browser's plain default styles. With CSS, you can build anything from a clean blog layout to animations and 3D transforms.

1. Selectors: How do you target elements?#

To style something, you first have to tell CSS which elements you are talking about.

• Type selector: Targets every element of a given type.
  content_copy

  p { color: red; } /* All paragraphs are red */
  

• Class selector (.): Targets every element with that class. Reusable.
  content_copy

  .btn { background: blue; } /* Any element with class="btn" */
  

• ID selector (#): Targets the one element with that ID.
  content_copy

  #header { height: 60px; } /* The element with id="header" */
  

Pro tip: Use classes (.classname) for most of your styling. An ID selector has higher specificity than any number of class selectors, so rules written with IDs are hard to override later.

2. How do padding, border and margin add up?#

The box model is the foundation of CSS layout: every element on a page is rendered as a rectangular box (MDN: the box model). From the inside out, that box has four layers: the content, padding (space inside the border), the border and margin (space outside the border that pushes other elements away).

.card {
    width: 300px;
    padding: 20px;   /* Space inside */
    border: 1px solid #ccc;
    margin: 50px;    /* Space outside */
}

By default (box-sizing: content-box), width sets only the content area, so this .card is 342px wide on screen: 300px of content, plus 20px of padding and a 1px border on each side. With box-sizing: border-box, width includes padding and border, and the same card is exactly 300px wide (MDN: box-sizing).

For worked width calculations, margin collapsing and how display changes padding and margins, read the CSS box model explained with examples.

3. How does Flexbox work?#

Before Flexbox, placing elements side by side usually meant float: left and clear: both workarounds. Flexbox is a layout mode for arranging items in one dimension, either a row or a column (MDN: basic concepts of flexbox).

To enable it, add display: flex to the container. Its direct children become flex items.

.container {
    display: flex;
    justify-content: center; /* Center along the main axis (horizontal by default) */
    align-items: center;     /* Center along the cross axis (vertical by default) */
    gap: 20px;               /* Space between items */
}

Common properties:

• flex-direction: column: Stacks items vertically. This also swaps the directions that justify-content and align-items control.
• flex-wrap: wrap: Lets items move onto a new line when there isn't enough space.

For layouts that need rows and columns at the same time, CSS Grid is often a better fit. See CSS Grid vs Flexbox: when to use which.

4. How do media queries make a site responsive?#

Your site should work on phones, tablets and desktops. Media queries apply styles only when a condition is true, such as the viewport being at least a certain width (MDN: using media queries).

/* Default styles (mobile first) */
.sidebar {
    display: none; /* Hide the sidebar on small screens */
}

/* Tablet and up (viewport 768px wide or more) */
@media (min-width: 768px) {
    .sidebar {
        display: block; /* Show the sidebar on larger screens */
        width: 250px;
    }
}

This is a mobile-first approach: the default rules target small screens, and min-width queries add styles as the screen gets wider.

5. Which colors and units should you use?#

Colors

• Hex: #ff0000 (red)
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%), meaning hue, saturation and lightness. Many developers prefer it because you can make a color lighter or darker by changing a single number.

Units

• px: A fixed CSS unit. Good for borders (1px).
• rem: Relative to the font size of the root (<html>) element. Good for text and spacing, because sizes follow the user's default font-size setting when you don't override the root size in pixels.
• %: Relative to the parent element (strictly, the containing block). For width, that means a percentage of the parent's width.

Summary#

1. Use classes for styling.
2. Learn the box model (margin > border > padding > content) and consider box-sizing: border-box.
3. Use Flexbox for one-dimensional layout.
4. Use media queries for responsive design.

Try editing CSS live in the HTML, CSS & JavaScript editor: add an element with class="card", paste the .card rule, and toggle box-sizing to watch its width change. For the markup side of the page, read HTML basics: tags, attributes and structure.

Frequently asked questions#

What is the difference between padding and margin in CSS?

Padding is space inside an element's border, between the border and the content, and it shows the element's background color. Margin is space outside the border that separates the element from its neighbors and is always transparent. Vertical margins between block elements can also collapse into one, which padding never does.

Should I use classes or IDs for CSS styling?

Use classes for almost all styling, because they are reusable and have lower specificity, which keeps rules easy to override. An ID must be unique on the page, and an ID selector outranks any number of class selectors. Keep IDs for fragment links, form labels and JavaScript hooks instead of styles.

What does box-sizing: border-box do?

It makes an element's width and height include its padding and border instead of only the content area. A box with a width of 300px and 20px of padding stays 300px wide rather than growing to 340px. Many CSS resets apply border-box to every element because it makes sizing more predictable.

What is the difference between px and rem in CSS?

A px value is a fixed CSS unit that does not depend on any font size. A rem value is relative to the root element's font size, which browsers set to 16px by default unless the user or page changes it. Using rem for text lets sizes grow when users increase their browser's default font size.