CSS Basics: Style Your First Web Page

CSS stands for Cascading Style Sheets. It's a list of rules. Each rule picks some elements on the page and sets how they look: colors, sizes, spacing, layout.

h1 {
  color: navy;
  font-size: 32px;
}

• Selector (h1): which elements the rule applies to.
• Declaration block (the curly braces): the settings.
• Property (color) and value (navy), joined by a colon and ended with a semicolon.

Three ways to add CSS to a page

<!-- 1. A separate file (best for real sites) -->
<link rel="stylesheet" href="style.css">

<!-- 2. A <style> block in the <head> -->
<style> p { color: gray; } </style>

<!-- 3. Inline, on one element (use sparingly) -->
<p style="color: red">Warning!</p>

A separate file is best because every page on your site can share it. Change one line and the whole site updates.

The "cascading" part

When two rules set the same property on the same element, the browser has to pick one. In short:

1. The more specific selector wins (an ID beats a class, a class beats a tag name).
2. If they're equally specific, the rule that comes later wins.
3. Some properties, like color and font-family, are inherited: set them on body and every element inside gets them too.

Comments. Write notes to yourself between /* and */. The browser ignores them.

Selectors are how you point at things. These cover almost everything a beginner needs:

/* HTML: <p class="tip">Save often.</p> */
.tip {
  background: lightyellow;
  border-left: 4px solid orange;
}

Prefer classes over IDs for styling. IDs are so specific that they're hard to override later. Save them for links like #section-2 and for JavaScript.

Four ways to write a color

Use color for text and background-color (or just background) for the fill behind it. Make sure there's strong contrast between the two so everyone can read it.

Units: how big is big?

A value of zero needs no unit. margin: 0 is fine. Any other number needs one: margin: 10 is ignored.

Every element is a rectangle made of four layers, from the inside out:

1. Content: the text or image. Its size is set by width and height.
2. Padding: space inside the border. It shows the element's background color.
3. Border: a line around the padding, like border: 2px solid black.
4. Margin: space outside the border that pushes other elements away. Always transparent.

Shorthand lets you set all four sides at once, going clockwise from the top: padding: 10px 20px 10px 20px is top, right, bottom, left. Two values mean top-and-bottom, then left-and-right: padding: 10px 20px.

The surprise: width doesn't include padding

By default (box-sizing: content-box), width sets only the content. Padding and border get added on top, so a width: 200px box with 20px padding and a 2px border is really 244px wide. Most developers switch to border-box, where width includes padding and border:

*, *::before, *::after {
  box-sizing: border-box;
}

See it in your own browser. Right-click any element on any website and choose Inspect. The developer tools show its box model with the exact padding, border and margin.

Normally, block elements like div and p stack top to bottom. Put display: flex on a parent, and its direct children (the flex items) line up in a row instead.

.toolbar {
  display: flex;
  justify-content: space-between; /* along the row */
  align-items: center;          /* across the row */
  gap: 12px;                     /* space between items */
}

On a child, flex: 1 means "take a share of the leftover space." Give every item flex: 1 and they split the row evenly.

The two axes. justify-content works along the direction items flow. align-items works across it. Switch to flex-direction: column and they swap: justify becomes vertical, align becomes horizontal.

.stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Lots of people will read your page on a phone, so it needs to work on narrow screens too. Two pieces make that happen.

1. The viewport tag

Put this in every page's <head>. Without it, phones pretend to be a wide desktop screen and shrink your page to fit.

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

2. Media queries

A media query wraps rules that apply only when a condition is true, usually the screen width.

/* Phones first: cards stack in a column */
.cards { display: flex; flex-direction: column; gap: 12px; }

/* 700px and wider: side by side */
@media (min-width: 700px) {
  .cards { flex-direction: row; }
}

• min-width means "this wide or wider." Writing phone styles first and adding min-width queries is called mobile-first.
• max-width means "this wide or narrower." Handy for fixing one thing on small screens.
• Pick breakpoints where your layout starts to look cramped, not for specific phone models.

Habits that make most pages responsive for free

• img { max-width: 100%; height: auto; } so images never overflow.
• Use max-width instead of a fixed width on containers.
• Let flex rows wrap with flex-wrap: wrap.
• Use rem for text so it respects the reader's settings.

Test it. In Chrome, Edge or Firefox, open developer tools and click the phone/tablet icon (device toolbar or responsive design mode) to preview any width.

Pick a challenge. The HTML is fixed; write CSS in the box and the preview updates as you type. When your CSS does the job, you'll see a green check. Stuck? Press Show answer.

Tip: press Tab in the CSS box to indent. Press Esc first if you want Tab to move to the next button instead.