### Sélecteur universel

Syntaxe `*`

    * {
    	color: #333;
    	font-size: 15px;
    }

Le sélecteur universel permet de sélectionner tous les éléments d'un document HTML.

A cause de la sélection trop large qu'il fait, ce sélecteur est en réalité peu pratique. Une de ses seules utilisations connues est dans la réinitialisation des marges par défaut faites par les navigateurs sur certains éléments HTML (body, p, ul, etc).

Exemple : sélecteur universel
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Fichier CSS : styles.css
/* Sélecteur universel pour réinitialiser les marges de tous les éléments */ * { margin: 0; padding: 0; }

### Sélecteur de type

Syntaxe `Nom_élément_HTML`

    section {
    	padding: 10px;
    	font-family: arial;
    }

Un sélecteur de type sélectionne tous les éléments du document HTML qui ont le même nom que le sélecteur.

L'élément peut être n'importe quel élément HTML et la sélection portera sur tous ceux qui se trouvent dans le document, quelque soit leur niveau d'imbrication.

Exemple : sélecteur de type
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Sélectionner tous les p du document */ p { border: 2px solid red; } /* Sélectionner tous les h3 du document */ h3 { background: red; }

### Sélecteur de classe

Syntaxe `.nom_de_classe`

    .remarque {
    	border: 1px solid;
    	font-size: 0.8em;
    	padding: 10px;
    }

Un sélecteur de classe sélectionne tous les éléments du document HTML qui ont un attribut `class` dont la valeur contient `nom_de_classe`.

Ces éléments peuvent être n'importe quel élément HTML, situés à n'importe quel niveau d'imbrication.

La définition du nom de la classe dans le code CSS DOIT être précédé d'un point (`.`). Il ne doit pas y avoir d'espace ou de tabulation entre ce point et le nom de la classe.

Dans le code HTML, le nom de la classe doit être utilisé SANS le point.
`<p class="remarque">C'est une remarque importante.</p>`

Suivant les spécifications du W3C, un nom de classe (ou d'identifiant) peut être constitué des caractères décrits dans le schéma suivant :

composition d'un identifiant CSS

Le nom peut commencer éventuellement par un tiret, suivi d'un caractère alphabétique ou d'un caractère non-ascii (> à U+0079) ou d'un caractère en hexadecimal ('escape') ou d'un tiret souligné (underscore).
On aura ensuite autant de caractères alphabétiques ou non-ascii (> à U+0079) ou en hexadecimal ('escape') ou de tirets ou de tirets soulignés ou de chiffres que l'on veut.
Par exemple `.♥` est un nom de classe (ou d'identifiant) tout à fait valide, tout comme `.\3A \)` ou `.☺☃`.

Pour être à l'abri de tout problème d'interprétation, je vous conseille de nommer vos classes (ou vos identifiants) toujours en minuscules, sans caractères accentués, de la façon suivante :

- un caractère alphabétique,
- autant de caractères alphabétiques, tirets, tirets soulignés, chiffres que nécessaire.

Une classe peut être affectée à autant d'éléments différents que l'on veut et la même classe peut s'appliquer indiféremment à tout type d'élément.

L'attribut `class` d'un élément HTML peut contenir plusieurs noms de classe, séparé par un espace. L'élément aura les styles cumulés de toutes ces classes.
`<p class="remarque rouge important">C'est très très très utile.</p>`

Exemple : sélecteur de classe
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3 class="avec-bord">L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p class="en-rouge">Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p class="en-rouge avec-bord"> <img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Définit la classe en-rouge */ .en-rouge { color: red; } /* Définit la classe avec-bord */ .avec-bord { border: 2px solid red; }

### Sélecteur d'identifiant

Syntaxe `#nom_identifiant`

    #moi {
    	border: 1px solid;
    	font-size: 0.8em;
    	padding: 10px;
    }

Un sélecteur d'identifiant sélectionne l'élément du document HTML qui a un attribut `id` dont la valeur est `nom_identifiant`.

Cet élément peut être n'importe quel élément HTML, situé à n'importe quel niveau d'imbrication.

La définition du nom de l'identifiant dans le code CSS DOIT être précédé d'un dièse (`#`). Il ne doit pas y avoir d'espace ou de tabulation entre ce diése et le nom de l'identifiant.

Dans le code HTML, le nom de l'identifiant doit être utilisé SANS le dièse.
`<p id="moi">C'est une remarque importante.</p>`

Un nom d'identifiant obéit aux même règles de grammaire qu'un nom de classe. Voir ci-dessus

Un identifiant DOIT être unique dans un document HTML. Si ce n'est pas le cas, le sélecteur CSS sélectionnera tous les éléments avec le même identifiant, mais la sélection faite par JavaScript sélectionnera uniquement le 1er élément.
Pour éviter tout problème, je vous conseille de respecter la règle de la spécification : "an ID attribute can be used to uniquely identify its element"

Exemple : sélecteur d'identifiant
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 349 25.</p> <div> <p id="yoda"> <img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p id="vador"> <img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Définit l'identifiant yoda */ #yoda { background: lawngreen; } /* Définit l'identifiant vador */ #vador { background: black; color: hotpink; }