CSS Syntax and Basic Selectors

First lesson of the CSS Fundamentals course, free to read: about 15 minutes, 3 exercises and 3 quiz questions. This is the catalogue's base lesson; in the student space, it is rewritten for your profile.

Objectives

Link a stylesheet to an HTML page
Write a CSS rule (selector, property, value)
Target elements by type, class, id, and simple combinators

Anatomy of a CSS rule Basic selectors

CSS (Cascading Style Sheets) describes the appearance of a page: colors, fonts, spacing, layout. HTML keeps the structure, CSS handles the presentation. This separation lets you change a site’s entire design without touching the content.

Linking CSS to a page

The recommended method is an external file, shared by all pages:

<head>
  <meta charset="UTF-8">
  <title>My site</title>
  <link rel="stylesheet" href="css/style.css">  <!-- external stylesheet -->
</head>

Two other methods exist: a <style> tag in the <head> (handy for testing) and the style="..." attribute on an element (to be avoided: hard to maintain and very high priority).

Anatomy of a rule

/* selector: WHO we target */
h1 {
  color: darkslateblue;   /* property: value; */
  font-size: 2rem;        /* each declaration ends with ; */
}

A forgotten semicolon or brace often invalidates the next declaration, without any error message. Your browser’s developer tools (right-click, Inspect) show ignored declarations struck through or flagged.

Basic selectors

p { line-height: 1.6; }          /* type: all <p> elements */

.carte { border: 1px solid #ccc; }  /* class: all elements with class="carte" */

#panier { position: sticky; }    /* id: the one element with id="panier" */

* { box-sizing: border-box; }    /* universal: all elements */

In HTML, an element can have several classes separated by spaces:

<article class="carte carte--promo">...</article>

.carte--promo { border-color: crimson; }
.carte.carte--promo { /* element with BOTH classes (no space) */ }

Prefer classes for styling: they are reusable and low in priority, so they are easy to override. Keep id for anchors and JavaScript.

Combining selectors

nav a { text-decoration: none; }     /* descendant: any <a> inside a <nav> */
ul > li { margin-bottom: .5rem; }    /* direct child only */
h2 + p { font-weight: bold; }        /* the <p> immediately following an <h2> */
h1, h2, h3 { font-family: Georgia, serif; }  /* group: same style for all three */

The difference between a space and > matters: nav a also targets a link in a nested list, while nav > a only targets links that are direct children of nav.

Attribute selectors

a[href^="https"] { color: green; }   /* href starts with https */
input[type="email"] { width: 100%; }

Working method

Write the semantic HTML first.
Add classes where you need specific styles.
Inspect in the browser: you can edit the CSS live to test, then carry the changes over to your file.

Exercises

Solutions and tests stay on the server. In the student space, your code is run and checked, and the tutor gives hints before the solution.

CodeDifficulty 1HTML page in the browser2 hints

First rules

In the <style> tag, write three rules: all <h1> elements in color rebeccapurple; elements with class intro with font-size: 20px; the element with id note with font-style: italic.

<style>
  /* vos règles */
</style>
<h1>Titre</h1>
<p class="intro">Introduction</p>
<p id="note">Remarque</p>

CodeDifficulty 2HTML page in the browser2 hints

Target with combinators

Without adding any class to the HTML: remove the underline (text-decoration: none) from the links inside the nav only, and make bold (font-weight: bold) the <li> elements that are direct children of .menu (not those in the sublist).

<style>
  /* vos règles */
</style>
<nav>
  <ul class="menu">
    <li><a href="/">Accueil</a></li>
    <li>Produits
      <ul class="sous-menu">
        <li><a href="/sacs">Sacs</a></li>
      </ul>
    </li>
  </ul>
</nav>
<p><a href="/cgv">CGV</a></p>

Multiple choiceDifficulty 21 hint

Read a selector

What does .carte.promo target?

The .promo elements located inside a .carte
Elements that have both the carte class and the promo class
Elements that have the carte class or the promo class

End-of-lesson quiz

What is the recommended method for adding CSS to a site?

The style attribute on every element
An external file linked with <link>
A <style> tag in every page

Which selector targets the

elements that are direct children of a

ul li
ul > li
ul + li

How many elements can share the same id in a page?

Only one
Two
Unlimited