Les commandes CSS à connaître pour maîtriser le développement Web

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit en HTML ou XML, contrô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écessaires. Nous proposons un aperçu des commandes CSS (appelées également « instructions ») importantes et fréquemment utilisées, complété par quelques exemples courts et adaptables pour la pratique du Web design.

Commandes CSS : diversité des possibilités avec CSS 3

Au départ, les commandes CSS étaient simplement utilisées pour définir des polices et des couleurs de caractè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 possibilités se sont considérablement é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 animations - tout cela grâce aux commandes CSS !

Une commande CSS est construite comme suit :

La propriété et la valeur de la propriété forment ensemble ce que l’on appelle la déclaration.

Il est essentiel pour ceux qui écrivent du CSS de toujours garder à l’esprit qu’il existe des disparités dans la prise en charge des fonctionnalités par les différents navigateurs. Afin de gérer ces variations, les CSS utilisent ce que l’on appelle les préfixes de navigateur. Ces préfixes ciblent spécifiquement les moteurs de navigateur :

• -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 gratuitement la compatibilité des commandes CSS avec tous les navigateurs courants.

Pour le responsive 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 colorimétrique RVB. Il existe pour cela des commandes CSS différentes selon les diffé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.

Possibilités d’indiquer les valeurs des couleurs

• Code Hexadécimal : #63f0ac. C’est une représentation hexadécimale qui combine les valeurs rouge, vert et bleu en une seule chaîne.
• Noms de Couleurs : des mots-clés prédéfinis comme red, green, blue, coral, white, black, etc., qui sont reconnus par le navigateur.
• RVB : utilise la fonction rgb(238,130,238) our définir les couleurs en termes de rouge, vert et bleu. Pour ajouter de la transparence, on utilise rgba(238,130,238, 0.7), où le dernier paramètre contrôle l’opacité (0 étant complètement transparent et 1 étant totalement opaque).
• HSL avec Transparence : la fonction hsla(140,20%,50%,0.5) permet de définir les couleurs en utilisant les paramètres de
• Teinte (Hue) : de 0 à 360 degrés sur le cercle chromatique -Saturation : de 0 % incolore à 100 % de la plus haute intensité de couleur
• Luminosité (Lightness) : de 0 % en noir à 100 % en blanc
• Transparence : jusqu’à 1.0 = couverture totale des couleurs

Exemples de définition 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 simplement 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 » représente une valeur pour une image sans dimensions 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 indications de couleur, y compris les valeurs de couleur avec transparence.

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 caractères

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

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

Cette instruction CSS peut être décomposée en plusieurs parties, et ce dans l’ordre des indications :

La définition de la font-family pour le corps du site Web est héritée par toutes les instructions 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’informations sur les unités de mesure à utiliser pour font-size, consultez notre article sur le CSS et le Responsive Web design.

Commandes CSS pour la mise en forme du texte

Outre la police de caractères, sa couleur et sa taille, d’autres subtilités typographiques sont importantes pour la lisibilité 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 propriétés sont regroupé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éviation 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écifique d’une image ou d’un rectangle, utilisez les propriétés border-top, border-right, border-bottom, et border-left. Ces propriétés acceptent les mêmes attributs que la notation abrégée pour la propriété border, permettant un réglage individuel des bordures sur chaque arête.

Commandes CSS pour définir l’espacement

Il existe deux types d’espacement :

• 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’espacement 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écifiquement 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 commenç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’espacement 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’énumération de certaines valeurs sont identiques à celles de padding.

Commandes CSS pour les liens

Si vous définissez l’apparence des liens dans le CSS, vous pouvez concevoir chaque état d’un lien séparément. En plus de l’apparence normale, vous définissez é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;}

Habituellement, 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 propriétés CSS disponibles 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 caractéristiques.

Il s’agit ici de commandes détaillées. Elles peuvent également être imbriqué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.