Chapitre 1

Introduction

CSS signifie Cascading Style Sheets, soit « feuilles de style en cascade ».
Il a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles HTML est utilisé pour « baliser » un contenu, c’est-à-dire pour le structurer et lui donner du sens.
Le HTML sert à indiquer aux navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre, ou que tel contenu est une image ou une vidéo.
Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme.

Ainsi avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu.

Sélecteurs, propriétés, valeurs

Un sélecteur, va servir à déterminer à quel(s) élément(s) HTML ou à quel type d’éléments on souhaite appliquer un style. Si l’on souhaite appliquer un style particulier à tous nos paragraphes, par exemple, on utilisera le sélecteur « p ».
Une propriété, va nous servir à modifier le style d’un élément en ciblant un critère bien particulier comme la taille d’un texte, sa police ou sa couleur par exemple.
Une valeur, va venir compléter une propriété et va en déterminer le comportement.
Pour la propriété servant à changer la couleur d’un texte par exemple, la valeur va être la nouvelle couleur à appliquer.

Où écrire le CSS ?

Nous avons 3 possibilités pour écrire le CSS. L’une d’elles est préférables aux deux autres et nous allons immédiatement savoir pourquoi.
Nous pouvons écrire le CSS :
A l’intérieur de l’élément head de notre document HTML ;
Dans la balise ouvrante de notre document HTML ;
Dans un fichier portant l’extension .css séparé
Pour des raisons de performances de votre code, de clarté et d’économie de temps, je vous recommande d’utiliser la dernière méthode dès que cela est possible.
Commençons avec la première façon : écrire son code CSS dans l’élément head de notre page HTML. Pour cela, il suffit d’insérer un élément style dans notre élément head et de placer nos déclarations CS à l’intérieur de cet élément style.

Deuxième méthode maintenant : écrire du CSS dans la balise ouvrante d’un élément HTML. Pour cela, nous allons devoir utiliser un attribut style et lui affecter en valeur nos propriétés CSS :

Troisième et dernière méthode enfin(la méthode recommandée) : écrire le code CSS dans un fichier séparé. Pour faire cela, nous allons déjà devoir ouvrir un nouveau fichier dans notre éditeur de texte et l'enregistrer au format “.css”.
Vous pouvez le nommer “style.css”

L’élément link est représenté sous forme de balise orpheline et doit être accompagnée de ses deux attributs "rel " et " href " l’attribut href , sert à faire le lien. Si notre fichier avait été placé dans un dossier parent.
L’attribut rel sert à préciser le style du fichier lié. ou dans le sous-dossier par rapport à notre fichier HTML.
Il aurait fallu refléter cela dans la valeur de notre attribut href. Finalement, nous n’avons plus qu’à écrire notre CSS dans le style.css.

Les commentaires en CSS

On a déjà vu que l'on pouvait commenter en HTML, cela est également possible en CSS.
Plus qu'une possibilité, c'est même une obligation.
En effet, les fichiers CSS deviennent rapidement très long (beaucoup plus que les fichiers HTML par exemple) donc si vous ne commentez pas efficacement vous risquerez d'être très vite perdu.
De plus, si vous distribuez votre code, je pense que la personne sera contente d'avoir quelques lignes de commentaires pour l'aider à trouver ce qu'elle cherche au milieu de 2000 lignes de code !
En CSS, on écrit les commentaires de cette manière :

Sélecteur simples et limitations

Retournons maintenant à nos sélecteur.
Jusqu'à présent, nous n’avons manipulé que les sélecteurs que l’on appelle < simple > , car il correspondent à des éléments HTML seuls et sans attributs (par exemple le sélecteur p).
Ce type de sélecteur doit être préféré tant que possible pour des raison d’optimisation et de performance du code.
En effet , il requiert moins de code et sont donc moin gourmands en énergie que les sélecteurs plus complexes.
Votre page mettra moin de temps a charger.
Le problème reste qu’on est quand même très limité avec des sélecteurs simple: comment faire pour appliquer un style différent à deux éléments de même type; deux paragraphes par exemple ?
Ce n’est tout simplement pas possible. Et c’est pour cela que l’on créé les attributs class et id.

Les attributs class et id

Class et Id sont deux attribut HTML qui ont été créé pour pouvoir appliquer différents styles à des élément de même type.
class permet également de faire l’inverse et d’appliquer le même style à différents élément choisis.
Premièrement on se place dans la balise ouvrante d’un élément HTML, on écrit le nom de notre attribut(class ou id), et on lui donne une valeur cohérente.
cette valeur ne doit contenir ni caractères spéciaux (accent et autre), ni espace.

Ensuite, on retourne sur notre fichier CSS. on va devoir commencer notre déclaration par un point là où on a utilisé un attribut class et par dièse si l’on a utiliser l’attribut id.
Après le point ou le dièse, on écrit la valeur de l'attribut en question pour former notre sélecteur. Enfin, on écrit le code CSS voulu.

Pourquoi avoir créé deux attributs pour faire la même chose ? En fait, il existe une différence notable entre class et id : un attribut id avec une valeur précise ne peut être utilisé qu’une fois dans une page, au contraire de class.

Les éléments div et span

Pour commencer, vous devez bien comprendre que les éléments div et span ne possèdent aucune valeur sémantique, ce qui va à l’encontre même du rôle du HTML.
Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre choix. Les éléments div et span vont nous servir de containers.
Nous allons nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers à ces blocs.
L’utilisation des éléments div et span est très simple : il suffit d’entourer le bloc de code voulu avec une paire de balises ouvrante et fermante div et span.

Généralement, on attribuera une class ou un id à div et span afin de pouvoir différencier nos différents div et span dans notre page.
Ainsi, on peut désormais appliquer un style particulier à n’importe quel bout de code dans notre page HTML.


Tout comme pour class et id, il existe une différence entre div et span : div est un élément de type block tandis que span est un élément de type inline.

Les éléments de type block et inline

En HTML, tout élément est soit de type block, soit de type inline. Les éléments de type block commencent sur une nouvelle ligne , occupent toute la largeur disponible Peuvent être imbriqués les uns dans les autres et contenir des éléments de type inline.
Les éléments de type inline s’insèrent dans une ligne , occupent seulement la largeur nécessaire et peuvent être imbriqués les uns dans les autres mais ne peuvent pas contenir d’éléments de type block.

Les sélecteurs avancés

Maintenant que nous avons fait un premier tour d’horizons des possibilités offertes par le CSS et que nous savons comment appliquer un style, à n’importe quel bloc de code HTML, nous pouvons aborder les sélecteurs avancés.
Les sélecteurs avancés sont l’une des plus grandes forces en CSS. En effet, grâce à eux, nous allons pouvoir cibler du contenu très précisément et assez simplement.
Il faut savoir qu’il existe de très nombreux sélecteurs avancés en CSS alors n’hésitez pas à vous renseigner davantage si cela vous intéresse !

La notion d’héritage en CSS

L’héritage est une notion centrale et fondamentale du CSS.
L’héritage signifie que tout élément HTML va hériter des styles de ses parents (c’est le fameux “cascading”).
En HTML, si un élément A est inclus dans un élément B ; l’élément A s’appellera l’enfant et l’élément B sera le parent de l’élément A.

Ici, l’élément body est le parent des éléments h1 et p, puisque les éléments h1 et p sont bien contenus dans l’élément body. Ainsi, lorsqu’on applique un style à l’élément body, (ici, mettre le texte en vert), les éléments p et h1 héritent automatiquement de ce style.
Cela laisse une question en suspens : que se passe t-il lorsque l’on donne deux ordres contradictoires à un élément parent et à son enfant en CSS (par exemple : donner une couleur rouge au parent et bleu à l’enfant)?
Le CSS possède ici sa logique et le style appliqué sera celui le plus proche de l’élément en question. Cela signifie que si on applique un style à un élément enfant, c’est bien ce style qui lui sera appliqué.

Cette notion d’héritage est assez simple à comprendre mais est très puissante et est à la base du CSS, retenez la donc bien !

Chapitre 2

Introduction

Nous allons maintenant étudier les propriétés de type “font-” qui signifie “police d’écriture” en français.nts HTML "div" et "span", que nous allons étudier tout de suite.

La propriété font-size

Nous utiliserons la fonction font-size lorsque nous voudrons modifier la taille d’un texte.
L’unité “em” est une unité relative à la taille de police de l’élément. 1em (appelée “cadratin” en typographie française) équivaut à 100% de cette taille (12pt ou 16px).
Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l’élément parent.
Cette propriété accepte 2 types de valeurs : des types de valeurs de type absolu (en pixel ou en point), ou relatif (en em, ou en pourcentage).
Les valeurs de types “relatives” sont appelées de la sorte car elles permettent au texte de s’adapter relativement aux préférences de vos visiteurs.
En clair, si vous fixez la taille d’un texte à 100% ce texte pourra avoir des tailles différentes selon les réglages faits par vos visiteurs sur leurs navigateurs.
Ce type de valeur présente des avantages indéniables, et notamment le fait que tous vos visiteurs devraient être capables de lire vos écrits sans difficultés. de plus, le texte, peut également s’adapter relativement aux autres éléments de votre page web.
Une valeur de type absolue, en revanche, va fixer la taille d’un texte définitivement, le grand avantage de ce type de valeur est que vous pouvez contrôler précisément donc le rendu de votre texte et de votre page web.
Voici un exemple d’utilisation de la propriété font-size, avec des valeurs relative et absolue.

La propriété font-style

La propriété font-style permet de fixer l’inclinaison d’un texte. La propriété font-style accepte 4 valeurs différentes :

-Normal (valeur par défaut)
-Italique (change le texte en italique)
-Oblique (penche le texte). A utiliser quand “italique” ne marche pas sur une police.
-Inherit (hérite des propriétés de l’élément parent).

Nous avons dit plus haut que tous les éléments enfant héritaient par défaut des styles de ses parents. A quoi sert dont la valeur inherit ?
En fait, cette dernière sert à annuler un style dans un cas bien particulier.
Imaginez par exemple que nous ayons définit un font-style : italic pour tous les paragraphes de notre page et un font style : normal à un div en particulier.
Par définition, les paragraphes à l’intérieur de ce div seront en italique, puisque la notion d’héritage nous dit d’appliquer la règle la plus proche de l’élément en question (et pour un élément de type on applique donc les règles portant sur p en premier).
Si l’on souhaite que les paragraphes héritent du même style que notre div, l’utilisation de la valeur inherit est alors une excellente solution.

La propriété font-weight

La propriété font-weight permet de fixer le poids d’un texte. Cette propriété accepte 6 valeurs différentes :

-Normal (la valeur par défaut);
-Lighter (version allégée de la police);
-Bold (la police est en gras);
-Une centaine compris entre 100 et 900 (du plus léger au plus gras);
-Inherit (hérite des styles de ses parents).

Je vous conseille vivement de n’utiliser que des valeurs numériques qui permettent un meilleur étalonnage et sont plus souples. Notez que 400 correspond à normal et 700 à bold.

La propriété line-height

Comme vous aurez pu le remarquer, cette propriété n’est pas une propriété de type “font-” à proprement parlé mais concerne également la mise en forme du texte, donc elle a tout à fait sa place dans cette partie.
La propriété line-height sert à fixer l’écartement, c’est à dire la distance entre 2 lignes de textes.
Une pratique communément admises est d’indiquer une valeur pour notre line-height équivalent à 1.5fois la taille en pixel de notre texte.

La propriété font-family

La propriété font-family va nous permettre de choisir la police de notre texte.
Dans tous les cas, nous déclarons plusieurs polices (on parle de “famille” de polices, d’où le nom de cette propriété) afin de s’assurer qu’au moins une des polices mentionnés soit supporté par vos visiteurs.
En effet, il existe toujours des versions de navigateurs et des ordinateurs ne supportant pas certaines polices, d’où tout l’intérêt d’en déclarer plusieurs.
La première police déclarées sera le choix par défaut. Si elle n’est pas lue par votre visiteur, alors on utilisera la seconde etc…

Les Web safe fonts

Cela nous amène donc tout naturellement à parler de ce que l’on appelle les web safe fonts.
Les Web Safe fonts correspondent à un ensemble de polices, un” pack “ qui est préinstallé sur toutes les machines permettant d’aller sur internet.
Ce sont donc des polices lu par tout le monde d'où le mot “Safe” qui veut dire en français “sur”, “hors de danger”.
En général, on mentionne au moins une police Web Safe comme dernière valeur de la propriété font-family.
Parmis les Web safe font, nous avons les polices Arial, Time New Roman, Courier New, Verdana, Georgia, Lucida, Tahoma, Trebuchet, Garamond entre autres.

La propriété color

Nous allons finalement apprendre à changer la couleur d’un texte en CSS avec la propriété color.
Nous ne voyons véritablement cette propriété que maintenant car vous allez voir qu’il existe plusieurs façons de gérer la couleur d’un texte, et certaines d’entre elles ne sont pas évidents à priori.

Première façon de changer de la couleur d’un texte, la plus simple mais également de loin la plus limitée : en attribuant un nom de couleur (en anglais) en valeur de la propriété color.
Cette méthode reste très limitée car nous ne pouvons choisir que parmi seize noms de couleurs qui sont les suivants :

-Les valeurs que vous voyez sous le nom de couleurs sont des valeurs qu’on appelle hexadécimales. Ce type de valeur va correspondre à notre deuxième méthode pour fixer la couleur d’un texte.
Cette valeur devra commencer par un dièse, suivie de 6 symboles choisis entre 0 et F.
Les deux premiers symboles vont définir l’intensité de rouge de notre couleur, les deux suivants l’intensité de vert et les deux derniers l’intensité du bleu.
Vous pouvez imaginer que cela se passe comme lorsque vous mélangez de la peinture afin d’obtenir une couleur précise.

-L’intérêt de ce type de valeur est de pouvoir choisir parmi plus de 16 millions de nuances différentes.
SI vous avez bien suivi, l’échelle d’intensité va de 00 à FF pour chaque binôme de valeurs, 00 étant l’intensité la plus faible et FF l’intensité la plus forte.
N’hésitez pas à vous entrainer en faisant différents essais pour voir comment se comporte la propriété color avec ce type de valeur et être bien certain de maîtriser tout cela !

-Enfin, le dernier type de valeurs que l’on peut utiliser est le type RGB (pour Red Green Blue). Nous allons voir que ce type de valeurs et les valeurs hexadécimales reposent sur la même base.
Cette fois-ci, nous allons devoir indiquer trois nombres compris entre 0 et 255 en valeur.
Le premier nombre correspond une nouvelle fois à l’intensité de rouge, le second à l’intensité de vert et le troisième à l’intensité de bleu que l’on veut utiliser pour former notre couleur finale.

Vous le voyez, il existe de nombreuses similitudes entre les notations en hexadécimal et en RGB.
On peut d’ailleurs tout à fait convertir l’hexadécimal en RGB, en partant du principe que 00 en hexa correspond à 000 en RGB et que FF en hexa correspond à 255 en RGB.

L'opacité d'un texte

Le CSS nous offre deux méthodes pour fixer le niveau d’opacité de nos textes.
Si nous avons utilisé une valeur de type nom de couleur ou hexadécimale avec la propriété color, nous devrons utiliser la propriété opacity pour fixer l’opacité de nos textes.
Cette propriété prend une valeur entre 0 (totalement transparent) et 1 (totalement opaque).
Attention : n’oubliez pas qu’on utilise des points et non pas des virgules pour les nombres à virgule étant donné qu’on utilise le système d’écriture anglosaxon lorsque l’on code.

Exemple : opacity : 0.5 ;

Si nous avons utilisé une valeur de type RGB avec la propriété color, nous pouvons également maîtriser l’opacité de notre texte d’une façon plus simple, en utilisant une valeur de type RGBa.
Dans ce cas, il suffit de rajouter une valeur pour l’opacité de notre texte après les trois valeurs de notre propriété RGB.

Exemple : color : rgba(175,51,175,0.2) ; pour un violet très transparent.

Chapitre 3

Introduction

Les propriétés de type “text-” servent également à fixer l’apparence de nos textes. Elles viennent donc compléter les propriétés de type “font-” vues au chapitre précédent.

Gérer l'alignement d'un texte

Pour modifier l’alignement d’un texte, nous allons utiliser la propriété text-align.Cette propriété peut prendre cinq valeurs différentes :

-Left : le texte sera aligné sur la gauche; valeur par défaut ;
-Center : le texte sera centré ;
-Right : le texte sera aligné sur la droite ;
-Justify : le texte sera justifié ;
-Inherit : hérité des propriété de l’élément parent ;

Il est bon de noter que le centrage ou l’alignement se fait toujours par rapport a l'élément parent le plus proche du texte.
Dans l’exemple suivant, on voit bien que le paragraphe 1 est centré par rapport à son élément parent (c’est-à-dire le div qui fait lui même 100px de large) et non pas de la page.
Le second paragraphe, n’ayant pour parent que l’élément body, est donc bien lui centré sur la page.

La propriété text-decoration

On va pouvoir modifier la décoration d’un texte grâce à la propriété text-decoration.on peut choisir parmi six valeurs pour cette propriété:

-underline : le texte sera souligné;
-overline : une ligne apparaîtra au dessus du texte;
-line-through : le texte sera barré ;
-Blink : le texte clignotera ( attention, ne fonctionne pas sur tous les navigateurs);
-Inherit;
-None: pas de décoration, comportement par défaut.

La propriété text-indent

La propriété text-indent sert à gérer l’indentation, pour ceux qui l’auraient oublié, est le décalage d’un texte sur la droite généralement.
Cette propriété accepte des valeurs de type absolu (px, pt) et relatif (em, ex,%).
Vous pouvez également attribuer des valeurs négatives afin de décaler votre texte sur la gauche.

La propriété text-transform

On utilisera la propriété text-transform pour modifier l’aspect des caractères d’un texte (majuscule ou minuscule).
Nous pouvons choisir parmi cinq valeurs :

-Uppercase : transforme tout le texte en majuscule ;
-Lowercase: met tout le texte en minuscules ;
-Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
-None : hérite des styles de l’élément parent ;

Les propriétés letter-spacing et word-spacing

Les propriétés letter-spacing et word-spacing permettent respectivement d’ajuster l’espace entre les lettres et entre les mots.
Ces propriétés se comportent de manière similaire et acceptent des valeurs absolues (px,pt) et relatives (ex,em,%).

Les ombres des textes

On peut ajouter des effets d’ombre à un texte en utilisant la propriété text-shadow.
Cette propriété nécessite au minimum deux valeurs pour fonctionner. Cependant, dans la grande majorité des cas, nous en utiliserons quatre, dans l’ordre vu ci-dessous.
Les trois premières valeurs correspondent à des longueurs et la dernière est la couleur de l’ombre :

-1ère valeur : déplacement horizontal de l’ombre ;
-2ème valeur : déplacement vertical de l’ombre ;
-3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
-4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété “color”).

Voyons ensemble comment cette propriété fonctionne :