Le CSS – exemples

Le langage CSS (en anglais Cascading Style Sheets, qu’on peut traduire par feuilles de style en cascade) a été créé pour le web : il sert principalement à gérer l’aspect visuel d’une page web.

En d’autres termes, le langage CSS gère la présentation d’une page web : la couleur du texte, l’utilisation de telle ou telle police, les images ou couleurs d’arrière-plan, les espaces et marges des différents éléments, le positionnement des éléments, etc.

Le CSS n’existe pas par lui-même. Il s’applique forcément à un autre document : il ne peut être utilisé qu’en association avec des langages de balisage tels que HTML.

Ces langages de balisage servent à définir une structure sémantique au contenu de la page web ; cela veut dire que les balises utilisées permettent de donner une signification à leur contenu : en indiquant que tel texte est un titre, tel autre une liste, ou encore tel autre un paragraphe. Le CSS est là pour gérer l’apparence de la page web, il crée la mise en page du langage balisé : couleurs, positions, tailles, police sans avoir à modifier le code HTML.

C’est un des concepts fondamentaux actuels du web : la séparation du fond et de la forme.

Le fond est géré par le langage de balisage (HTML) : si vous avez une liste vous utilisez les balises <ul> ou <ol> sans tenir compte de comment l’élément sera affiché. Car l’affichage relève de la forme qui sera gérée par les CSS.
Vous pourrez spécifier le type de puce affiché, ou remplacer la puce par une image, déterminer la couleur du texte, etc.

Ces deux couches que sont le fond et la forme doivent être séparées pour avoir des pages optimisées et bénéficier de toute la puissance du CSS.

Le CSS rend vos pages Web plus attrayantes. Le CSS vous permet de créer des règles qui précisent comment le contenu d’un élément doit apparaître.

La clef pour comprendre le CSS est d’imaginer qu’une boîte invisible entoure chaque élément HTML de votre page.

Les éléments Block et Inline

Considérez les éléments blocks comme si il commençait une nouvelle ligne. Par exemple les titres de <h1> à <h6>, les <p> ou des “englobants” comme <div>, <header>, <article>, <footer>, …
Les inlines seraient quant à eux pris dans le flot, ils ne commencent ni ne terminent une ligne. Ils seraient <b>, <strong>, <i>, <img>, <em>, <span>, …
Le CSS vous permet de définir des “règles” qui contrôlent comment chaque boîte et son contenu sera représenté.

Exemples de styles
– Boîte = une largeur, une hauteur, des bordures (couleur, épaisseur, type de bordure, couleur de fond, et image de fond, position dans la fenêtre du navigateur, …
– Texte = Police de caractère, taille, couleurs, italique, gras, majuscule, minuscule, petites capitales, soulignement, …
De façon spécifique, vous pouvez typer d’autres éléments comme les listes, les tableau, les formulaires, …

Une règle contient un sélecteur – l’élément HTML – et une déclaration – la façon dont vous souhaitez que le navigateur restitue l’élément.
La déclaration est composée en deux parties – une propriété et une valeur séparées par “:”.
Une règle css peut contenir plusieurs déclarations, séparées par “;”
Les déclarations sont contenues entre des accolades (ouvrante “{“ et fermante “}”.
Par exemple :

p {
font-family: Arial;
}

Ou bien

h1, h2, h3 {
font-family: Arial;
color: yellow;
}

<p> est défini comme étant restitué en utilisant la police de caractères Arial.
<h1> et <h2> et <h3> quant à eux seront restitués en utilisant la police de caractères Arial, mais aussi en couleur jaune.

Les propriétés indiquent quels aspects vous souhaitez modifier de l’élément (par exemple, font, color, width, height, border, …).
Les valeurs spécifient les réglages choisis pour ces propriétés (Arial, yellow; 100%; 350px, solid, …).

Le tout influe sur la restitution de l’élément par le navigateur.

Les couleurs s’expriment en valeur RGB, en code hexadécimal ou bien par nom de couleur.

Les valeurs RGB sont composées de 3 valeurs – 1 rouge, 1 verte, 1 bleue, chacune allant de 0 à 255 – par exemple : rgb(100, 100, 90).
Les codes hexadécimaux sont composés de 3 paires de valeurs – 1 rouge, 1 verte ,1 bleue – précédées d’un dièse (#) – par exemple : #ee3e80. (Notez que si les paires sont similaires – #ff6600 – elles peuvent être simplifiées – #f60)
Seules 147 couleurs sont répertoriées sous un nom donné à chacune d’elle et reconnu(e) par l’ensemble des navigateurs – par exemple : DarkCyan, Green, Red, Blue, …

La propriété color, vous permet de spécifier la couleur d’un texte à l’intérieur d’un élément.

/* color name */
h1 {
color: DarkCyan;
}
/* hex code */
h2 {
color: #ee3e80;
}
/* rgb value */
p {
color: rgb(100,100,90);
}

CSS traite chaque élément HTML comme si il s’ affichait dans une boîte, dont la propriété background-color définirait la couleur de l’arrière-plan de cette boîte.
Vous pouvez préciser votre choix de couleur d’arrière-plan dans la même façon que précédemment :
– les valeurs RGB , codes hexadécimaux ou en utilisant les noms de couleurs souhaitées
Si vous ne spécifiez pas de couleur de fond , l’arrière-plan est alors transparent.
Par défaut, la plupart des fenêtres des navigateurs ont un blanc fond, mais l’utilisateurs peut définir une couleur de fond pour les fenêtres en modifiant les paramètres du navigateur, donc si vous voulez pour être sûr que le fond soit blanc, vous pouvez utiliser et modifier le background-color de l’ élément <body> .

(Nous modifions également le padding afin de bien séparer le texte du bord de la boîte pour faciliter sa lecture et la bonne compréhension de l’application background-color.)

* {
padding: 10px;
}
body {    
background-color: rgb(200,200,200);
}
h1 {
background-color: DarkCyan;
}
h2 {
background-color: #ee3e80;
}
p {
background-color: #ddd;
}

Utilisez la couleur à bon escient. Attention au contraste – couleur de la typo sur un fond de couleur. Restez lisible.

Le CCS3 introduit “opacity”, ce qui permet de spécifier l’opacité d’un élément et de tous ses enfants.
La valeur est un nombre entre 0.0 et 1.0 (notez le point qui sépare les deux chiffres et non une virgule).
Ainsi, la valeur de 50% d’opacité s’écrira 0.5 et 25%, 0.25.
la propriété sera donc : “opacity: 0.25;”

La propriété “rgba” permet de spécifier une couleur (valeur RGB) et y ajoute la valeur “a” comme “alpha” (qui correspond à la couche de transparence – qui se comporte comme la valeur “opacity” – la valeur de 50% d’opacité s’écrira 0.5 et 25%, 0.25.
Par exemple la couleur noir dont l’opacité est des 25% s’écrira “rgba(0,0,0,0.25)”.

p.one {
background-color: rgb(0,0,0);
opacity: 0.5;
}
p.two {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);
}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

Comme d’anciens navigateurs n’interprètent pas et ne reconnaissent pas les couleurs “rgba”, vous pouvez offrir une alternative comme l’exemple “p.two”. Vous spécifier une première couleur interprétée par les navigateurs : “rbg(0,0,0)” (ou valeur hexadécimale ou nom de couleur), puis la couleur que vous souhaitez voir appliquée : “rgba(0,0,0,0.5)”.
Les possesseurs d’anciens navigateurs verront la première couleur (la seconde ne sera pas comprise, donc pas interprétée) et les possesseurs de nouveaux navigateurs verront la seconde couleur (la première couleur spécifiée corrigée par la seconde incluant la transparence).

(à mettre dans un coin de sa tête)
Dans le même esprit que le RGB, RGBA le CSS3 introduit également le HSL et HSLA.
Hue est l’expression d’un angle entre 0 et 360 degrés sur la roue chromatique – Saturation (de la couleur) s’exprime en pourcentage et la Luminosité également – 0% étant blanc, 50% normal et 100% exprimant le noir.
Le HSLA comprend l’Alpha de la couleur (sa transparence) qui se comporte et s’exprime comme précédemment – la valeur de 50% d’opacité s’écrira 0.5 et 25%, 0.25.

body {
background-color: #C8C8C8;
background-color: hsl(0,0%,78%);
}
p {
background-color: #ffffff;
background-color: hsla(0,100%,100%,0.5);
}

– HTML –

<!DOCTYPE html>
<html>
<head>
<title>Une introduction au CSS - Feuille CSS liée, dite externe</title>
<link href=“css/exemple.css” type=“text/css” rel=“stylesheet” />
</head>
<body>
<div class=“page”>
<h1>Ceci est une introduction au CSS</h1>
<p>Si le CSS contribue à l’organisation structurelle de votre site, c’est également lui qui aidera au style graphique, apporta la touche qui verra votre site se démarquer du lot.</p>
<h2>Comprendre le CSS</h2>
<p>La clef pour comprendre le CSS est d’imaginer qu’une boîte invisible entoure chaque élément HTML de votre page.</p>
</div>
</body>
</html>

– CSS –

body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;
}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;
}

Si vous définissez une valeur, elle sera héritée par la plupart des éléments contenus.
Si le font-family du body est défini par une valeur (comme “Arial, Verdana, sans-serif”), cette valeur affectera tous les titres, paragraphes, listes contenu dans le body (qui je vous le rappelle, contient tout le monde).
Cette valeur est dite “héritée” par tous les enfants. Votre feuille de style en est simplifiée.
Comparez avec les valeurs du background-color et du border de la déclaration .page.
Elles ne sont pas héritées par les enfants

<h1>, <h2> et <p> de la <div> qui les contient – le résultats aurait été “indigeste”.
Vous pouvez forcer l’héritage d’une propriété d’un élément parent en utilisant la valeur “inherit”, comme la <div> affectée par .page qui hérite de la valeur du padding donné à la règle CSS appliquée au <body>.

– HTML –

<!DOCTYPE html>
<html>
<head>
<title>Une introduction au CSS - Feuille CSS liée, dite externe</title>
<link href=“css/exemple.css” type=“text/css” rel=“stylesheet” />
</head<body>
<h1>Ceci est une introduction au CSS</h1>
<p id=“intro”>Si le CSS contribue à <i>l’organisation structurelle</i> de votre site, c’est également lui qui aidera au style graphique, apporta <b>la touche</b> qui verra votre site se démarquer du lot.</p>
<h2>Comprendre le CSS</h2>
<p>La clef pour comprendre le CSS est d’imaginer qu’une boîte invisible entoure chaque élément HTML de votre page.</p>
</body>
</html><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

– CSS –

* {
font-family: Arial, Verdana, sans-serif;
}
h1, h2 {
font-family: “Courier New”, monospace;
}
i {
color: green;
}
i {
color: red;
}
b {
color: pink;
}
p b {
color: blue !important;
}
p b {
color: violet;
}
p#intro {
font-size: 100%;
}
p {
font-size: 75%;
}

Si il y a deux ou plusieurs règles qui s’appliquent à un même élément, il est important de comprendre lequel aura la préférence.
Il ne s’agit en fait, pas de préférence, mais d’ordre logique.
– La dernière règle
Si deux sélecteurs sont identiques, la dernière règle déclarée (nous lisons de haut en bas la feuille de style) prendra le pas sur la première. (voir i)
– La spécificité de la règle
Si un sélecteur est plus spécifique qu’un autre, la règle énoncée le concernant prendra le pas sur celle qui apparaîtra alors plus générale.
(h1 est plus spécifique *, p b que p et p#intro que p)
– !important
Vous pouvez écrire !important après n’importe quelle valeur de propriété (avant ;) pour indiquer qu’elle doit être considérée plus importante que toutes les autres règles qui pourraient s’appliquer à un même élément.
Comprendre ceci, c’est comprendre l’écriture de règles génériques et comment reprendre la main sur les valeurs définies et ainsi créer des règles plus spécifiques appliquées aux éléments qui nécessitent une restitution différente.

Il y a différents types de sélecteurs de CSS qui permettent de cibler des éléments spécifiques dans un document HTML.

Sélecteur > Sens > Exemple
Universel > S’applique à tous les éléments du document > * {} – vise tous les éléments de la page
Type > Correspond aux éléments (noms) > h1, h2, h3 {} – visent tous les éléments <h1>, <h2> et <h3>
Class > Correspond à un élément dont l’ attribut de classe a une valeur qui correspond à celle spécifiée après le point > .note {} – vise tous les éléments dont l’attribut class à la valeur de note / p.note {} – vise tous les éléments <p> dont l’attribut de class a la valeur de note (.note)
ID > Correspond à un élément dont l’attribut id a une valeur qui correspond à celle spécifiée après le dièse > #introduction {} – vise l’élément dont l’attribut ID a la valeur de introduction (#introduction)
Enfant > Correspond à un élément qui est un enfant direct d’un autre > li>a {} – vise tous les éléments <a> qui sont des enfants d’un élément <li> (mais pas les autres éléments <a> de la page)
Descendant > Correspond à un élément qui est un descendant d’un autre spécifié élément ( pas seulement un enfant direct de cet élément ) > p a {} – vise tous les éléments <a> contenus dans un élément <p> (même si d’autres éléments sont imbriqués entre eux)
Fratrie Adjacente > Correspond à un élément qui est le frère suivant d’un autre > h1+p {} – vise le premier élément <p> qui suit un élément <h1> (et pas les autres éléments <p>)
Fratrie Générale > Correspond à un élément qui est un frères et sœurs d’un(e) autre , même s’il n’a pas besoin d’ être directement l’élément précédent > h1~p {} – vise tous les éléments <p> qui suivent un <h1>

Attention : Les sélecteurs sont sensibles à la casse utilisée (majuscule, minuscule, tiret, tiret-du-bas, …).

Les boîtes se composent d’un élement/contenu qu’elles contraignent/englobent.

• + un padding – marge interne à la boîte
• + un border – bordure/contour
• + un margin  – marge externe à la boîte

Box-sizing

« Les mises en pages ne sont pas toujours simples et s’avèrent souvent des casse-tête. Box-sizing vous fera gagner du temps et vous aidera à coder plus efficacement. »
[Je reprends ici la conclusion de cet article (indispensable)]

Flexbox

Cet article, favorable à l’utilisation de la flexbox.