Langages de programmation orientés Web
CSS Propriétés
2025 - 2026
Correction
Propriétés CSS
Première partie
Gestion typographique
La majorité des informations sur un site est textuelle, nous allons voir plusieurs propriétés qui permettent de mettre en forme ce type de contenu :
- la police de caractères
- la taille
- l'épaisseur
- la hauteur de ligne
- la couleur
- l'alignement
- etc.
Police d'écriture
ou typeface, font family
Représente un ensemble des caractères avec tout les styles et graisses disponibles. Ce dernier porte un nom qui lui est propre.
Ex: Arial, Satoshi, etc.
Catégories
Les typographies sont triées en différentes catégories, et même en sous-catégories selon certains aspects graphiques. Voici les plus communes:
- À empattements * ou serif
- Sans empattement * ou sans-serif
- Scripte
- Manuscrite
- Display
font-family
La propriété font-family définit la police de caractère. Par catégorie ou précise, avec ou sans alternative.
body{
font-family: 'Arial', sans-serif;
}
Plusieurs alternatives peuvent être prévues dans le cas d'un problème de chargement, les différentes valeurs sont séparées d'un espace.
Catégories
Voici les différentes catégories prisent nativement en charge:
- serif
- sans-serif
- monospace
- cursive
- fantasy
Web safe fonts
Il existe une liste de polices disponiblent sur tous les systèmes :
Celles installées localement ne fonctionneront que pour les utilisateurs qui les auront eux-même installées.- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
More fonts
Heureusement, nous avons la possibilité d'ajouter d'autres polices de caractères via des services externes comme Google fonts, Adobe fonts, fontshare.com et bien d'autres.
Essayons d'ajouter la police Roboto depuis Google fonts. Le site nous donne des balises et des styles à rajouter dans notre code pour que cela fonctionne :
<head>
[…]
</head>
body{
font-family: "Roboto", sans-serif;
…
}
Exercice A
Ouais, souvent les premiers designs c'est un peu ça
Ajoutez la typographie Inter depuis Google fonts pour qu'elle soit utilisée sur toute vos pages de votre dernier exercice.
Taille de caractère
La propriété font-size définit la taille des caractères. La valeur est généralement numérique suivi d'une unité, mais peut aussi être un mot clé.
// Valeur numérique exprimé en pixel.
h1{
font-size: 40px;
}
// Mot clé, la valeur dépend des
// paramètres de l'utilisateur.
strong{
font-size: large;
}
Valeurs
& Unités
Il existe 2 types de valeurs : absolue pour des valeurs arbitraires et relative pour des valeurs qui dépendent d'un contexte. Et pour chacun de ces types il existe une longue liste d'unités.
Valeurs absolues
La plus part de ces valeurs sont liées à l'impression, ce qui limite beaucoup leur utilisation dans notre cas. Bien sûr on y retrouve l'unité px lié uniquement aux écrans.
- px (pixel)
- pt (point)
- cm (centimètre)
- mm (millimètre)
- in (inch)
Valeurs relatives
Le reste des unités sont relatives, et vont référencer le contexte dans lequel elles se situent. Les plus communes :
- % : pourcentage relatif à la propriété de l'élément parent
- em : 1em équivaut à la font-size actuelle.
- rem : 1rem équivaut à la taille de typographie de la balise html.
- vw : relative à 1% de la largeur totale de la fenêtre
- vh : relative à 1% de la hauteur totale de la fenêtre
Hauteur de ligne
ou interlignage
L'espacement entre 2 lignes d'un même texte, définit par la propriété line-height. De préférence exprimé avec une valeur relative : en pourcentage ou en em.
h1{
font-size: 24px;
// Exprimé de manière absolue
line-height: 32px;
// ou relative: 120% de la taille de police
line-height: 1.2em;
}
Conseil: entre 100% et 120% pour les titres, et entre 120% et 150% pour les textes.
Épaisseur
La propriété font-weight défini l'épaisseur des caractères. Il existe plusieurs niveaux : selon la police choisie vous n'aurez pas toujours accès à toute les possibilités.
Depuis quelques années on peut trouver des typos dites variables, paramètrables de manière précise.Les différents niveaux du plus ou plus épais:
- 100 - Thin
- 200 - Extra Light
- 300 - Light
- 400 - Regular
- 500 - Medium
- 600 - Semi Bold
- 700 - Bold
- 800 - Extra Bold
- 900 - Black
h1{
// Valeur numérique, épaisseur maximale.
font-weight: 900;
}
Style
La propriété font-style définit le style du texte, il existe 3 valeurs :
- normal, valeur par défaut
- italic, pour du texte penché
- oblique, permet de définir un angle de pente
p{
// Tous les paragraphes sont penchés
font-style: italic;
}
Transformations
La propriété text-tranform change la case du texte, voici les valeurs communes :
- none, pas de changement
- uppercase, tout en majuscule
- lowercase, tout en minuscule
- capitalize, la première lettre de chaque mot en majuscule
p{
text-transform: uppercase;
}
Décoration
La propriété text-decoration change la case du texte, voici les valeurs communes :
- none, pas de changement
- underline, texte souligné
- overline, ligne au dessus du texte.
- line-through, ligne au travers du texte.
h2{
text-decoration: underline;
}
Alignement
La propriété text-align change l'alignement du texte:
- left, aligné de gauche à droite
- right, align de droite à gauche
- center, texte centré
- justify, chaque ligne fait la même longueur
.text-right{
text-align: right;
}
Couleur
La propriété color définit la couleur du texte. La valeur peut être définit par une fonction comme rgb(), en hexadécimal ou par une couleur nommée. Il existe aussi un mot clé currentColor qui utilise la couleur appliquée au parent.
a{
// Couleur nommée
color: orange;
}
RGB
RGB représente trois canaux de couleurs (rouge - vert - bleu), chacun compris entre 0 et 255. 0 équivaut à un canal éteint, 255 à un canal allumé au maximum.
a{
// Un rouge vif à 100%
color: rgb(255 0 0);
}
Hexadécimal
Une référence hexadécimal contient 6 caractères, avec un mélange de lettres (A à F) et de chiffres (0 à 9). Cette référence commence toujours avec le symbol #
On peut monter à 8 caractères en ajoutant le channel alpha : la transparence.Warning: Array to string conversion in /home/antoinedvz/ephec/25-26/lpow/vendor/twig/twig/src/Template.php on line 359
Array
a{
// Un rouge vif à 100%
color: #FF0000;
}
Arrière plan
Background
La propriété background est un raccourcis reprennant plusieurs autres propriétés :
- background-color
- background-image
- background-size
- background-position
- background-repeat
background-color
La propriété background-color change la couleur de fond d'un élément. Les valeurs possibles sont les mêmes que la propriété color.
button{
background-color: blue;
}
background-image
La propriété background-image permet d'ajouter via la fonction url() une image de fond décorative. Attention ceci n'est pas référencé, donc diffère en terme d'utilisation avec la balise img.
Plusieurs images peuvent être ajoutées, en ajoutant une virgule entre les fonctions url( ). Cette propriété peut aussi définir des dégradés.
header{
background-image: url(/chemin/vers/mon-fichier.jpg);
}
background-size
La propriété background-size gère l'affichage de l'image dans l'élément :
- cover, l'image occupera tout l'espace sans déformation mais potentiellement coupée.
- contain, l'image apparaît entièrement mais peut laisser des espaces vides.
- valeur chiffrée (px - em - % - etc.), l'image prendra une taille fixe ou relative.
header{
background-image: url(/chemin/vers/mon-fichier.jpg);
}
background-position
La propriété background-position gère la position de l'image dans l'élément, et peut définir une valeur pour l'axe horizontal et vertical.
- top, aligne l'image le plus au dessus
- bottom, aligne l'image le plus au dessous
- center, centre l'image sur l'axe choisi
- left, aligne à gauche l'image
- right, aligne à droite l'image
- valeur chiffrée (px - em - % - etc.), aligne l'image de manière absolue ou relative sur l'axe choisi.
header{
background-image: url(/chemin/vers/mon-fichier.jpg);
// Centre horizontalement l'image,
// et aligné sur le dessus.
background-position: center top;
}
background-repeat
La propriété background-repeat définit si l'image se répète ou non pour créer une mosaïque.
- no-repeat, pas de répétition
- repeat-x, se répète sur l'axe horizontal
- repeat-y, se répète sur l'axe vertical
Exercice B
Reproduire l'image suivante le plus fidèlement possible, en utilisant les nouvelles notions de CSS et en ajoutant les 2 typographies :
- Supreme pour les titres
- Satoshi pour les textes
Pour le prochain cours
Dans votre projet de présentations de 3 médias :
- ajouter 2 typographies via Google fonts ou Fontshare.com pour vos titres et textes.
- ajouter une classe active sur le lien qui représente votre page dans votre menu et le stylisé (couleur, épaisseur, etc.).
- ajouter un fond coloré à votre navigation, et modifier la couleur de typographie si nécessaire.
- définir de nouvelles tailles pour chaque niveau de titre h1 à h6 et accorder l'épaisseur avec votre typographie.
- Modifier la hauteur de ligne dans vos titres et textes pour améliorer la lisibilité.
- Mettre en ligne via FTP sur votre nom de domaine.