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

SELECTEURS CSS SIMPLES

Les sélecteurs de type élément

Comme je vous le disais précédemment, le CSS va pouvoir appliquer des styles à du contenu écrit en HTML grâce à des sélecteurs qui vont cibler un contenu particulier.

Jusqu’à présent, nous n’avons vu que des sélecteurs CSS de type élément, c’est-à-dire des sélecteurs qui ciblent un élément en se basant sur le nom de l’élément.

Par exemple, le sélecteur p va cibler tous les éléments p (c’est-à-dire tous les paragraphes) d’une page HTML.

De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à notre titre h1 ; le sélecteur a va nous permettre de mettre en forme nos liens, etc.

On commence par créer une page HTML et on la lie avec un fichier CSS

On utilise les sélecteurs simples h1, p et a pour appliquer des styles aux éléments HTML correspondants

Nos éléments HTML ont été stylisés grâce au CSS

Essayer ce code

Ces sélecteurs de type élément sont également appelés des sélecteurs simples en CSS, car il suffit simplement de reprendre le nom de l’élément HTML pour lui appliquer des styles.

Appliquer un style à différents types d’éléments

Le CSS va nous permettre de regrouper différents types d’éléments (par exemple h1 et p) afin de leur appliquer le même style à tous d’un coup.

Pour faire cela, c’est très simple, il suffit de séparer les différents sélecteurs représentant les éléments auxquels on souhaite appliquer un style CSS particulier par une virgule.

On commence par créer une page HTML

On applique le même style à nos éléments HTML h1 et p grâce au CSS

Ici, on applique une couleur bleue à tous nos paragraphes ainsi qu'à notre titre principal d'un coup.

Notre titre et nos paragraphes s’affichent en bleu

Essayer ce code

Préférence et limitation des sélecteurs simples

L’utilisation de sélecteurs simples doit être favorisée tant que possible car ces sélecteurs consomment moins de ressources que des sélecteurs plus complexes et car ils sont plus clairs.

Le problème avec les sélecteurs de type élément est que nous allons être vite limités : par exemple, comment appliquer une couleur différente à deux paragraphes différents avec le sélecteur simple p ? Ce n’est tout simplement pas possible, à moins de placer les déclarations CSS dans la balise ouvrante des éléments, ce qui n'est pas recommandé.

Pour contourner ce problème, nous avons créé deux attributs HTML id et class qui vont nous aider à cibler du contenu HTML de manière plus précise.

Chapitre précédent

Chapitre suivant