<Jugami Web Design/>

High School Web Design · Unit 2

Styling with CSS: Selectors, Box Model and Color

Your first HTML page works, but it looks like a 1990s research paper: black text, white background, one plain font. Every polished site you visit runs on the same HTML ideas. What makes them look different is CSS.

Here's the roadmap: first you'll learn how a CSS rule is built and how it picks what to style. Then you'll meet the box model, which explains spacing. After that come colors and fonts, a hands-on restyle, and a self-guided quiz.

What CSS is and how a rule works

CSS (Cascading Style Sheets) is the language that controls how HTML looks: colors, fonts, spacing and layout. HTML says what something is. CSS says how it should look.

CSS is written as rules. Each rule has a selector, which picks the elements, and a block of declarations. Each declaration is a property and a value, joined by a colon and ended with a semicolon.

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

Read it aloud: "For every h1, set the color to navy and the font size to 32 pixels."

Where CSS goes

The cleanest way is a separate file, linked from the <head>: <link rel="stylesheet" href="style.css">. One file can then style every page on your site. For quick tests, you can also put rules inside a <style> element in the head.

Why "cascading"? Several rules can target the same element. The browser combines them in a set order, called the cascade. First it looks at where a rule comes from (its origin): your site's styles beat the browser's built-in defaults. A declaration marked !important jumps ahead of normal ones, so use it rarely. Next comes specificity (see below). If rules are still tied, the one written later wins.

Selectors: choosing what to style

p
A type selector. Matches every <p> element.
.card
A class selector (starts with a dot). Matches every element with class="card". Many elements can share a class.
#shout
An ID selector (starts with #). Matches the one element with id="shout". An ID should be used only once per page.
nav a
A descendant selector. Matches <a> elements anywhere inside a <nav>.
a:hover
A pseudo-class. Matches a link while the mouse pointer is over it.

When rules disagree, the more specific selector wins: an ID beats a class, and a class beats a type selector. That's why a .card rule can override a p rule even if it comes first.

The box model

Here's the big idea of CSS layout: the browser draws every element as a rectangular box. Each box has four layers, from the inside out.

Diagram of the CSS box model: content in the center, surrounded by padding, then a border, then margin on the outside. margin border padding content
Content, padding, border, margin. Original diagram by Jugami.
  1. Content: the text or image itself.
  2. Padding: space inside the border.
  3. Border: the line around the padding.
  4. Margin: space outside the border.
content
The text or image itself. Its size is set with width and height.
padding
Space inside the border, between it and the content. It shows the element's background color.
border
A line around the padding, e.g. border: 3px solid orange;
margin
Space outside the border that pushes other boxes away. It's always transparent.

By default, width sets only the content area, so padding and border make the box bigger. Many developers add box-sizing: border-box; so that width includes the padding and border too. That makes sizes easier to predict.

How do we know? You can see any element's boxes. In a desktop browser, right-click part of a page, choose Inspect, and look for the box model diagram in the Styles or Computed panel. It shows the real margin, border and padding in pixels.

Colors and fonts

Colors

The color property sets text color. background-color sets the fill behind it. You can write a color several ways:

Contrast matters. Light gray text on white might look sleek, but many people can't read it. The WCAG accessibility guidelines set two levels. Level AA asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text (about 24px, or about 18.66px if bold). The stricter Level AAA asks for 7 to 1 for normal text and 4.5 to 1 for large text. Every text color on this page meets 7 to 1.

Fonts

font-family picks the typeface. List a few choices, ending with a generic family, in case the first isn't installed: font-family: Georgia, "Times New Roman", serif;. Other useful properties are font-size, font-weight (like bold) and line-height, the spacing between lines.

Hands-on: restyle your page

Use the my-site folder from Unit 1. If you don't have it, make a new index.html with a heading and a couple of paragraphs. About 25 minutes.

  1. In the same folder, create a file named style.css.
  2. In the <head> of index.html, add <link rel="stylesheet" href="style.css">.
  3. In style.css, add a body rule: 
    body {
  font-family: Georgia, serif;
  background-color: #fffdf7;
  color: #14213d;
  line-height: 1.6;
}
  4. Give one paragraph class="card" in the HTML. Then style it with a border, padding and margin: 
    .card {
  border: 3px solid #fca311;
  padding: 16px;
  margin: 12px 0;
}
  5. Save and reload. Change the padding to 40px and then to 0. What changes, the space inside the border or outside it?
  6. Challenge: give one element an id and style it with an ID selector. Then write a p rule with a different color. Which rule wins, and why?

Try the interactive editor at jugami.com/web-design/styling-with-css/

Try it right here: live CSS editor

Edit the code on the left and press Show my page. Your page appears in the frame. Nothing is saved or sent anywhere.

Self-guided quiz

Five questions. Pick an answer for each, then check your score. Nothing is recorded.

1. In the rule p { color: red; }, what is color?

2. Which selector matches every element with class="card"?

3. In the box model, which layer is the space just inside the border, around the content?

4. A paragraph matches both p { color: blue; } and #intro { color: green; }. What color is it?

5. Why end a font-family list with a generic name like serif?

Talk about it

Sources

Credits: box model diagram and share image are original Jugami artwork.