CSS Intro

Hier

Note 3 concepts qui t’ont le plus marqué

Explique à ton/ta voisin-e

Revue de code (live coding)

Le CV

Proposition de sémantique pour un CV
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Marc Bouvier - CV</title>
</head>
<body>


<main>
    <header>
        <hgroup>
            <h1>Marc Bouvier</h1>
            <!-- Accroche -->
            <p>Prof de HTML/CSS - développeur indépendant</p>
        </hgroup>
        <!-- Coordonnées -->
        <address>
            3 rue de Coda<br>
            67300 Strasbourg<br>
            <a href="tel:+33663205638">+33663205638</a><br>
            <a href="mailto:marc@baldir.fr">marc@baldir.fr</a><br>
        </address>
        <!-- photo -->
        <img src="marc-bouvier-2024.png" width="128" height="128"
             alt="Marc Bouvier">
    </header>

    <!-- Compétences -->
    <section>
        <h2>Compétences</h2>
        <ul>
            <li>HTMl</li>
            <li>CSS</li>
            <li>Java</li>
        </ul>
    </section>
    <!-- expéreiences -->
    <section>

        <h2>Expériences</h2>

        <section>
            <h3>Prof de HTML</h3>
            <p>
                <em>Novembre 2025</em>
            </p>
            <p>

                <strong>Ecole Coda</strong>
            </p>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </section>
        <section>
            <h3>Développeur Typescript</h3>
            <p><strong>Iroco</strong></p>
            <p><em>2023 - Aujourd'hui</em></p>
            <ul>
                <li>Typescript</li>
                <li>Svelte</li>
            </ul>

        </section>
    </section>
    <!-- Education -->
    <section>

        <h2>Education</h2>

        <section>
            <h3>Ingénieur en informatique</h3>
            <p>
                <em>2007-2011</em>
            </p>
            <p>
                <strong>UTBM</strong>
            </p>
            <ul>
                <li>Génie logiciel</li>
                <li>Bases de données</li>
            </ul>
        </section>
    </section>
</main>
</body>
</html>

CSS c’est quoi ?

Cascading Style Sheets

permet d’appliquer des styles à du HTML.

Le HTML c’est le contenu le CSS c’est ce qui le rend joli.

MDN - Apprendre : CSS, comment ça marche ?

MDN - Apprendre : Comment CSS est structuré

Exemple - styler une barre de navigation

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

<nav class="navbar">
    <ul class="nav-links">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #356;
  padding: 1rem 2rem;
  color: white;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ff9800;
}

Rendu

css intro exemple navigation

Sandbox

Pourquoi CSS ?

  • Séparer le contenu de la page Web de sa présentation [1]

  • Créer des sites plus maintenables et flexibles

Avec CSS on peut contrôler la mise en page, les couleurs, polices, apparence général sans (trop) altérer le code HTML.

1. Application du principe de sépération des responsabilités

Exemple - styler un bouton

<button class="regular-btn">Unstyled Button</button>
<button class="round-btn">Round Button</button>
.round-btn {
  font-size: 1rem;
  font-family: 'Segoe UI', sans-serif;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #2ecc71;
  color: white;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
}

.round-btn:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
}

Rendu

css intro exemple bouton style

Sandbox

Possibilité de style réactif (responsive)

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

<header class="header">
    <h1>Mon site réactif</h1>
    <p>Cette mise en page s'adapte à la taille de l'écran</p>
</header>

<main class="content">
    <section class="box">Boite 1</section>
    <section class="box">Boite 2</section>
    <section class="box">Boite 3</section>
</main>
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.header {
  background-color: #4CAF50;
  color: white;
  padding: 2rem;
  text-align: center;
}

.content {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.box {
  flex: 1;
  min-width: 200px;
  background-color: #ddd;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: #ccc;
}

/* Réactife : pour tablettes et en dessous (≤ 768px) */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 90%;
    font-size: 1.1rem;
  }
}

/* Réactif: pour téléphones (≤ 480px) */
@media (max-width: 480px) {
  .header {
    padding: 1.5rem 1rem;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .header p {
    font-size: 1rem;
  }

  .box {
    font-size: 1rem;
    padding: 1.5rem;
  }
}

Rendu

css intro exemple reactif

Sandbox

Anatomie d’une règle CSS

Syntaxe [1]

sélecteur {
    propriété: valeur;
}
1. MDN - CSS Syntaxe

Règle CSS

sélecteur

pour identifier les éléments sur lesquels s’applique la règle (ex. élément, ìd`, class, …​)

bloc de déclaration

définir quelle fonctionnalité est stylée (ex. couleur du texte)

Le bloc est délimité par des accolades { }

Une propriété se termine par un ;

Exemple - Règle CSS sur élément

Règle appliqué à tous les éléments <p>
p {
  color: blue;
}
<h1>Apprendre CSS</h1>

<p>Un paragraphe</p>
<p>Un autre paragraphe</p>

Sandbox

css intro regle sur element

Exemple - Règle CSS sur un id

Règle appliqué à l’élément dont l’id est "bleu"
#bleu {
  color: blue;
}
<h1 id="bleu">Apprendre CSS</h1>

<p>Un paragraphe</p>
<p>Un autre paragraphe</p>
css intro id exemple

Exemple - Règle CSS sur une class

Règle appliqués aux éléments qui portent la classe CSS
.vert {
  color: green;
}
<p class="vert">Ce texte est vert</p>
<p class="vert">Cet autre texte est vert</p>
css intro class

Utilisation dans un fichier HTML

<head>
    <link href="style.css" rel="stylesheet"> (1)
    <style>
        (2)
        p{
            color: red;
        }
    </style>
</head>
<body>
    (3)
    <h1 style="color: blue;">Le titre est bleu</h1>
    <p>Le texte est rouge</p>
</body>
</html>
1Style déclaré dans une feuille de style externe
2Style déclaré en local
3Style déclaré en incise

meta viewport

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
width=device-width

indique au navigateur de faire correspondre la largeur de la page à cette de l’écran [1]

The initial-scale=1.0 sets the initial zoom level when the page is first loaded. A value of 1.0 means that the page is displayed at 100% zoom, without any scaling.

Sans cette méta, la plupart des mobiles afficheraient le site avec un rendu de bureau pas adapté.

En règle générale, on évite de changer cette valeur. Risque de casser l’accessibilité et l’expérience utilisateur.

1. Essentiel pour créer des mises en pages réactives pour adapter la page aux différentes tailles d’écrans.

Commentaires

/* ceci
est un commentaires CSS
 */

Les styles par défaut du navigateur

Styles par défaut de navigateur

sans aucun CSS, il y a déjà un style. Ils peuvent varier d’un navigateur à l’autre.

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Example 1. Rendu avec les styles par défaut d’un navigateur
h1 h6 style par defaut

Sandbox

On veut parfois harmoniser les styles pour éviter les variations d’un navigateur l’autre. On va appliquer de nouveaux styles sur les éléments qui ont des variations. On parle de reset CSS.

CSS inline, interne et externe

CSS en incise (inline)

Style écfrit directement sur un élément HTML avec l’attribut style="…​"

<p>
    <strong style="color: red">
        Important !
    </strong> Faisez gaffe aux pigeons.
</p>

Pratique pour prototyper. A éviter dans la plupars des cas. Dur à maintenir car on doit changer le style de chaque élément à la fois.

CSS interne

Elément <style> s’applique à la page entière.

<head>
    <style>
        .important{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <strong class="important">
            Important !
        </strong>
        Faisez gaffe aux pigeons.
    </p>
</body>

Utile quand on a qu’un seul document à styler. Inconvénient, c’est pas réutilisable. Et difficile à maintenir dans des grands projets.

CSS externe

Déclaré dans un fichier .css à part. Et lié à la page à l’aide de l’élément <link> de la section <head>.

style.css
.important{
        color: red;
    }
index.html
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>
        <strong
            class="important">
            Important !
        </strong>
        Faisez gaffe aux pigeons.
    </p>
</body>

Pour réutiliser le même style sur plusieurs pages Web. Et obtenir une unité d’apparnce sur un site Web. Promeut la séparation des responsabilités. Dans la plupart des cas, c’est l’approche recommandée par défaut.

CSS print

<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>

Style additionnel quand on imprime la page Web.

Styler du texte

Quelques propriétés de typographie

  • font-*

  • text-*

  • line-*

  • color

  • letter-spacing

.gras{
    font-weight: bold;
}
.rouge{
    color: red;
}
<p class="gras">Ce texte est en gras</p>
<p class="rouge">Ce texte est rouge</p>
<p class="gras rouge">Ce texte est gras et rouge</p>

color: red

css intro texte gras couleur

text-*

Propriétés les plus courantes

text-align
text-decoration
    text-decoration-color
    text-decoration-line
    text-decoration-style
    text-decoration-thickness
text-shadow
text-transform
text-wrap
    text-wrap-mode
    text-wrap-style

Autres propriétés

text-align-last
text-anchor
text-autospace
text-box
    text-box-edge
    text-box-trim
text-combine-upright
text-emphasis
    text-emphasis-color
    text-emphasis-position
    text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-rendering
text-underline-offset
text-underline-position

Explorez et laissez vous guider

MDN - Apprendre : Text styling

Couleur

Quelques propriétés où la couleur [1] est applicable

  • color: couleur du texte

  • border-color : couleur de bordure

  • background-color : couleur d’arrière-plan

1. MDN - CSS : couleurs

Exemple

.texte-rouge{
    color: red;
}
.bordure-bleue{
    border-style: solid;
    border-color: blue;
}
.arriere-plan-vert{
    background-color: green;
}
<section class="texte-rouge">Texte rouge</section>
<section class="bordure-bleue">Bordure bleue</section>
<section class="arriere-plan-vert">Arrière-plan vert</section>
css intro rendu couleurs

Types de couleurs

  • Nommées : red , green …​

  • Hexa : #113344

  • rgb

Outils

MDN - Outil de sélection des couleurs

MDN - mélangeur de couleurs

Webstorm

color webstorm
Figure 1. Color picker
color webstorm refactor
Figure 2. Refactoring de couleurs

VsCode

Color picker
color vscode