Aicha Akrout

Chapitre II: Mettre en forme les pages

avec CSS
 Ce quoi CSS?
● CSS: « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ».
● Le CSS (langage de description) permet d’attribuer un design spécifique à tout élément

du HTML, lui modifiant ses caractéristiques par défaut. Grâce à lui, il est possible de :
❏ changer des couleurs de titre,
❏ encadrer un contenu,
❏ attribuer une taille spécifique à un bloc,
❏ et pléthore d’autres manipulations allant même jusqu’à l’animation de contenu.
● Ce langage est donc composé des fameuses « feuilles de style en cascade » également
appelées fichiers CSS (.css) et contient des éléments de codage.
 Lien CSS avec HTML
● Le CSS sera interprété par le navigateur Internet, tant qu’il est reconnaissable par ce dernier au sein de la
feuille HTML.
● Une solution – assez peu efficace dès lors que le site atteint une certaine complexité dans son design –
consiste à déclarer du CSS directement dans une balise HTML à l’aide de l’attribut style.
● Autre possibilité, toujours au sein-même du fichier HTML, en appliquant le CSS dans une balise <style> qui
décrira l’ensemble des règles visuelles souhaitées pour la page.
● Dès lors, il sera impossible de modifier l’ensemble des pages d’un site internet autrement qu’en reprenant un
par un chaque fichier HTML – voire chaque élément du code HTML ! – où du CSS aura précédemment été
intégré.
● Il sera de fait davantage conseillé d’appeler une feuille de style dans la section head du fichier HTML, par le
biais d’une balise <link>. Le CSS s’écrira donc dans un fichier à part, portant l’extension .css.
● Cette méthode est clairement préférable aux autres. Puisqu’il suffira de modifier un seul fichier CSS pour que se répercute instantanément
le style sur toutes les pages d’un site reliées au fichier.
Comment ça marche?
Les sélecteurs:
● Ils sont primordiaux en CSS puisque ce sont eux qui permettent d’associer une ou plusieurs cibles dans le code HTML à un style
visuel indiqué dans la feuille de style.
● Il peut tout aussi bien s’agir de sections, d’éléments, de classes ou d’IDs, qui se reconnaîtront dans le CSS par des indicateurs
précis :
« . » pour une classe,
et « # » pour un ID par exemple.

Sachant que tous les sélecteurs n’ont pas le même niveau de spécificité.

● En effet, le CSS est régi par des règles de cascade et de spécificité si des valeurs contradictoires venaient à cibler un même
élément, sachant qu’une déclaration CSS directement faite dans une balise HTML sera a priori la plus spécifique de toutes.
● Concernant la cascade, c’est la valeur déclarée en dernier dans la feuille de style qui l’emporte sur toutes les autres dans le cas où
ladite valeur concerne des sélecteurs de même niveau de spécificité. Si tel n’est pas le cas, c’est la valeur associée à l’élément le
plus spécifique qui prévaut sur toutes les autres.
● En HTML, le sélecteur d’éléments est peu spécifique avec, pour exemple :
➢ l’élément <p>, utilisé pour l’intégralité des paragraphes,
➢ le sélecteur de classe, quant à lui, peut être utilisé pour appliquer des règles de styles à plusieurs éléments HTML ciblés, le
rendant prioritaire sur le sélecteur d’éléments,
➢ enfin, le sélecteur d’ID prendra le dessus, puisqu’un ID ne peut être associé qu’à un unique élément.
Le modèle de boîte CSS
Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de
remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

Les propriétés qui définissent les marges d'une boîte

● margin
● margin-bottom
● margin-left
● margin-right
● margin-top

Les propriétés qui définissent le remplissage (padding) d'une boîte

● padding
● padding-bottom
● padding-left
● padding-right
● padding-top
Padding Margin
Les propriétés qui définissent la taille d'une boîte

● height
● width
● max-height
● max-width
● min-height
● min-width

Les propriétés qui définissent le flux du contenu dans une boîte

● overflow
● overflow-x
● overflow-y
La boîte de bordure :
La bordure englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés
par la propriété border et ses propriétés sous-jacentes.

1) border-width: spécifie l'épaisseur de la bordure.

➔ <length>: Une valeur numérique mesurée en unités px, em, rem, vh et vw.
➔ thin: l'équivalent de 1px
➔ medium: l’equivalent de 3px
➔ thick: l’equivalent de 5px
1) border-style: Spécifie le type de ligne tracée autour de l'élément, notamment
➔ solid: une ligne solide et continue.
➔ none (default): Aucune ligne n'est tracée.
➔ hidden: une ligne est tracée, mais non visible. Cela peut être utile pour ajouter un petit
plus largeur à un élément sans afficher de bordure.
➔ dashed: une ligne composée de tirets.
➔ dotted: une ligne composée de points.
➔ double: ajoute deux lignes autour de l'élément.
➔ groove: ajoute un biseau basé sur la valeur de couleur de manière à rendre l'élément
apparaissent enfoncés dans le document.
➔ idge: similaire au groove, mais inverse les valeurs de couleur de manière à faire apparaître
l'élément en relief.
➔ inset
★ outset

color: précise la couleur de la bordure et accepte: <rgb()>, <rgba()>,<code>,<hsl()>,

<hsla()>, <hex-color>, <named-color>
Border Radius
Box-shadow
Les ombres donnent des effets de profondeur intéressants sur une page Web. Ceci est
particulièrement utile sur les boutons d'un site par exemple. En raison de l'impression en relief,
un bouton avec une ombre portée indique visuellement aux visiteurs du site qu'il est « cliquable
».
La propriété CSS box-shadow s'applique à l'ensemble du bloc, et prend quatre valeurs dans
l'ordre suivant :

1. Le décalage horizontal de l'ombre.

2. Le décalage vertical de l'ombre.
3. L'adoucissement du dégradé.
4. La couleur de l'ombre.
box-shadow: 6px 6px 0px rgba(0, 0, 0);
Font Style:
Font-style: La propriété font-style permet de sélectionner une fonte italique (italic) ou oblique (oblique) parmi
celles listées par font-family.
Font-family:permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de
l'élément ciblé.

Color: définit la couleur de premier plan d'un élément texte et de ses éventuelles décorations.

Font-weight: permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle @font-face. La propriété font-weight
peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).

Text-decoration: est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à
travers le texte. C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés « détaillées » :
● text-decoration:underline;
● text-decoration:overline;
● text-decoration:line-through;
● text-decoration:none;
Text Layout Styles:
Une fois les propriétés de police de base éliminées, examinons maintenant les propriétés que nous pouvons
utiliser pour affecter la mise en page du texte.
The text-align: définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété
fonctionne donc de façon analogue à vertical-align mais dans le sens horizontal.

Les valeurs disponibles sont les suivantes et fonctionnent à peu près de la même manière que dans une application de
traitement de texte classique :
Left: Left- aligns the text

Right: Right- aligns the text

Center: Centers the text

Justify: Makes the text spread out

Line-height: définit la hauteur de la boîte d'une ligne. Sur les éléments de bloc, la propriété line-height indique la hauteur
minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas remplacés, line-height indique la hauteur utilisée
pour calculer la hauteur de la boîte d'une ligne.

Word-spacing: définit la règle d'espacement utilisée entre les balises et entre les mots .

Letter-spacing: définit l'interlettrage utilisée pour les caractères qui composent le texte.
Text Size:
Définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la
modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs
relatives (type <length>) (par exemple exprimées avec les unités em ou ex).

font-size:
● 1 em équivaut à la taille de police du parent de l’élément.
● 1 rem équivaut à la taille de police de l'élément racine de l'ensemble du document
HTML.
:hover
● La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec
le pointeur, sans nécessairement l'activer.
● La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux
liens hypertextes comme :link, :visited, et :active, apparaissant dans des règles subséquentes. Pour décorer les
liens sans effet de bord problématique, on placera la règle :hover après les règles :link et :visited mais avant la
règle :active (l'ordre est :link — :visited — :hover — :active – un moyen mnémotechnique est de se souvenir des
initiales LVHA) tandis que l'ordre de la règle :focus est indifférent.
/* unvisited link */
a:link {
color: green;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}