Un peu de CSS (Cascading Style Sheets)… pour styliser les éléments !
Dans les années 1996, un nouveau langage descriptif a été mis en place pour améliorer l’affichage des pages HTML : le CSS.
En ciblant les balises HTML, le CSS permet de leur apporter de nouvelles propriétés (couleur, hauteur, largeur, couleur de fond, etc.).
Au final, la page HTML s’affichera non plus comme une suite de ligne, mais comme une page mise en forme de façon agréable à regarder !
Comment l’ajouter ?
Il y a différentes façons de rajouter du CSS à une page HTML.
Par exemple, il est possible de l’ajouter directement dans le code HTML en utilisant sur les balises ciblées l’attribut « style ».
<balise style = "propriété1 : valeur1; propriété2 : valeur2; ..."> </balise>
Celle qui sera favorisée sera d’externaliser le fichier. Pour cela, on rajoute une balise <link> dans le <head> de la page HTML.
<head> <link rel="stylesheet" href="style.css"> </head>
Et comment ça marche ?
Sur le fichier externe .css, l’objectif est de cibler les balises HTML visées par le changement de mise en forme.
Si le ciblage n’est pas assez pointu, on utilisera le principe de « classes ». C’est un attribut (class) que l’on donne aux éléments pour les distinguer des autres. Il permet aussi de regrouper des éléments qui n’ont pas de balise commune.
<balise class="nom"> </balise>
.nom { }
À noter qu’il est possible d’ajouter différentes classes a un élément HTML.
Les différentes façons de cibler les éléments sont les suivantes :
– une balise
balise { }
– une classe
.class { }
– un identifiant
#id { }
Il est possible de cibler les éléments en fonction de leur lien de parenté. Pour cela, on écrit chaque élément avec un espace :
<div class="principal"> <p> blabla <span> blabla </span></p> <span> blabla </span> </div>
.principal p span { }
/* on cible les balises span contenues dans les balises p qui appartiennent à la class "principal" */
Pour cibler deux (ou plus) éléments différents, on les écrit avec une virgule entre chaque.
balise1, .class, balise2 { }
Les propriétés CSS
Couleur
Il y a 3 possibilités de renseigner une couleur :
– son nom en anglais (par ex. : red)
– sa valeur hexadécimale (par ex. #FF0000)
– la notation RGB. Cette notation représente le spectre lumineux et indique l’intensité du rouge R, du vert G et du bleu B (par ex. RGB(255,0,0).
Il est possible de récupérer les valeurs des couleurs spéciales grâce à un color picker (disponible sur Google).
On peut aussi gérer l’opacité de la couleur en ajoutant au mode RGB une 4ème valeur « A ». Cette valeur va de 1 : opaque à 0 : transparent.
On la note : RGBA(255, 0, 0 0.5) <– ici le rouge aura une opacité de 50%.
Attention : l’opacité est une valeur décimale, il faut bien penser à mettre un point et non pas une virgule !
Typographie
Il existe différentes propriétés que l’on peut utiliser pour gérer la typographie des textes.
– la couleur de texte (avec la même notation que vue précédemment).
color : valeur;
– le type de famille de typologie. Il est important de penser à mettre différentes typologies au cas où le navigateur ne puisse pas en charger certaines. Il est possible de retrouver les typologies prises en charge par la plupart des navigateurs sur internet : voir les « safe font« .
font-family : helvetica, sans-serif;
– la taille de la typographie.
font-size : 12px;
Il existe différentes unités de mesure : pixels, points, pourcentage.
Avec CSS3, une nouvelle unité de mesure est apparue : em. Elle donne une proportion par rapport à la taille de l’élément parent (1em correspond à une unité de la taille du parent).
– l’épaisseur des lettres.
font-weight : bold; /*écriture en gras */ font-weight : bolder; /*écriture en plus gras */
– la décoration du texte.
text-decoration : underline; /* souligné */ text-decoration : line-through; /* barré */
– mettre le texte en italique.
font-style : italic;
– changer la casse du texte.
text-transform : uppercase; /*majuscule */ text-transform : lowercase; /*minuscule */
Arrière-plan
En CSS, on peut ajouter directement une image de fond.
background-image : url("fichier.png");
Il est possible d’indiquer sa position.
background-position : x y; /* x correspond à la longueur et y à la largeur */
La position peut aussi être généraliste en utilisant comme valeurs : left (à gauche), right (à droite), center (centré), top (en haut), bottom (en bas).
La taille de l’image peut être ajustée.
background-size : x y; /* x correspond à la longueur et y à la largeur */
Les valeurs x et y sont exprimées en pixels ou en pourcentage.
La taille peut s’ajuster automatiquement en gardant le ratio d’origine en utilisant « auto » comme valeur.
Il est aussi possible de faire en sorte que l’image se répète.
background-repeat : valeur;
Ici les valeurs sont les suivantes :
– repeat : l’image se répète sur toute la largeur et la longueur de la page.
– repeat-x : l’image se répète uniquement de façon horizontale.
– repeat-y : l’image se répète uniquement de façon verticale.
– no-repeat : l’image ne se répète pas.
Il est possible de faire chevaucher plusieurs images de fond.
background-image : url("image1.png"), url("image2.png");
Dans ce cas, l’image 1 s’affichera en premier et l’image 2 s’affichera derrière.
Pour simplifier l’écriture, on peut écrire toutes les propriétés sur une seule ligne.
background : url("image.png") position / size repeat ;
Voici les premiers concepts sur CSS que j’ai appris lors de ma formation.
Je continuerai dans les prochains posts… Le CSS est très fourni et demande d’acquérir de nombreuses notions ! 🙂