4 - Encore plus de modifications disponibles à l'aide du CSS

Cette activité est la suite directe de l'activité précédente. On continue avec la gestion du CSS.

1 - D'autres propriétés sur le texte éditables en CSS

Dans l'activité précédente, nous avons vu les propriétés suivantes :

• color pour modifier la couleur du texte
• background-color pour modifier la couleur du fond
• text-align pour gérer la position du bloc texte (left, right, justify, center)
• text-decoration pour le soulignement au sens large (none, underline, overline, line-through)
• font-size pour gérer la taille du texte
• font-style pour gérer les italiques (italic, normal)
• font-weight pour gérer l'épaisseur du texte (bold, normal)
• font-family pour choisir la police du texte

Mais il reste encore beaucoup de propriétés à découvrir 

Pour voir d’autres propriétés : CSS w3schools

Les exemples suivants ne seront pas testés lors d'exercices. A vous de voir si vous voulez les intégrer et les tester.

Parfois, on désire avoir un texte en majuscule ou en minuscule ou mettre la première lettre des mots en majuscule. Dans ce cas, il faut passer par le text-transform.

Quelques exemples avec Lorem ipsum dolor sit amet.

text-transform: uppercase; donne Lorem ipsum dolor sit amet.

text-transform: lowercase; qui donne Lorem ipsum dolor sit amet.

text-transform: capitalize; qui donne Lorem ipsum dolor sit amet.

Si vous voulez de petites majuscules à la place des minuscules, font-variant est fait pour vous :

font-variant: small-caps; qui donne Lorem ipsum dolor sit amet.

font-variant: normal; qui donne Lorem ipsum dolor sit amet.

La tabulation de la première ligne d’un texte se fait avec la propriété text-indent. Vous devez noter de combien de pixels vous voulez décaler la première ligne en pixels (px). Pour décaler la première ligne de 75 px :

text-indent: 75px;, Ca donne un résultat du type :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

L’espace (line-height) entre deux paragraphes dépend de la taille de la police utilisée. On donne un espacement fonction de celle-ci. Normal revient à la valeur par défaut de l’agent utilisateur (le navigateur) qui le fixe souvent à 1.2 en fonction du type de la police.

line-height: 0.2; qui donne sur plusieurs paragraphes :

line-height: 0.8; qui donne sur plusieurs paragraphes :

line-height: 2.5; qui donne sur plusieurs paragraphes :

II - Les bordures

Les bordures sont les éléments qui permettent d'entourer une balise.

Par exemple : 

border:1px dotted black; qui donne Lorem ipsum dolor sit amet.

Pour tout savoir sur les bordures, il suffit d'aller chercher l'information au bon endroit : CSS w3schools : Les bordures

Commençons par l'allure de la bordure : il s'agit de la propriété border-style.

Les formes non symétriques peuvent permettre de donner l'illusion d'un appui sur une touche ou autre. Vous pourrez voir sur les sites CSS qu'il existe également une valeur none permettant de rendre la bordure invisible comme avec hidden... Cela permet à un script d'agir de façon dynamique sur la forme d'un site.

On peut modifier le style directement avec border-style ou en le précisant dans la définition de border (voir ci-dessous).

En réalité, la valeur de border-style est la seule indispensable. Si vous ne précisez rien pour la couleur et l'épaisseur, le navigateur prendra la valeur par défaut. Je présente ci-dessous deux façons de présenter le style complet de la bordure : on change la couleur directement avec la propriété border-color et l'épaisseur avec la propriété border-width.

01° Rajoutez quelques bordures sur votre page.

Si vous n'avez plus de page enregistrée, la page d'exemple est disponible dans la partie fiche, ici :

Nous verrons qu'on peut rendre les éléments CSS interactifs : voilà un exemple qui vous montrer l'effet outset vers inset lorsqu'on passe au dessous de la bordure avec la souris.

Le même clavier mais avec cette fois une bordure solid fixe mais une couleur de fond variable :

Pour réaliser cela, il faut utiliser l'un des selectors du CSS, à savoir le hover qui permet de modifier le CSS d'un élément qu'on survole avec la souris.

Pour tout savoir sur les selectors, il suffit d'aller chercher l'information au bon endroit : CSS w3schools : Les selectors

02° Utiliser hover pour modifier l'un des aspects de votre page (bordure, couleur ou autre) lorsqu'on passe dessus. La documentation se trouve sur le site plus haut : il faut trouver hover dans le tableau, cliquer dessus et on arrive à des exemples d'utilisation plutôt explicites. Il faudra par contre créer une class attribuée à(aux) éléments que vous voulez modifier.

Le plus beau, c'est qu'on peut ne définir des styles de bordures que pour le haut (top), le bas (bottom), la gauche (left) ou la droite (right). Un exemple pratique visible en passant la souris sur les paragraphes : on va modifier la bordure invisible des paragraphes.

Voilà le code du menu ci-dessus, ce qui nous permettra de faire une sorte de correction de la question 02 :

Code HTML:

Code CSS:

Depuis le CSS3, on peut aussi faire des bordures arrondies avec la propriété border-radius : 5px; par exemple. Faites des tests si vous voulez ou allez sur le site w3 pour voir ce qu'on peut faire.

Nous n'irons pas plus loin avec les bordures mais n'oubliez pas qu'on peut trouver une documentation intéressante sur Internet.

On peut ainsi en CSS3 utiliser un motif dessiné pour créer une bordure ... Faites un tour dans la partie CSS et CSS3 du site précédent et vous aurez des exemples visuels de ce qu'on peut faire avec les propriétés CSS.

III - Gestion de l'espace externe autour d'un élément : margin

Vous avez dû remarquer que votre affichage de bordure ne donne pas exactement le résultat attendu par rapport à ce qui apparaît ici.

Testons le code suivant (on intègre le css dans le html pour aller plus vite) ;

Cela donne :

On voit donc qu'on affiche trois balises RGB sur un fond noir. Le fond noir disparaitra sous les trois autres balises.

Faisons la même chose avec une balise div incluant trois balises p 

On obtient 

C'est presque la même chose mais cette fois, on voit le fond noir : chaque balise p est séparée de la suivante par un espace fixe.

Pourquoi ?

A cause des propriétés par défaut du navigateur. Chaque navigateur a les siennes pour chaque balises sémantique mais typiquement, tous mettent une zone de "transition", écartement après une balise p. On appelle cela la propriété margin. Cette propriété définit donc l'espace à placer entre cette balise et celles qui l'entourent. On parlera ici de marge externe.

Si on veut que les balises p ne possèdent pas de margin, on applique margin: 0px;

03° Modifiez les styles des p précedents pour avoir des marges de 0px et 30px. Vous devriez avoir les résultats affichés ci-dessous.

Avec 0 px

Avec 30 px

On voit bien ici que le fond noir est visible car on laisse 30 pixels à gauche, à droite, en has et en bas entre les balises p. Pourquoi ne voit-on pas de noir avant la première et après la troisième ? Simplement parce que le noir est dû à la balise div. Or la balise div est ici la balise qui contient les trois autres et donc les trois autres se placent à l'intérieur de la div. Pour la première balise p, il n'y a donc pas de balise div présente avant elle dans l'espace disponible. Par contre, il y a bien 30 px entre le premier paragraphe et le paragraphe "Avec 30 px".

Si on force le trait avec 150 px, on voit bien les marges externes de 150 px même si elles n'apparaissent pas en fond noir.

Un tour sur le site habituel CSS w3schools : margin, permet de se rendre compte qu'on peut définir les marges externes :

• Au dessus de la balise avec la propriété margin-top
• A gauche de la balise avec la propriété margin-left
• A droite de la balise avec la propriété margin-right
• En dessous de la balise avec la propriété margin-bottom

04° Reprendre l'exemple ci-dessous où on reprend de simples div (au moins les marges sont de 0 par défaut) pour obtenir l'effet ci-dessous où seules les marges gauches valent 200 pixels.

Il faut parvenir (après rajout d'éléments dans le code) à afficher :

Et si on veut centrer ? Est-on obligé de calculer combien d'espace on place à gauche et à droite à la main ? Non. Il suffit d'utiliser la valeur auto. Par contre, le navigateur a besoin de la largeur totale de votre élément pour savoir comment le centrer. Il faudra donc lui transmettre à l'aide de la propriété width.

Si on applique le code suivant :

On obtient 

Si on applique le code suivant :

On obtient 

Dernière valeur possible pour les marges : inherit, ce qui veut dire qu'on utilise la valeur de la propriété définie dans la balise qui contient la balise concernée.

Un exemple pour être compréhensible : on va définir margin:auto dans la balise div qui contient les trois autres et on va donner la valeur inherit à l'une uniquement des balises colorées.

On voit donc que la balise du milieu profite bien du centrage de la balise conteneur.

Au fait, width peut également avoir comme valeur un pourcentage : width: 50%; est valide. Cela veut dire que la balise possède 50% de la largeur disponible, à savoir 50% du conteneur de votre balise.

05° Tenter d'afficher l'affichage suivante en utilisant des width de 100%, 66% et 33%.

Si on définit la div contenant les autres avec un width de 75%, on obtient :

Le tout est donc bien proportionnel : puisqu'on ne connait pas la taille de l'écran de l'utilisateur, les tailles en % sont très couramment utilisées.

Pour info, voilà le code qui a permis d'afficher l'effet ci-dessus :

Le paragraphe rouge a bien la même taille que le conteneur.

Le paragraphe vert n'a que 66% de la taille du conteneur.

Le paragraphe bleu n'a que 33% de la taille du conteneur.

IV - Gestion de l'espace interne autour d'un élément : padding

Nous allons voir comment "élargir" le fond de l'élément qui nous intéresse. En effet, margin permet d'écarter la balise concernée des autres. Nous allons voir maintenant la propriété padding qui va permettre de repousser l'espace de l'élément concerné.

Voilà un premier exemple :

On crée donc 3 div de largeur 150 pixels (width: 150px;). Mais la balise div vert possède une propriété padding de 150 pixels : padding: 150 px;.

On voit donc qu'autour du texte de la balise centrale, il y a bien un fond vert de 150 pixels à gauche par rapport au rectangle rouge ou bleu.

De la même façon, on retrouve 150 pixels de fond vert en plus à droite par rapport aux balises rouges et bleues.

Au dessus et en dessous du texte de la balise verte, on a également 150 pixels.

On voit donc que padding agit un peu comme une marge interne qu'on peut repousser pour que le fond de la balise occupe plus d'espace.

Voilà la même chose mais avec un padding de 50 pixels : padding: 50px;.

On voit bien ici que la largeur de la balise verte n'est pas de 150 pixels alors qu'on a définit width: 150px; ! La largeur finale est de 150 pixels pour le width plus 2*50 pixles à cause du padding à gauche et à droite.

Ne confondez pas les trois :

• width définit l'espace octroyé à la zone de texte.
• padding définit le nombre de pixels qu'on rajoute au fond autour de la zone de texte.
• margin définit le nombre de pixels qui sépare votre balise des autres balises.

On rajoute maintenant une propriété border pour bien faire la différence avec padding.

J'ai obtenue cette présentation avec le code suivant :

Si on doit le résumer sur un schéma :

Voilà, c'est aussi simple que cela. La question : une bordure (border) entoure-t-elle la marge externe (margin) ou la marge interne (padding) ? Pour le savoir, il faut tester.

Créons un paragraphe vert de padding 50 pixels et de margin haute(margin-top) et basse(margin-bottom) de 25 px. On entoure le bloc paragraphe avec une bordure orange.

On voit donc que la bordure entoure le paragraphe et sa marge interne (padding) mais pas sa marge externe (margin).

Pour finir, nous allons passer à un exercice pratique : nous allons tenter de recréer un menu de navigation (sans les liens pour l'instant, ce ne sera pas le plus difficile à faire).

Nous allons partir du code HTML suivant :

Et pour le CSS :

Cela donne quelque chose comme :

06° Modifiez les codes à l'aide de margin-left et margin-right pour obtenir quelque chose comme cela :

Remarque: Le deuxième bleu est codé par #91a0e1.

07° Jouez sur le padding pour obtenir un affichage du type :

08° Jouez sur le margin-top et margin-bottom pour obtenir :

09° Jouez sur le background-color lorsqu'on passe la souris au dessus de la case (utiliser :hover dans le CSS) :

10° Jouez sur le border-radius (mais pas que) :

Et voilà. Vous avez un beau menu de navigation. Il manque encore les liens, mais ce n'est pas le plus délicat à mettre en oeuvre. Nous verrons cela dans une autre activité.

Remarque: Le jaune à l'écran est codé par #FFF168. Vous pouvez en retrouver la valeur en utilisant les outils web de votre navigateur.

V - Gestion de la taille de l'élément lui-même: width et height

Nous avons déjà vu que width permet de gérer la largeur du bloc (block en anglais). On peut définir la largeur en pixel, en pourcentage ou en utilisant une valeur inherit.

Dernière précision : on peut choisir la hauteur d'un bloc en utilisant la propriété height.

11° Jouez sur le height pour obtenir un menu de navigation de 600 pixels de haut.

12° Dernière modification : on veut que le menu prenne 100% de la hauteur disponible et 20% de sa largeur.

Si vous avez le temps et que vous voulez voir comment créer des effets de boutons facilement : CSS w3schools

Si vous avez encore plus de temps, vous pouvez voir l'ensemble des selectors disponibles : CSS w3schools

Pour l'instant, nous n'avons vu que first-child, last-child et hover. Mais on peut aller jusqu'à sélectionner une balise en fonction de ces attributs...

Cela méritera une activité complète sur cette façon de faire gérer certaines choses par le CSS plutôt que par Javascript.