Langages de programmation orientés Web

CSS Introduction

2025 - 2026

Correction

Hello CSS

Définition

Cascading Style Sheet

Le CSS est un langage permettant de modifiant les styles de notre DOM. On peut définir différentes propriétés pour modifier les styles comment l'apparance, la mise en page, la gestion typographique, etc.

L'objectif

Dans un premier temps nous allons essayer de modifier la couleur d'un titre dans notre fichier index.html de l'exercice précédent.

La balise style

Pour injecter du CSS dans notre page, il existe plusieurs méthodes. Nous allons l'inclure directement dans l'HTML via la balise style dans notre head:


											<!DOCTYPE html>
<html>
    <head>
      […]
      
    </head>
    <body></body>
</html>

Balise style

Les sélecteurs

Le CSS est lié à notre HTML, et pour changer les styles de nos balises nous allons devoir les cibler. Pour se faire nous allons utiliser ce qu'on appelle des sélecteurs. Au plus simple, il suffit d'utiliser le nom de la balise HTML que nous voulons voir modifier.

Un sélecteur est toujours suivi par des accolades ouvrantes et fermantes {} .

Comme le but est changer la couleur de notre titre principal, nous allons cibler la balise h1 :

Les propriétés

Actuellement notre CSS ne change encore aucun style. Pour ajouter une modification, nous allons associer une propriété avec une valeur.

Une propriété est toujours suivi de : , un espace puis la valeur désirée et se termine par ; et se trouve à l'intérieur des accolades d'un sélecteur.

property: value;

Il existe une multitude de propriétés qui permettent de changer différents aspects de notre HTML.

Liste des propriétés

Modifions la couleur de texte de notre titre en rouge via la propriété color et la valeur red:


											h1{
  color: red;
}

N'oubliez pas d'indenter les propriétés à l'intérieur de notre sélecteur.

Résultat

Exercice A

Choisir une couleur sur le site 147colors.com et modifier la couleur des liens dans votre navigation.

Pensez à vos balises HTML pour cibler vos élements.

Modes d'insertion

Il existe plusieurs façons d'insérer du CSS dans notre HTML, nous avons vu l'une d'entre elles.

De la solution la moins propre à la plus recommandée :

inline
embedded (avec la balise style)
linked

Inline

Cette méthode modifie des propriétés directement depuis l'attribut style d'une balise. Cette technique est à proscrire, elle complexifie la maintenance de votre code, sa lisibilité et surtout le scoring de vos styles.

Nous verrons plus en profondeur cette notion de scoring, pour le moment retenons son existence.


											Votre titre principal

Attribut Style

Embedded

C'est la méthode que nous avons utilisé plus tôt, qui utilise la balise style pour injecter nos styles. Plus propre, plus lisible mais qui peut devenir difficile à gérer au fur et à mesure que nous rajoutons des propriétés.

Un autre aspect qui a son importance : si on veut que les styles soient partager entre les pages, il faudra copier-coller votre CSS sur tous vos fichiers HTML.

Linked

Cette méthode est a préviligée, elle permet de centraliser vos styles dans un fichier externe qui se termine par l'extention .css et ensuite de le lier à vos fichiers HTML via la balise link.

La balise link

Cette balise se retrouve dans la balise head et permet de lié des feuilles de styles .css ainsi que d'autres ressources. Dans le cas d'un fichier CSS, il faudra passer 2 attributs :

href : le chemin vers le fichier .css
rel : mentionne le type du lien entre le fichier et le document HTML


											<head>
  […]
  
  
</head>

Balise Link

Structure d'un fichier CSS

La structure est la même que dans la balise style. On commence avec un sélecteur et entre accolades une ou plusieurs propriétés associés à des valeurs.

Un fichier .css peut contenir une infinité de selecteurs et de propriétés modifiées. Le but est d'ajouter les styles qui sont nécessaire à la réalisation du design sur base d'une structure HTML.

Types de sélecteur

Nous avons vu comment sélectionner via le nom d'une balise, mais il existe d'autres types possibles. Ces derniers peuvent même être combiner pour plus de précision.

Voici une première liste :

type (ou balise)
class
id
descendant

Balise

Le sélecteur le plus simple qui utilise le nom des balises.

Sélecteur de type


											// Cible toute les balises "p"
// dans le document
p{
  color: blue;
}

Class

Ce sélecteur utilise une valeur présente dans l'attribut class d'une balise. L'avantage est qu'on peut ajouter une infinité de classes à nos éléments, et donc est plus précis dans nos déclarations de styles.

Pour cibler une classe, son nom doit être précéder d'un .

Sélecteur de classe


																							
													Ceci est un titre principal
Un premier paragraphe
												
																							
													.title{
  font-size: 24px;
}

.red{
  color: red
}

ID

Cible un élément lié à l'attribut ID. N'oublions pas qu'un nom d'ID doit être unique par fichier HTML.

Pour cibler une ID, son nom doit être précéder d'un #

Sélecteur d'ID


																							
													Ceci est un titre principal
												
																							
													#mainTitle{
  font-size: 24px;
}

Descendant

Le CSS permet aussi de cibler des éléments contenu dans un autre peu importe le niveau de profondeur, et avec tout type de sélecteur.

La syntaxe est simple : chaque sélecteur est séparé par un espace.


																							
													
  
    Lien vers l'accueil
  
  
    Premier point
    Second point
  

												
																							
													// Modifie la couleur de texte en rouge
// pour chaque élément contenu dans une
// balise "ul" qui porte la classe ".item"
ul .item{
  color: red;
}

// Modifie la couleur de texte en bleu
// pour chaque balise "a" contenu
// dans une balise "div".
div a{
  color: blue;
}

Recommendations

Préviligions les sélecteurs de balise et ceux de l'attribut class, et évitons ceux via l'attribut ID. En plus d'être plus utilent, ces sélecteurs peuvent cibler plusieurs éléments à la fois, contrairement à l'ID.

La notion de scoring est aussi à prendre en compte.

Exercices B

Sur base de l'image de la prochaine slide, essayez de déterminer la couleur finale des éléments.

Pour le prochain cours

Dans votre projet de présentation de vos 3 médias préférés :

Créer un dossier CSS à la racine de votre site
Ajouter un fichier main.css
Lier cette feuille de style dans votre HTML
Choisir 3 couleurs sur 147colors.com
Dans ce fichier, définir des styles pour que vos titres principaux soient dans une couleur choisie
Modifier la couleur de vos liens dans une autre couleur
Modifier la couleur des titres de vos tableaux dans une autre couleur
Pas de style inline ou embeded ou d'attribut ID
Une seule feuille de style pour toute vos pages