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 commentaires
  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

L’HERITAGE EN CSS

Qu’est-ce que l’héritage ?

L’héritage est une notion centrale et fondamentale en CSS.

La notion d’héritage signifie que tout élément HTML enfant va hériter, « en cascades », des styles de ses parents.

C’est par ailleurs de là que vient le nom du CSS : Cascading StyleSheets, ou Feuilles de Style en Cascades.

Par exemple, tous les éléments à l’intérieur de l’élément body sont des enfants de cet élément. Si l’on applique un style à l’élément body, ses enfants en hériteront automatiquement.

On commence par créer une page HTML

On applique un style à l’élément HTML body

Les éléments HTML enfants héritent des styles de leurs parents

Ici, les éléments h1, p et strong ont hérité des styles de leur parent body. Ainsi, nos différents textes s’affichent en violet.

Priorité et ordre en CSS

Cette notion d’héritage est très puissante et très pratique en CSS.

Cependant, il convient de bien comprendre dans quel ordre et selon quelle priorité s’appliquent les différents styles à un élément afin de ne pas faire d’erreur.

En CSS, si il y a un conflit, c’est-à-dire si un élément reçoit plusieurs fois une même propriété avec des valeurs différentes, le style qui va être prioritaire va être le style le plus proche de l’élément.

Voyons immédiatement un exemple ensemble afin de bien comprendre.

On crée différents niveaux d’éléments

On crée différents styles pour nos différents éléments en CSS

Nos éléments HTML héritent du style CSS le plus proche

Essayer ce code

Comment interpréter l’exemple ci-dessus ? Tout d’abord, notez que nous appliquons à chaque fois la même propriété color à nos différents éléments avec des valeurs différentes. Il va donc y avoir conflit.

On applique une couleur violette à notre élément body. Ainsi, tous les éléments contenus dans body vont hériter de cette couleur par défaut sauf si une autre couleur est définie entre temps.

C’est le cas pour les éléments de type p, auxquels on attribue une couleur bleue. Ici, nous avons donc un premier conflit : nos paragraphes doivent-ils hériter des styles définis avec le sélecteur body ou de ceux définis avec le sélecteur p ?

La solution est simple : le sélecteur p cible de manière plus précise les paragraphes que le sélecteur body, et le style défini dans le sélecteur p est donc plus proche de nos paragraphes que celui défini dans body; c'est donc bien celui-ci qui sera appliqué.

Par défaut, tous nos paragraphes seront donc bleus, sauf si un style encore plus proche leur est appliqué. C’est le cas pour notre paragraphe comportant la class="para3".

Comme le ciblage est plus précis, les éléments possédant cet attribut class vont récupérer les styles de l'attribut class s’il y a conflit.

Pour le texte dans l’élément strong, celui-ci récupère le style le plus proche de lui, c’est-à-dire celui qui lui est appliqué directement via le sélecteur strong.

Quel ordre par rapport à l’emplacement du CSS ?

De même, il va y avoir un ordre de priorité selon où on va écrire notre code CSS.

Rappelez vous que l’on peut écrire le code CSS à trois endroits différents :

  • Au sein de la balise ouvrante de chaque élément HTML, dans un attribut style ;
  • Dans un élément style placé dans l’élément head d’un fichier HTML ;
  • Dans un fichier CSS séparé.

Si on écrit le CSS à différents endroits, et si il y a un conflit, le style appliqué à l’élément directement (grâce à l’attribut style) sera prioritaire.

Ensuite, ce sera le style écrit dans l’élément HTML style qui sera retenu.

Finalement, le style écrit dans un fichier CSS séparé sera retenu en dernier.

Notez qu'on va pouvoir outrepasser cette notion d'ordre en ajoutant la mention "!important" à la fin d'une déclaration CSS qu'on veut imposer.

La priorité des règles CSS

On peut outrepasser les règles de priorité en CSS avec !important

Nos paragraphes s'affichent en bleu

Chapitre précédent

Chapitre suivant