Introduction au format de données CSS v 1.

Note : Ce support de travaux pratiques est librement inspiré de différents travaux qui sont cités
dans la partie « Sources », à la fin du présent document. Il est partagé sous licence libre.

Après avoir passé toute une première partie du cours à ne travailler que sur le HTML, nous allons
maintenant découvrir le format CSS (Cascading Style Sheets). Grâce au HTML, nous avons pu rédiger le
contenu de notre site, mais il est brut de décoffrage. Le format CSS vient compléter ce code pour mettre
en forme tout cela et donner au contenu l'apparence que l'on souhaite.
Aux débuts du Web, CSS n'existait pas. Il n'y avait en fait initialement que le langage HTML. Le HTML
est né en 1991 et CSS en 1996.

1. Décoration d’un fichier HTML avec le format CSS

Nous allons revenir sur l’application CEDjs, c’est-à-dire notre calculette éco-déplacement, mais cette
fois-ci dans une version plus décorée. Le site de démonstration, toujours hébergé sur les pages de
Framagit, va nous permettre de comprendre les bases du format CSS.

1.1. Observations
Travail à faire
1..1 Ouvrir le site de démonstration avec votre navigateur Web Firefox, puis lancer l’inspec-
teur à partir du menu et des « outils de développement » ou encore avec la combinai-
son de touches du clavier : Ctrl + Maj + C
Vous remarquerez que la structure du corps de la page à évoluer et que de nouvelles balises sont
apparues : header, section, footer. Nous reviendrons plus tard sur ces balises structurantes du HTML5.
Vous remarquerez également qu’une balise <div id="bloc_page"> imbrique la quasi-totalité du contenu
du corps de la page. Nous avons déjà vu que <div> est une balise neutre, qui permet d’encadrer un ou
plusieurs paragraphes. La présentation des données reste bien sûr neutre tant qu’on applique pas de styles
à cette balise, car c’est bien sûr son intérêt pour les développeurs. C’est ce que nous allons voir
maintenant.

Travail à faire
Effectuer les opérations présentées ci-dessous et noter vos conclusions, réponses sur une feuille de papier.
1..2 Ouvrir l’éditeur de styles via l’onglet des outils de développe-
ment, puis sélectionner le fichier style.css
1..3 Positionner vous sur la description du bloc_page, puis modi-
fier successivement les valeurs associées aux propriétés back-
ground, width, margin et border-radius par les valeurs
(#AD0000, 95%, 10px, 5px). Comment l’affichage des données est-il modifié ? Déduisez-
en l’intérêt ces différentes propriétés en fonction des valeurs associées.
1..4 Remonter sur la description du bloc body, puis modifier successivement les valeurs as-
sociées aux propriétés background et font-family par les valeurs respectives #C55959, et
DejaVuSans-Oblique, DejaVuSans, sans-serif. Comment l’affichage des données est-il mo-
difié ? Pourquoi l’arrière-plan du bloc page n’est-il pas modifié ? Quelle police de carac-
tère (font) est prioritaire ? Déduisez-en l’intérêt ces différentes propriétés.
1..5 Descendre maintenant vers la description du bloc header h1. Modifier la valeur associée
à la propriété font-family en CharisSILB, puis CharisSIL. Que remarquez-vous ? Dans le
second cas, vérifier la police réellement appliquée en positionnant la souris sur le titre
concerné et en actionnant « Examiner l’élément » via le menu contextuel (clic droit).
Dans inspecteur, observer l’onglet « polices » dans le troisième panneau (situé tout à

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 5

 Introduction au format de données CSS v 1.1

droite). Justifiez la valeur affichée : sera-t-elle la même quel que soit le navigateur utili-
sé ?
Modifier la valeur associée à la propriété font-size en 1.8, puis 4.2. Quel effet produit
cette propriété ?
Modifier la valeur associée à la propriété color en black. Quel effet produit cette pro-
priété ?
1..6 Rafraîchir votre page (F5), puis supprimer la définition des polices personnalisées (elles
commencent par @font-face). Quels sont les blocs qui conservent la même police (justi-
fiez) ? Le résultat serait-il équivalent sur un autre navigateur ?
1..7 Descendre maintenant vers la description du bloc header h2. Modifier la valeur associée
à la propriété margin-top en 50px. Quel effet produit cette propriété ?
1..8 Descendre maintenant vers la description du bloc section h1, footer h1, section legend.
Modifier la valeur associée à la propriété font-weight en bold. Quelle est la conséquence
sur l’affichage ? Quel effet produit cette propriété ?
Modifier la valeur associée à la propriété text-transform en lowercase. Quel effet produit
cette propriété ?
1..9 Rafraîchir votre page (F5), puis revenir sur description du bloc header h1 dans l’éditeur
de style. Modifier le header h1 en h1. Que constatez-vous ? Quels sont les éléments
concernés par notre nouvelle définition de style ? Examiner le titre ayant vu son affi-
chage modifier dans l’inspecteur (toujours via le menu contextuel « Examiner l’élé-
ment »). Quelle conclusion en tirez-vous sur le format CSS (revenir à l’acronyme an-
glais) ?
1..10 Rafraîchir votre page (F5), puis revenir sur description du style « .row » dans l’éditeur
de style. Ajouter une nouvelle propriété au style : font-size: 2em;
Que constatez-vous ? Examiner le code HTML concerné par ces modifications. Combien
il y a-t-il de lignes concernées ? Modifier le style appliqué pour la deuxième ligne en
remplaçant la valeur row de l’attribut class à ligne. Quel effet produit cette modifica-
tion ? Aurions-nous pu appliquer ce style à toutes les balises <div> ? Quel est l’intérêt
d’utiliser l’attribut class ? Aurions-nous pu utiliser cet attribut (au lieu de l’attribut id)
pour la définition du bloc_page ?
1..11 Revenir dans l’onglet « Inspecteur » des outils de développement, puis déplier le bloc
d’en-tête (<head>) afin de sélectionner la ligne : <link rel="stylesheet" href="style.css" />
Supprimer cette ligne. Que constatez-vous ? Comment associe-t-on une feuille de styles
à une page HTML ?
Bien qu’il soit possible de définir des styles dans le fichier HTML, je vous recommande de suivre les
bonnes pratiques présentées sur le site de démonstration. En effet, la plupart des sites Web sont constitués
de plusieurs pages. Ne pas centraliser les feuilles de style est source d’erreurs.

1.2. En résumé
Bien que vous pourrez encore explorer davantage les notions liées aux feuilles de style. Nous pouvons
déjà tirer quelques conclusions.

a) Mettre en place du code CSS

• CSS est un autre langage de description qui vient compléter le HTML. Son rôle est de mettre en
forme votre page web.
• Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de
CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore
simplement.
• On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 2 / 5

 Introduction au format de données CSS v 1.1

fichier séparé portant l'extension « .css » (exemple : style.css).

• En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur
présentation avec des propriétés CSS :
balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
• Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme.
Par exemple, on peut viser :
• toutes les balises d'un même type, en écrivant simplement leur nom (h1 par exemple) ;
• certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class
ou id (.nom_classe ou #nom_id) ;
• uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em).
• etc.

b) Formatage du texte
• On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels
(16 px), en « em » (1.3em), en pourcentage (110 %), etc.
• On change la police du texte avec font-family. Attention, seules quelques polices sont connues par
tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la directive
@font-face : cela forcera les navigateurs à télécharger la police de votre choix.
• De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-
weight pour la mise en gras, text-decoration pour le soulignement, etc.
• Le texte peut être aligné avec text-align.

c) La couleur et le fond
• On change la couleur du texte avec la propriété color, la couleur de fond avec background-color.
• On peut indiquer une couleur en écrivant son nom en anglais ( black, par exemple), sous forme
hexadécimale (#FFC8D3) ou en notation RGB (rgb(250,25,118)).
• On peut ajouter une image de fond avec background-image. On peut choisir de fixer l'image de
fond, de l'afficher en mosaïque ou non, et même de la positionner où on veut sur la page.
• On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation
RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de
transparence).

2. Les principales propriétés des classes CSS

2.1. Retour sur quelques propriétés pour bien débuter en CSS

.mabalise {
text-align: center; /* alignement du texte : left, center, right ou justify */
font-size: 20px; /* taille en pixels de la police de caractères
ou avec l’unité em, la taille est alors relative
à la taille de la fonte de l'élément parent. */
font-weight: 700; /* graisse de la police de caractères :
- avec mot clé (bold, etc)

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 3 / 5

 Introduction au format de données CSS v 1.1

- ou valeur numérique (100=léger ←→ 900=gras) */

font-style: italic; /* style de la police : italic ou normal ou oblique */
background: #FF0000; /* couleur d’arrière plan (ici rouge) */
color: #0000FF; /* couleur de la police de caractère (ici bleue) */
border: solid 3px #0000FF;/* bordure solide, bleue de 3px : solid ou dotted ou
dashed*/
}

Dernière chose, il faut savoir que tous les blocs possèdent des marges. Il existe deux types de marges : les
marges intérieures et les marges extérieures. Regardez bien le schéma qui se trouve à la figure suivante.
Sur ce bloc, j'ai mis une bordure pour qu'on repère mieux ses
frontières :
• L'espace entre le texte et la bordure est la marge intérieure (en
vert).
• L'espace entre la bordure et le bloc suivant est la marge
extérieure (en rouge).
En CSS, on peut modifier la taille des marges avec les deux propriétés
suivantes :
• padding : indique la taille de la marge intérieure. À exprimer
en général en pixels (px).
• margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

Remarque : Il est possible de nuancer sur quels côtés s’appliquent les marges en utilisant les
termes suivants en anglais : top (haut), bottom (bas), left (gauche) et right (droite). Par
exemple margin-top, pour la marge extérieure en haut, margin-bottom, pour la marge
extérieure en bas, etc.

2.2. Application
Nous allons maintenant revenir sur notre page consacrée à Tim Berners-Lee. Vous débuterez votre travail
à partir des éléments de correction partagés à la suite de la première partie consacrée à l’introduction au
format de données HTML (téléchargez l’archive du projet). Mise à part la balise de lien avec la feuille de
style, vous ne devez ajouter aucune autre balise. Vous pourrez par contre bien sûr ajouter des attributs aux
présentes balises afin d’habiller certains blocs. Vous trouvez une figure représentant le résultat final à
obtenir après l’énoncé des exercices.

Exercices
2..12 Appliquer une feuille de style (fichier style.css) au code HTML.
2..13 Appliquer une police sans-serif par défaut au corps de la page et une couleur de fond
blanche.
2..14 Définir un bloc page, qui occupera 80 % de l’espace, centré et avec une marge supé-
rieure de 10 pixels.
2..15 Définir une classe « Table Of Contents » (toc), ayant la valeur pour couleur de fond
#f8f9fa, une bordure de 1 pixel de couleur #a2a9b1 et une marge intérieure de 10 pixels.
Appliquer cette classe au bloc du sommaire.
2..16 Appliquer la même définition de style au dernier paragraphe de pied de page (licence /
ayant droits) avec le style pied_page, avec une marge supérieure de 40 pixels par rap-
port au bloc précédant (évitez la redondance de définition).
2..17 Le titre de la page devra être centré.
2..18 Le texte des paragraphes devra être justifié (justify).

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 4 / 5

 Introduction au format de données CSS v 1.1

2..19 Appliquer la couleur de fond (#EEEEFF) aux titres de niveau 2 de la page, ainsi qu’une
marge intérieure de 10 pixels.
2..20 Retirer aux liens la décoration par défaut (soulignement par exemple), puis définir une
couleur (#0645ad).
2..21 Faire flotter la photo de Tim Berners-Lee autour du texte de la biographie. Appliquer
également une marge à droite et en dessous de 10 pixels. Il est important que les sec -
tions suivantes (introduites par des titres de niveau 2) ne continuent pas de flotter au-
tour de la photo.

Faîtes vérifier votre production finale par l’enseignant responsable.

Remarque : Vous retrouverez le résultat sur la branche correspondant à l’itération n°2 du dépôt
dédié.

3. Sources
• Site snt-ella, en licence Creative Commons by nc-sa
• Site OpenClassRooms, en licence Creative Commons by nc-sa

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 5 / 5