Les Bases du WEB – le CSS

Bienvenue à ce cinquième blogue sur les bases de HTML.

Nous allons voir beaucoup de matière aujourd’hui, nous entamons les bases du CSS (Cascading Style Sheet). Le CSS est un langage distinct qui nous permet de modifier tous les aspects d’un site internet. Il est possible d’inclure toutes nos commandes « CSS » à l’intérieur du même document mais il est plus simple de les garder dans un fichier séparé pour simplifier la lisibilité et la modification futur.

Commençons! Nous allons créer un fichier nommé style.css et le sauvegarder au même endroit que nos autres fichiers web (Un avantage a placé notre « CSS » dans un fichier séparer est qu’on va pouvoir le réutilisé dans plusieurs page web). Pour que notre « CSS » s’applique à notre document web, il faut ajouter le lien dans la tête de notre document. Pour ce faire, nous allons utiliser la balise « link » avec trois attributs. Commençons par un example :

<link rel="stylesheet" type="text/css" href="style.css">

Nous n’allons pas trop analyser chacun des attributs en détails, mais ce qu’il faudra se rappeler, c’est que l’attribut “href” doit pointé vers notre feuille de style.

Note : Il est aussi possible d’insérer des codes CSS entre des balises « <style></style> » ou à l’intérieur d’une balise avec l’attribut « style ». On va voir ces différentes techniques plus tard dans nos tutoriels.

Se lancer dans de voir du « CSS ». Voici un exemple :

h1 {
 color :#404040;
 font-size :20px;
 background-color :AliceBlue;
}

Les styles CSS sont séparés en trois sections : le sélecteur, la propriété et la valeur. Le sélecteur indique quel élément vont être affecté par notre style, dans l’exemple plus haut, le sélecteur est « h1 », alors tous les éléments « h1 » de notre document vont suivre les instructions qu’on va leurs dicter. Ensuite, toutes les propriétés et valeurs pour le sélecteur vont être à l’intérieur des « { } ». Dans l’exemple plus haut, les propriétés sont « color », font-size » et « background-color », et les valeurs sont « #404040 », « 20px » et « AliceBlue ».

La couleur

Pour aujourd’hui, on va se contenter de ces trois propriétés. La propriété « color » va dicter la couleur du texte que nous allons afficher à l’écran et l’attribut « background-color » celle du font. Les valeurs d’une propriété suive immédiatement après les « : », et il ne faut pas laisser d’espace, de plus, chaque bloc propriété/valeur se termine avec un « ; ». Pour ceux qui se demandent comment on fait pour choisir la couleur, on a trois techniques à notre disposition.

On peut utiliser leur nom commun (comme « AliceBlue), la liste complète des noms communs se retrouve sur ce site : http://www.w3schools.com/html/html_colornames.asp. La deuxième méthode utilisée est aussi la valeur hexadécimale d’une couleur, plusieurs logiciels d’image inclus un outil pour afficher la valeur hexadécimale d’une couleur, et vous pouvez aussi utiliser cet outil en ligne : https://imagecolorpicker.com/. Finalement, les plus complexes sont les méthodes RGB et RGBA. Ces méthodes nous permets d’indiqué le taux de rouge, vert, bleu et/ou alpha d’une couleur (La valeur alpha est la transparence d’une couleur). Par exemple, on peut afficher un texte rouge opaque des façons suivantes avec les méthodes RGB ou RGBA :

h1  {
 color :rbg(255,0,0);
} 

Ou

h1 {
 color :rgb(100%,0%,0%);
}

Et avec RGBA :

h1  {
 color :rbga(255,0,0,1);
}

Ou

h1 {
 color :rgba(100%,0%,0%,100%);
}

Si on veut une semi transparence, avec le RGBA ou peut modifier la valeur alpha :

h1  {
 color :rbga(255,0,0,0.5);
}

Ou

h1 {
 color :rgba(100%,0%,0%,50%);
}

On peut même changer la couleur avec les valeurs hsl, ou hsla (Hue, Saturation, Lightness). Pour l’instant nous allons simplement utiliser les couleurs hexadécimales et par nom.

Font-size

L’autre propriété qu’on a vue est « font-size », ceci détermine la grosseur de notre police d’affichage. Ici aussi on peut utiliser plusieurs format, celui dont j’ai utilisé plus haute défini la hauteur en pixel. On indique la hauteur de la police suivit par l’acronyme « px ». Automatiquement tout notre texte inclus dans le sélecteur sera la hauteur voulu.

Vu la quantité d’information dans cette leçon, je vous invite fortement à regarder notre vidéo pour avoir des informations supplémentaires.

Lors de notre prochaine leçon, nous allons approfondir nos connaissances sur le CSS et ces utilisations sur notre page web.

Voir la leçon sur You Tube