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 ET PROPRIETES CSS

Les sélecteurs CSS simples

Le CSS va nous permettre de mettre en page un contenu et de changer son apparence en lui appliquant des styles.

Pour appliquer un style à un élément HTML, nous allons devoir au préalable le « sélectionner » ou le cibler.

Un sélecteur va donc nous permettre de cibler un ou plusieurs éléments HTML afin de leur appliquer un style particulier.

Il existe différents types de sélecteurs qu’on appelle sélecteurs « simples » ou « complexes ». Nous allons voir les plus utilisés d’entre eux au cours des chapitres à venir.

On appelles également les sél"ecteurs CSS simple des "sélecteurs éléments", tout simplement car ils reprennent le nom du type d'élément HTML à cibler.

Par exemple, si l’on souhaite par exemple appliquer un style particulier à tous les paragraphes de notre page web, nous utiliserons le sélecteur CSS p.

Les propriétés CSS

Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou "styles") d’un élément HTML on souhaite modifier.

Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui appliquer la couleur que l’on souhaite grâce à la propriété color (« couleur », en français).

Une propriété va être accompagnée d’une ou plusieurs valeurs qui vont définir le comportement de cette propriété.

Par exemple, la propriété color peut prendre le nom d’une couleur (en anglais). Si l’on donne la valeur « red » (rouge) à notre propriété color, les textes au sein des éléments HTML auxquels on applique cette propriété s’afficheront en rouge.

Sélecteurs, propriétés et valeurs en pratique

Prenons immédiatement un premier exemple ensemble, afin d’illustrer ce que nous venons de dire et de bien voir comment le CSS fonctionne.

Utilisation des sélecteurs et des propriétés en CSS

Dans l’exemple ci-dessus, nous utilisons le sélecteur CSS simple p qui va cibler tous les paragraphes de notre page HTML.

Ensuite, vous remarquez que nous utilisons deux propriétés color (couleur) et font-size (taille de la police d'écriture) pour modifier nos paragraphes.

Nos paragraphes vont dorénavant s’afficher en bleu (blue) et notre texte va avoir une taille égale à 14 pixels (14px).

Profitez-en pour déjà noter la syntaxe du CSS et apprendre un peu de vocabulaire : on appelle le couple « propriété : valeur » une déclaration en CSS.

Chaque déclaration doit être séparée d’une autre par un point virgule (que vous pouvez observer en fin de ligne dans le code ci-dessus).

On place toutes les déclarations relatives à un sélecteur à l’intérieur d’un couple d’accolades. Cela permet au CSS de savoir à quel sélecteur il doit appliquer les styles correspondants.

Vous pouvez d’ores-et-déjà essayer un premier code CSS si vous le souhaitez ci-dessous. Nous allons progressivement expliquer comment cela fonctionne.

Essayer ce code

Chapitre précédent

Chapitre suivant