Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES ATTRIBUTS ID ET CLASS

Les attributs id et class et les sélecteurs associés

Les sélecteurs #id et .class vont nous permettre de cibler un élément en particulier plutôt qu’un type d’élément.

Nous allons tout simplement écrire nos attributs id et / ou class à l’intérieur de la balise ouvrante d’un élément HTML et leur attribuer une valeur.

Nous allons ensuite cibler cet élément en CSS en réutilisant cette même valeur.

Comme d’habitude, les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux ni espaces et commencer par une lettre.

Regardons immédiatement comment cela va fonctionner en pratique à l’aide d’exemples.

On utilise les attributs class et id pour cibler précisément un contenu HTML avec le CSS

Comme vous pouvez le voir ci-dessus, j’ai attribué un attribut id à mon premier paragraphe et un attribut class à mon deuxième paragraphe.

Vous pouvez remarquer que j’ai donné la même valeur à mes attributs id et class. Ce n’est pas un problème, car on va pouvoir les différencier en CSS.

En effet, pour cibler un élément possédant un attribut id, en CSS, il faudra préciser la valeur de l’attribut précédée d’un dièse (#).

Pour cibler un élément possédant un attribut class, en revanche, il faudra en CSS préciser la valeur de l’attribut précédée d’un point (.).

Ainsi, on peut tout à fait donner la même valeur à un attribut class et id : il n’y a aucun risque de confusion en CSS si vous faites bien attention à bien faire précéder la valeur par le dièse ou le point.

On se sert de class et id pour appliquer des styles à nos éléments HTML

Nos différents paragraphes ont bien des couleurs différentes grâce aux sélecteurs CSS class et id

Essayer ce code

Class et id : différences et utilisation avancée

Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur unique tandis que plusieurs attributs class peuvent posséder la même valeur.

En effet, rappelez vous de nos liens de type ancre. Il s’agit bel et bien du même attribut id qu’on utilise aujourd’hui, avec des finalités différentes.

Il est donc strictement interdit de donner la même valeur à deux id différents dans une même page HTML. En revanche, on peut tout à fait attribuer la même valeur à plusieurs attributs class appartennant à différents éléments HTML.

Cette particularité de l’attribut class va notamment nous permettre d’appliquer le même style à différents (types) d’éléments HTML d’un coup.

On applique la même class à différents éléments HTML

Tous les éléments HTML portant la class seront en rouge

Notre élément HTML titre et nos paragraphe s’affichent en rouge

Essayer ce code

Nous allons également pouvoir attribuer un attribut class et un attribut id à un même élément HTML afin de pouvoir lui appliquer un style « semi-général » et un style particulier.

On applique une class et un id à un même élément HTML

On applique nos styles en CSS

L’élément HTML hérite des styles relatifs à son id et à sa class

Essayer ce code

Notez qu’en cas de conflit, c’est le style du sélecteur le plus précis qui va être appliqué. Par exemple, si vous donnez une class et un id à un même élément HTML et que vous utilisez cette class et cet id pour définir deux couleurs différentes, c’est la couleur de l’id qui va s’imposer car l'attribut id permet de cibler du code HTML plus précisément que l'attribut class.

En cas de conflit, l’id est prioritaire sur la class en CSS

Notre élément va hériter des styles de son id

Notre paragraphe s’affiche en bleu et non pas en rouge

Essayer ce code

Notez également que toutes les propriétés CSS ne s’appliquent pas à tous les éléments HTML. Par exemple, cela n’aurait pas de sens de donner une propriété color à un élément br puisque celui-ci ne représente pas un contenu visible par l'utilisateur. Nous reparlerons de tout cela plus tard.

Chapitre précédent

Chapitre suivant