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

OÙ ECRIRE LE CODE CSS ?

Premières explications

Lorsque l’on code, vous devez bien vous dire que rien n’est « magique » : tout le code que vous écrirez dans votre vie reposera sur des règles et des mécanismes. Les connaître vous permettra de beaucoup mieux comprendre ce que vous faîtes et comment faire telle ou telle chose.

Comme nous l’avons vu dans la partie précédente, on va utiliser des sélecteurs en CSS afin d’appliquer des styles, c’est-à-dire afin de modifier l’apparence d’éléments HTML.

Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles qu’on a voulu leur appliquer en CSS.

Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode va présenter des avantages et des inconvénients selon une situation donnée.

Ecrire le CSS dans un élément HTML style

La première façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément style.

De cette façon, le code CSS ne s’appliquera qu’à la page HTML dans laquelle il a été écrit.

Cette première méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code en général.

Nous la voyons dans ce cours à titre d’exemple, afin que vous sachiez l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un fichier.

L’élément style sera en général placé en haut de notre page HTML, à l’intérieur même de l’élément head.

On peut écrire le CSS dans un élément HTML style, au sein de l'élément head

Ici, je commence donc par créer un élément style que je place dans l’élément head de ma page HTML. Ensuite, j’écris mon CSS à l’intérieur de cet élément style.

Je commence par appliquer une couleur de fond orange à mon élément body (c’est-à-dire à toute la partie visible de ma page) avec la propriété CSS background-color en le ciblant avec le sélecteur CSS body.

Ensuite, je change la couleur et la taille du contenu de tous les éléments p de ma page HTML. Mes paragraphes auront désormais une taille égale à 16 pixels et s’afficheront en bleu.

Nous avons modifié le style de nos paragraphes grâce au CSS

Essayer ce code

Ecrire le CSS dans la balise ouvrante des éléments HTML

Nous pouvons également écrire notre code CSS à l’intérieur de la balise ouvrante de nos éléments HTML.

Pour faire cela, nous utiliserons cette fois-ci un attribut style (à ne pas confondre avec l’élément style). Cet attribut va prendre comme valeur les différentes déclarations CSS relatives à l’élément.

Avec cette seconde méthode, les styles CSS ne s’appliqueront qu’à l’élément au sein duquel est écrit le CSS.

Cette méthode d’écriture du CSS, bien qu’elle puisse parfois être pratique, n’est également pas recommandée et est à éviter tant que possible.

Nous pouvons écrire le CSS à l’intérieur des éléments, grâce à l’attribut HTML style

Cette fois-ci, seul notre premier paragraphe a été modifié par le CSS

Comme vous pouvez le voir ci-dessus, seul notre premier paragraphe a été modifié cette fois-ci. C’est normal puisqu’aucun style CSS n’a été attribué à notre deuxième paragraphe.

Essayer ce code

Ecrire le CSS dans un fichier CSS séparé

Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css ». C’est la méthode recommandée, qui sera utilisée autant que possible.

Cette méthode comporte de nombreux avantages, notamment une meilleure maintenabilité du code grâce à la séparation des différents langages, ainsi qu’une meilleure lisibilité.

Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à plusieurs pages HTML en même temps, d'un seul coup.

En effet, en utilisant l'une des deux premières méthodes, nous aurions été obligés de réécrire tout notre code CSS pour chaque nouvelle page HTML composant notre site.

Ici, nous allons pouvoir lier notre fichier CSS à autant de fichiers HTML que nous le voulons. Ainsi, lorsque nous voudrons modifier, par exemple, la couleur de tous les paragraphes, nous n’aurons à le faire qu’une fois pour toutes.

Nous allons donc commencer par créer un fichier CSS qu’on va appeler styles.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que notre page HTML pour plus de simplicité.

On crée un fichier CSS séparé pour appliquer des styles CSS à nos éléments HTML

Nous travaillons donc dorénavant avec deux fichiers : un fichier que j’ai appelé cours.html et notre fichier styles.css.

Nous allons maintenant finalement devoir lier notre fichier CSS à notre fichier HTML. Pour cela, nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français).

Cet élément va avoir besoin de deux attributs : rel, qui va préciser le type de fichier (dans notre cas, ce sera « stylesheet » pour feuille de style) et un attribut href qui va indiquer l’adresse relative du fichier CSS.

On va placer l’élément link dans l’élément head de notre fichier HTML. Cet élément prend la forme d’une balise orpheline.

On lie notre fichier CSS à notre fichier HTML grâce à l’élément link

Nos deux fichiers sont maintenant liés et les styles CSS vont bien être appliqués aux éléments de notre page HTML.

Nous avons lié nos fichiers HTML et CSS

A noter : cette méthode correspond plus ou moins à écrire le code dans l’onglet « CSS » séparé du site Jsbin.com. Cependant, sur ce site, nous n’avons pas besoin de lier nos fichiers entre eux car le site le fait automatiquement. Vous pouvez constater tout cela en cliquant sur le lien essayer ci-dessous.

Essayer ce code

Chapitre précédent

Chapitre suivant