Introduction à CSS

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Introduction à CSS

Notes de cours

Travail personnel

Exercice 1 — Expérimentation du CSS

Reprendre la page simple sur Tim Berners-Lee créée au TP précédent (vous pouvez en télécharger une correction ici), et appliquer les styles suivants, en utilisant une balise <style> (pas un attribut !) :

  1. mettre les titres de section en bleu ;
  2. mettre le titre principal en italique ;
  3. mettre les liens en gras ;
  4. mettre des puces carrées à la place des puces rondes dans la liste ;
  5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

  1. augmenter la taille de la police du titre principal ;
  2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
  3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 2 — Utilisation de l’inspecteur de Firefox

Vous trouverez sur cette page quelques explications sur les réponses aux questions.

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

  1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Examiner l'élément » (ou Inspect Element). Une fenêtre apparaît, avec une partie HTML et une partie CSS.
  2. Décocher des propriétés CSS et observer l'effet.
  3. Modifier des propriétés CSS et observer l'effet.
  4. Cliquer sur la flèche en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
  5. Aller voir l'onglet « Calculé » au-dessus de la partie CSS, en particulier la section « modèle de boîte ».

Ce qui est particulièrement important, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs.

  1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »).
  2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
  3. Inspecter la division de classe toto : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 3 — Reproduction d’un modèle

Un corrigé de cet exercice est disponible (HTML seul ; avec CSS ; archive). Attention, le rendu n’est pas forcément exactement le même sous Chrome que sous Firefox.

On prend la suite de l'exercice du TP précédent : on a toujours deux images de la même page, l'une avec les styles de base du navigateur, et l'autre avec une feuille de style. Les images de Marylin et Tom, les modèles et le texte sont disponibles dans cette archive.

Cette fois, l'exercice consiste à écrire une feuille de style permettant d'afficher la page originale avec le rendu du second modèle. Attention, si le HTML a été fait correctement, la seule modification nécessaire est l'ajout de la feuille de style ! Il est toujours interdit d'utiliser les éléments div et span, et les attributs id et class ! Certains détails ne sont pas faciles à reproduire pour les débutant·e·s : ce n'est pas grave si vous n'y arrivez pas. Faites ce que vous pouvez.

NB : les images fournies montrent le rendu obtenu avec Firefox (ce sera toujours le cas dans ce cours). Il est possible que le résultat ne soit pas tout à fait le même sous Chrome. Il est donc recommandé d'utiliser Firefox pour faire les TP.

Exercice 4 — Listes et menus

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).

Compléments pour les plus avancé·e·s

  • Réaliser le menu horizontal à l'aide d'éléments flottants (voir documentation sur les flottants et la propriété float).
  • Essayer d'ajouter des sous-menus déroulants au menu, en utilisant une méthode 100% CSS (c'est-à-dire sans JavaScript).
  • Réaliser une galerie photo uniquement en CSS. Un tutoriel et exemple.