Apprendre CSS : Introduction

Rôle et syntaxe du CSS

Le CSS est un langage de mise en forme qui permet, par l’usage de sélecteurs, de cibler des balises HTML puis de leur appliquer un style via des règles.

Sélecteurs

Les sélecteurs CSS ont un rôle bien précis : cibler un ou plusieurs éléments HTML.

selecteur { ... }

Le sélecteur CSS identifie les balises HTML que l’on souhaite mettre en forme en les ciblant par leur nom mais aussi leurs attributs. Il répond à la question QUI.

Pour cibler les paragraphes de la page on fera appel au sélecteur p { ... }, pour cibler les éléments qui ont la classe demo, on fera appel au sélecteur .demo { ... }.

On détaillera toutes ces spécificités dans un chapitre dédié à la syntaxe des sélecteurs.

Règles (propriété + valeur)

Les règles CSS ont un rôle bien précis : appliquer un design à un élément HTML.

selecteur {
	proprieteA: valeur;
	proprieteB: valeur;
}

Les règles CSS se déclarent avec un couple propriété / valeur.

La propriété caractérise ce que l’on souhaite changer. C’est le QUOI.
La valeur spécifie COMMENT cet élément doit changer.

Environnement de travail

Le CSS est un langage de développement web côté client, son environnement de développement est donc minimaliste puisqu’il ne se résume qu’à :

Un éditeur de code
Un navigateur web (Chrome, Firefox, Safari…)

Où écrire son code CSS

Deux types de fichiers sont capables d’interpréter du code CSS : les fichiers .html et les fichiers .css.

Dans un fichier .html

Avec les balises `<style>`

Il est possible de placer son code CSS dans un fichier HTML via la balise <style>. Elle se place dans l’en-tête du fichier (entre les balises <head>).

<!DOCTYPE html>
<html>
	<head>
		<style>
			selecteur { propriete: valeur; }
		</style>
	</head>
	<body></body>
</html>

Avec l’attribut `style`

Il est également possible de placer le code CSS spécifique à un élément dans un attribut style.

La particularité de cette écriture est qu’il est inutile de préciser un sélecteur CSS, vu que la règle est ici physiquement rattachée à l’élément HTML.

<p style="propriete:valeur;">

Dans un fichier `.css`

La solution optimale consiste à écrire son code CSS dans un fichier distinct, portant l’extension .css, puis, à l’intégrer dans le document .html avec la balise <link>.

copié !

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body></body>
</html>

rel : c’est le type de relation. Ici, on renseigne stylesheet pour préciser qu’on est en relation avec une feuille de style CSS.
href : c’est le chemin vers la ressource.

Le fait de séparer le HTML du CSS confère de nombreux avantages :

Une meilleure maintenabilité.
Une meilleure lisibilité.
La possibilité d’appliquer des styles à plusieurs pages.

Commentaires

En CSS il est possible d’écrire des commentaires dans son code source. Un commentaire est délimité par les caractères /* (ouverture) et */ (fermeture).

/* Je suis un commentaire en CSS */