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

FONT-FAMILY ET LES GOOGLE FONTS

La propriété CSS font-family

La propriété CSS font-family va nous permettre de définir la police de notre texte.

Vous devez savoir que tous les navigateurs, selon la version possédée par vos visiteurs, ne supportent pas tous les mêmes polices.

Pour cette raison, nous indiquerons toujours plusieurs noms de police à utiliser en valeur de la propriété font-family, en commençant par celle souhaitée, et en séparant chaque valeur par une virgule.

Ainsi, le navigateur va lire les différentes polices renseignées dans font-family dans l’ordre et utiliser la première qu’il supporte.

Si vous renseignez un nom de police qui contient des espaces, vous devrez le mettre entre guillemets ou apostrophes.

Voyons un premier exemple d’utilisation de font-family ensemble. On va définir une même police pour toute notre page HTML en appliquant notre propriété directement à l'élément body.

On crée une page HTML pour tester la propriété font-family

On utilise la propriété CSS font-family pour changer la police de nos textes

La police de nos textes a bien été modifiée grâce à font-family

Essayer ce code

Dans cet exemple, j’indique trois polices d’écriture différentes en valeur de ma propriété font-family : Source code pro, Verdana et sans-serif.

Lors de l’affichage, mon navigateur va d’abord tenter d’afficher la première police. Si celui-ci ne la supporte pas, il va prendre la seconde et etc.

Les deux dernières polices que j’ai indiquées sont un peu particulières : Verdana fait partie des « web safe fonts » (en français "famille de polices sûres") tandis que sans-serif est ce qu’on appelle une « famille générique ».

Web safe fonts et familles génériques

Les web safe fonts sont un ensemble de polices qui sont lues par tous les navigateurs quels qu’ils soient.

Les familles génériques regroupent un ensemble de polices ayant une allure similaire, comme les polices de la famile serif par exemple.

En général, on indiquera toujours au moins une police appartenant aux web safe fonts en valeur de notre propriété font-family ainsi qu’une famille générique associée afin d’être certain qu’au moins une valeur puisse être lue par le navigateur de vos visiteurs.

Voici une liste des web safe fonts les plus utilisées avec leur famille générique associée :

Famille générique Police
Serif Times New Roman,
Georgia
Sans-serif Arial,
Verdana
Monospace Courier New,
Lucida Console
Cursive Comic sans MS

Intégration des Google Fonts

Google a développé sa propre liste de polices d’écriture appelées les Google Fonts.

Ces polices peuvent être utilisées sur n’importe quel site, le tout est de faire un lien en HTML vers la police Google désirée puis de l’utiliser comme valeur de notre propriété font-family en CSS.

Le grand intérêt des Google Fonts est qu’elles ne dépendent pas d’un navigateur mais peuvent être lues par (quasiment) tous les navigateurs.

L’autre grand avantage est que vous pouvez faire votre choix parmi une très longue liste de polices et ainsi totalement personnaliser l’écriture sur votre site.

Pour utiliser les Google Fonts, il va tout d’abord nous falloir choisir une police dans la liste proposée sur le site de Google dédié.

Pour ma part, je vais choisir la police « Open sans ». Cliquez sur le bouton « quick use » pour obtenir le lien de la police.

Le site Google fonts

Ensuite, il nous faut insérer notre lien dans une page HTML avec l’élément link et il ne nous restera alors plus qu’à utiliser notre police en CSS !

On fait un lien vers la police Google que l’on souhaite utiliser

On utilise notre police Google en CSS

Notre texte utilise bien la police Google juste téléchargée

Essayer ce code

Chapitre précédent

Chapitre suivant