CSS basics: linking a stylesheet, rules and properties

Your portfolio has a solid structure, but it looks like a document from the 1990s. Time to bring it to life. In this lesson you will connect a stylesheet to your pages, learn the anatomy of a CSS rule, and apply your first colors and text styles. By the end, your site will no longer look plain.

What CSS does

CSS stands for Cascading Style Sheets. It describes how HTML elements are displayed: colors, fonts, spacing, sizes, positions. The golden principle is the separation of concerns: HTML says what things are, CSS says how they look. You can redesign an entire site without touching its HTML, and keep a consistent look across dozens of pages by sharing one stylesheet.

Three ways to add CSS

There are three places where you can put styles.

1. Inline, in a style attribute on one element: <p style="color: red;">. It works, but it mixes content and style and is hard to maintain.
2. Internal, in a style element in the page’s head. Fine for a quick test.
3. External, in a separate .css file linked from the page. This is the professional standard, and the one we will use.

Linking your stylesheet

You already created css/style.css. To use it, add this line inside the head of each page:

<link rel="stylesheet" href="css/style.css">

The path is relative to the HTML page, exactly like an image path. For a page in a subfolder, you would write ../css/style.css. If your styles do not apply, the path is the first thing to check: open the Network panel and look for a red 404 on the CSS file.

Test the link with a rule you cannot miss. Put this in style.css, save, and refresh the page:

body {
  background-color: lightyellow;
}

If the background turns pale yellow, the connection works. You can remove it after that.

Anatomy of a rule

h1 {
  color: #1d4ed8;
  font-size: 2.5rem;
}

• The selector (h1) picks which elements the rule applies to.
• The declaration block is between curly braces.
• Each declaration is a property, a colon, a value and a semicolon.

A stylesheet is a list of such rules. Whitespace is free, but keep one declaration per line and indent by two spaces: you will read your own code more easily.

Comments in CSS

CSS comments use a different syntax than HTML:

/* Main heading of the home page */
h1 { color: #1d4ed8; }

The first selectors

You will study selectors thoroughly in the next lesson. For now, three simple ones are enough:

p { color: #333333; }             /* every paragraph */
.intro { font-size: 1.25rem; }    /* every element with class="intro" */
#logo { font-weight: bold; }      /* the element with id="logo" */

A class is a label you add in HTML with the class attribute and reuse as many times as you wish: <p class="intro">. An id must be unique in a page. In practice, classes are what you will use most.

Colors

You can write a color in several ways:

• A name: tomato, navy, white.
• A hexadecimal code: #1d4ed8, six characters for red, green and blue. A short form like #fff also exists.
• A function: rgb(29, 78, 216), or hsl(224, 76%, 48%), which describes the hue, the saturation and the lightness.

Two properties matter most. color sets the text color. background-color sets the background. You will explore color further soon.

Your first text styles

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #222222;
  background-color: #f8fafc;
}

h1 {
  color: #1d4ed8;
}

a {
  color: #1d4ed8;
}

a:hover {
  color: #c2410c;
}

• font-family lists fonts in order of preference, ending with a generic family such as sans-serif as a fallback.
• font-size: 1rem equals the browser’s base size, usually 16 pixels. The unit rem respects user settings.
• line-height sets the spacing between lines. A value around 1.5 greatly improves readability.
• a:hover applies when the mouse is over a link. This is a pseudo-class: it targets a state of an element.

Styling several elements at once

Separate selectors with commas to share a declaration:

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #1e293b;
}

When something does not work

CSS is forgiving but silent: an error is just ignored, and the page looks wrong without any message. Here are the usual suspects:

• A missing semicolon or closing brace: the next declaration gets ignored.
• A typo in a property name, such as colour instead of color.
• An invalid value, like font-size: big.
• A wrong path in the link element.
• Forgetting to refresh after saving.

Applying it to your portfolio

Add the link element to index.html, about.html, services.html and contact.html. As you edit style.css, all four pages change together, which shows the power of a shared stylesheet. Add an intro class to your first paragraph for later use:

<p class="intro">I tell stories with light and ink.</p>

Your turn

1. Link css/style.css in all your pages.
2. In style.css, style body with a font family, a line-height of 1.6, a text color and a light background.
3. Give the h1 and h2 elements a color of your choice.
4. Make links change color on hover.
5. Make the paragraph with class intro larger.

/* Base */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background-color: #f9fafb;
}

/* Headings */
h1, h2 {
  color: #0f766e;
}

/* Links */
a {
  color: #0f766e;
}
a:hover {
  color: #b45309;
}

/* Intro paragraph */
.intro {
  font-size: 1.25rem;
}