Les commandes CSS à connaître pour maîtriser le dé­ve­lop­pe­ment Web

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la pré­sen­ta­tion d’un document écrit en HTML ou XML, con­trô­lant ainsi l’apparence visuelle des éléments Web sur les pages Internet. Pour créer un site Web, les commandes CSS les plus diverses sont donc né­ces­saires. Nous proposons un aperçu des commandes CSS (appelées également « ins­truc­tions ») im­por­tantes et fré­quem­ment utilisées, complété par quelques exemples courts et adap­tables pour la pratique du Web design.

Commandes CSS : diversité des pos­si­bi­li­tés avec CSS 3

Au départ, les commandes CSS étaient sim­ple­ment utilisées pour définir des polices et des couleurs de ca­rac­tères, embellir des tableaux ou encore faire en sorte que des éléments soient entourés par un texte. Avec la troisième version majeure de CSS, les pos­si­bi­li­tés se sont con­si­dé­ra­ble­ment étendues : aujourd’hui, il est possible de créer des dégradés, de détourer des images, de créer des ombres et des arrondis, d’utiliser des ani­ma­tions - tout cela grâce aux commandes CSS !

Une commande CSS est cons­truite comme suit :

La propriété et la valeur de la propriété forment ensemble ce que l’on appelle la dé­cla­ra­tion.

Il est essentiel pour ceux qui écrivent du CSS de toujours garder à l’esprit qu’il existe des dis­pa­ri­tés dans la prise en charge des fonc­tion­na­li­tés par les dif­fé­rents na­vi­ga­teurs. Afin de gérer ces va­ria­tions, les CSS utilisent ce que l’on appelle les préfixes de na­vi­ga­teur. Ces préfixes ciblent spé­ci­fi­que­ment les moteurs de na­vi­ga­teur :

• -moz- : pour Firefox
• -ms- :pour Internet Explorer
• -khtml- : pour Konqueror
• -o- : pour les anciennes versions d’Opera
• -webkit- : pour Safari, Chrome et les nouvelles versions d’Opera

Voici un exemple simple :

.box {
	-moz-border-radius: 10px; / *Instructions pour Firefox* /
	border-radius: 10px;
}

Sur le site CANIUSE, il est possible de vérifier gra­tui­te­ment la com­pa­ti­bi­lité des commandes CSS avec tous les na­vi­ga­teurs courants.

Pour le res­pon­sive design de sites Web, la CSS Flexbox, les grilles Grid et les Media queries ont notamment été ajoutées, intégrant de nouvelles commandes CSS pour faciliter la mise en œuvre du principe Mobile First.

Couleurs dans le CSS

Le monde des couleurs sur Internet repose sur l’espace co­lo­ri­mé­trique RVB. Il existe pour cela des commandes CSS dif­fé­rentes selon les dif­fé­rents éléments d’un site Web. Presque chaque élément peut être doté d’une couleur ou même d’un dégradé de couleurs.

Pos­si­bi­li­tés d’indiquer les valeurs des couleurs

• Code Hexa­dé­ci­mal : #63f0ac. C’est une re­pré­sen­ta­tion hexa­dé­ci­male qui combine les valeurs rouge, vert et bleu en une seule chaîne.
• Noms de Couleurs : des mots-clés pré­dé­fi­nis comme red, green, blue, coral, white, black, etc., qui sont reconnus par le na­vi­ga­teur.
• RVB : utilise la fonction rgb(238,130,238) our définir les couleurs en termes de rouge, vert et bleu. Pour ajouter de la trans­pa­rence, on utilise rgba(238,130,238, 0.7), où le dernier paramètre contrôle l’opacité (0 étant com­plè­te­ment trans­pa­rent et 1 étant to­ta­le­ment opaque).
• HSL avec Trans­pa­rence : la fonction hsla(140,20%,50%,0.5) permet de définir les couleurs en utilisant les pa­ra­mètres de
• Teinte (Hue) : de 0 à 360 degrés sur le cercle chro­ma­tique -Sa­tu­ra­tion : de 0 % incolore à 100 % de la plus haute intensité de couleur
• Lu­mi­no­sité (Lightness) : de 0 % en noir à 100 % en blanc
• Trans­pa­rence : jusqu’à 1.0 = cou­ver­ture totale des couleurs

Exemples de dé­fi­ni­tion de couleurs pour les éléments HMTL

Pour la couleur de la police, on utilise la propriété color :

p { color: red; } / *paragraphe en rouge* /
div { color: #ffc3dd; } / *Conteneur DIV avec écriture en rose clair* /
h1 { color: rgba(220,0,218,0.85); } / *Titre en violet vif avec transparence 85 %* /

Des dégradés de couleurs sont également possibles

Ce qui devait autrefois être créé avec des fichiers image peut aujourd’hui être réalisé très sim­ple­ment par une commande CSS : les dégradés de couleurs. Il faut pour cela utiliser background-image: gradient ou, sous sa forme abrégée, background: gradient. Le « gradient » re­pré­sente une valeur pour une image sans di­men­sions et crée un dégradé de couleurs qui peut être modifié à des endroits définis.

Le tableau ne montre qu’une partie des attributs possibles. Toutes les valeurs courantes peuvent être utilisées comme in­di­ca­tions de couleur, y compris les valeurs de couleur avec trans­pa­rence.

La syntaxe de la commande CSS complète est par exemple :

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

Commandes CSS pour les polices de ca­rac­tères

La commande CSS font permet de modifier d’un coup les six pro­prié­tés d’une police utilisée.

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

Cette ins­truc­tion CSS peut être dé­com­po­sée en plusieurs parties, et ce dans l’ordre des in­di­ca­tions :

La dé­fi­ni­tion de la font-family pour le corps du site Web est héritée par toutes les ins­truc­tions situées en dessous. La couleur de la police n’est pas définie par une commande « font », mais par color:spécification de la couleur.

Pour plus d’in­for­ma­tions sur les unités de mesure à utiliser pour font-size, consultez notre article sur le CSS et le Res­pon­sive Web design.

Commandes CSS pour la mise en forme du texte

Outre la police de ca­rac­tères, sa couleur et sa taille, d’autres sub­ti­li­tés ty­po­gra­phiques sont im­por­tantes pour la li­si­bi­lité d’un site Web. Il s’agit notamment de :

Commandes CSS pour les lignes et les cadres

Pour créer des cadres, on utilise l’élément CSS border, dans lequel plusieurs pro­prié­tés sont re­grou­pées, comme c’est également le cas pour les commandes de police évoquées ci-dessus.

Exemple : une image avec la balise HTML img est entourée d’une ligne de 5 pixels en bleu marine. L’abré­via­tion est alors la suivante :

img { border: 5px solid #000080; }

Cette commande CSS se présente ainsi :

Pour définir les bordures le long de chaque côté spé­ci­fique d’une image ou d’un rectangle, utilisez les pro­prié­tés border-top, border-right, border-bottom, et border-left. Ces pro­prié­tés acceptent les mêmes attributs que la notation abrégée pour la propriété border, per­met­tant un réglage in­di­vi­duel des bordures sur chaque arête.

Commandes CSS pour définir l’es­pa­ce­ment

Il existe deux types d’es­pa­ce­ment :

• padding désigne l’espace intérieur entre le contenu et la bordure de l’élément qui le contient
• margin définit l’espace extérieur séparant un élément des éléments adjacents

L’es­pa­ce­ment intérieur

Le padding est utilisé pour établir l’espace entre un bloc de texte ou une image et sa bordure. Ce paramètre peut être appliqué de manière concise à travers une notation abrégée, ou spé­ci­fi­que­ment pour chaque côté d’un bloc de contenu.

Si, dans la forme abrégée padding, les quatre positions sont occupées par des valeurs, on procède dans le sens des aiguilles d’une montre en com­men­çant par le haut, c’est-à-dire en écrivant :

p { padding: 5px 0 5px 0; } / *en haut et en bas 5 pixels, pas d’espace intérieur à droite et à gauche* /

L’es­pa­ce­ment extérieur

La commande CSS margin détermine la distance entre un élément de mise en page et le suivant. L’écriture et l’énu­mé­ra­tion de certaines valeurs sont iden­tiques à celles de padding.

Commandes CSS pour les liens

Si vous dé­fi­nis­sez l’apparence des liens dans le CSS, vous pouvez concevoir chaque état d’un lien sé­pa­ré­ment. En plus de l’apparence normale, vous dé­fi­nis­sez également la manière dont un lien est affiché lorsque la souris passe dessus, pendant le clic et lors de la sélection.

a:link { background-color : black ; color : white;}

Ha­bi­tuel­le­ment, pour modifier la couleur des liens, on utilise ce que l’on appelle des pseudo-classes. Cependant, il est possible d’intégrer toutes les pro­prié­tés CSS dis­po­nibles dans ces pseudo-classes.

Commandes CSS pour les arrière-plans

L’arrière-plan d’un site Web peut également être modifié par CSS. Pour cela, il suffit de définir la couleur ou d’insérer une image. Si l’on choisit une image, on peut en plus définir d’autres ca­rac­té­ris­tiques.

Il s’agit ici de commandes dé­tail­lées. Elles peuvent également être im­bri­quées sous la commande générique background :

background: white url("http://exemple.fr/image.png")
    repeat-x

Les commandes background-color, background-image et background-repeat sont intégrées ici.