Bases du CSS

Une démonstration de ce qui peut être réalisé visuellement grâce à la conception basée sur CSS !
Lien → bas de page et lien html5-css3 ...

CV d'Éric Bourgeois

Sources : Éric | Mathieu Nebra , Co-Fondateur d'OpenClassrooms & Frédéric Bardeau , Co-Fondateur de Simplon, vidéo

CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web (HTML ou XML). Ce langage est donc composé des fameuses « feuilles de style en cascade » également appelées fichiers CSS.


Sommaire

1) Mettre en place le CSS
2) Formater du texte
3) Ajouter de la couleur et un fond
4) Créer des bordures et des ombres
5) Créer des apparences dynamiques
6) Pratiquer !
7) Entraînement : mise en forme du CV

1- Mettre en place le CSS

Prérequis : avoir pratiqué le code HTML !

a) prise en charge des navigateurs

Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page.

Au début des années 2000, Internet Explorer était le navigateur le plus répandu, mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la version 6 (IE6).

Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9, 10, 11... et maintenant, Edge.

Exemples du Jardin Zen CSS : la beauté de la conception CSS

HTML sans CSS | le même document HTML avec CSS | consultez le code du fichier CSS ! nota

b) Où écrit-on le CSS ?

On peut écrire du code en langage CSS à trois endroits différents

  1. dans un fichier .css (méthode la plus recommandée) ;
  2. dans l'en-tête < head > du fichier HTML ;
  3. directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).

c) Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, recommandé dans un fichier .css de préférence à son imbrication dans le code html, intéressons-nous de plus près à ce code.
Observons un premier bout de code CSS :

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

  1. des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence.
    Par exemple, pour modifier l'apparence de tous les paragraphes, donc la balise < p >, on écrit p ;
     
  2. des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui indique la couleur du texte, font-size qui indique la taille du texte, etc. Les propriétés CSS sont nombreuses, cependant il n'est pas nécessaire de les connaître toutes par cœur ;
     
  3. les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color , il faut indiquer le nom de la couleur. Pour font-size , il faut indiquer quelle taille on veut, etc.

d) Appliquer un style : class et id

L'attribut class spéficifie un (ou plusieurs) nom(s) de classe à un élément HTML.

Dans le code HTML vous devez écrire le nom de la (class) qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.
Ce nom de class est utilisé entre les guillemet "" pour cibler l'élément HTML < h1 >, < p > ou < img > dans l'image ci-dessous :

« l'effet de style » s'applique ainsi dans la balise ciblée.

Quelle est la différence entre une classe et un identifiant ?

Lorsque vous définirez leurs propriétés :

Dans le fichier CSS, il faudra faire précéder le nom de la class par un point (.)
Si vous utilisez des id, il faudra faire précéder le nom de l'id par un dièse (#) :

e) Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui, à l'origine, ne sont pas entourés par des balises.
En effet, le problème de l'attribut class (ou id) c'est qu'il s'agit justement d'un attribut, or vous ne pouvez l'utiliser que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant :

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :

  1. < span> < /span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Les balises < strong > et < em > sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue » ;
  2. < div> < /div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises < p >, < h1 > , etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. < div > est une balise fréquemment utilisée dans la construction d'un design.

Utilisation de la balise span :

On encadre ici le mot « bienvenue » avec la balise span, on lui ajoute une classe du nom choisit [HTML],
(ci-dessous "salutations"), on crée le CSS (application de la couleur de police bleu dans l'exemple) et c'est gagné !

* : sélecteur universel

À l’inverse des balises < span > et < div > le caractère [*] sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

2- Formater du texte

Sommaire

a) Polices de texte les plus courantes :

Comparons avec « l'étalon »(métrologie)

sans-serif (sans pattes de liaison)

1: étalon, Arial

2: étalon, Courier New

3: étalon, Verdana

4: étalon, DejaVu Sans

serif (avec pattes de liaison)

1: étalon, Arial Black (ajout d'épaisseur)

2: étalon, Comic Sans MS

3: étalon, Georgia

4: étalon, Impact (encore ajout d'épaisseur pour comparer)

5: étalon, Times New Roman

6: étalon, Trebuchet MS

mes tests « Polices »

0123456789 = Calibri

0123456789 = DejaVu Sans

étalon, Calibri, police plus concentrée qu'Arial, c'est mon choix pour cette page html...

étalon, Arial

étalon, Arial Black, plus étendu qu'Arial mais pas "Black !"

b) Taille de la police de caractères propriété font-size

xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très grand ; xx-large : euh… gigantesque .

c) Police personnalisée avec @font-face

Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. @font-face force les navigateurs à télécharger la police de votre choix ; cela fonctionne bien avec la plupart des navigateurs.

Formats de fichiers de polices

Polices gratuites « Utopia »

Voici un test de la police téléchargée « Bilbo-Regular »,
le style au format « Script » est reproduit avec succès avec une taille font-size: large...

d) Soulignement et autres décorations propriété text-decoration

La propriété CSS associée porte bien son nom : text-decoration . Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :

e) L'alignement propriété text-align

Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et justifié.

C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré :

Regardez le texte « lorem Ipsum » justifié sur l'exemple ci-dessous :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. Integer semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facijlisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Justifié marges gauche et droite !

f) Les flottants : faire flotter une image

Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage ».

« La propriété magique est… float (« flottant » en anglais). Cette propriété peut prendre deux valeurs très simples :

la figure suivante vous montre ce que nous obtenons avec float: left;.

Image flottante Ceci est un texte justifié de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante. « Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. Integer semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus (balise "br": retour chariot).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel consequat justo. Suspendisse vel lobortis quam. In1teger semper diam ultrices mauris accumsan rhoncus. Nunc consequat ligula id ipsum congue, at maximus magna finibus. Nunc facilisis justo sit amet urna consectetur, vitae imperdiet felis imperdiet. Vestibulum imperdiet nisl nisl, nec dapibus.

3) Ajoutez de la couleur et un fond

Sommaire

a) Noms des 16 Couleurs web

La propriété qui permet de modifier la couleur du texte est : color.
Il existe les seize couleurs « standard » reproduitent avec leurs noms en anglais :

white___ _01_____ red_______05_____ yellow___09_____fuchsia__13_____
silver____02_____maroon___06_____ olive____10_____purple___13_____
gray_____03_____lime______07_____ blue_____11_____aqua_____15_____
black____04_____green_____08_____ navy_____12_____teal_____16_____

Couleur du texte

Par exemple le codage CSS : p {color:blue} applique la couleur bleu au texte du paragraphe.

b) Le code couleur hexadécimal

Le système hexadécimal (base 16) utilise ainsi 16 symboles : les chiffres arabes pour les dix premiers chiffres et les lettres A à F pour les six suivants.

Toute couleur qui s'affiche sur l'écran d'un ordinateur est basée sur trois couleurs de lumière : rouge, vert et bleu. À partir de ces trois lumières de base, il est possible de créer, en modifiant les proportions, un très grand nombre de couleurs (16,7 millions de couleurs).

Il ne s'agit pas ici des trois couleurs « primaires » (magenta, cyan, jaune) qui permettent d'obtenir toutes les couleurs à partir de pigments, on parle de « synthèse soustractive ».
Sur un ordinateur, on mélange de la lumière rouge, verte et bleue (RVB, ou RGB en anglais) : on parle alors de « synthèse additive »

Le langage HTML utilise l'écriture hexadécimale pour rendre les différentes couleurs.
Le choix de la base 16 est pratique, puisqu'il permet d'obtenir 256 valeurs en n'utilisant que 2 chiffres FF → 16 puissance 2 = 256 ... voir le convertisseur !

Fonctionnement du code couleur hexadécimal

Le code couleur est composé de 6 symboles, il est très facile à comprendre, car il repose sur un jeu de combinaisons chiffrées.
Chaque octet, (une paire de caractères dans le code Hex) représentant l'intensité de rouge, vert et bleu dans la couleur, respectivement.

# 00 00 00
Les deux premiers chiffres montrent le rouge, les deux suivants, le vert, et les deux derniers, le bleu.

Exemples :

c) La méthode RGB

RGB signifie en anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en « RGB ».

Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu avec une valeur de 0 à 255 pour chacune :

exemple : {color: rgb(90,32,48);} pour un joli rouge grenat

Récupérer n'importe quelle couleur

Quoi qu’il en soit, il est très simple de trouver le code de chaque couleur, certains logiciels de dessin, comme Photoshop, Gimp et Paint.NET, vous indiquent les couleurs en hexadécimal. Il vous est alors facile de copier-coller le code hexadécimal d'une couleur dans votre fichier CSS.

Vous pouvez aussi trouver des extensions de navigateur qui permettent de "récupérer" n'importe quelle couleur qui vous plaît sur un site web :

Création du 14 septembre 2010, fichier html chargé sur mon premier site web → couleurs on the web

Je propose des formations sur Gimp, c'est un logiciel gratuit et Open Source dans le domaine de la Gestion de la Photo destiné à la retouche et la création d'images numériques. Gimp convient à de multiples activités graphiques parmi lesquelles le dessin artistique, mais également la retouche de photographies et plus globalement tout ce qui a trait à la manipulation d’images. Le graphisme web et les animations font également partie des fonctionnalités proposées par le logiciel.

d) Couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.

Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise < body > laquelle correspond à l'ensemble de la page web ; c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.

Le CSS et l'héritage

En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style. C'est en fait simple à comprendre et intuitif. La balise < body >, vous le savez, contient entre autres les balises de paragraphe < p > et de titre < h1 > etc.

C'est d'ailleurs de là que vient le nom « CSS », qui signifie « Cascading Style Sheets », c'est-à-dire « Feuilles de style en cascade ». Les propriétés CSS sont héritées en cascade : si vous donnez un style à un élément, tous les sous-éléments auront le même style.

Le même principe vaut pour toutes les balises HTML et toutes les propriétés CSS ! Si vous dites :

… on pourrait penser qu'il y a un conflit. Le texte important fait partie d'un paragraphe, quelle taille lui donner ? 1.2 em ou 1.4 em ? Le CSS décide que c'est la déclaration la plus précise qui l'emporte : comme < strong > correspond à un élément plus précis que les paragraphes, le texte sera écrit en 1.4 em.

e) Images de fond

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png").

Par exemple :

Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS !
L'adresse de l'image doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html. Pour simplifier les choses, je vous conseille de placer l'image de fond dans le même dossier que le fichier .css (ou dans un sous-dossier).

Options disponibles pour l'image de fond

On peut compléter la propriété background-image par plusieurs autres propriétés qui permettent de changer le comportement de l'image de fond

background-attachment : fixer le fond

La propriété CSS background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant, car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :

background-repeat : répétition du fond

Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriétébackground-repeat :

background-position : position du fond

On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat; (un fond qui ne se répète pas).

Vous devez donner à background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :

… votre fond sera placé à 740 pixels de la gauche et à 48 pixels du haut. Il est aussi possible d'utiliser ces valeurs en anglais :

Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :

Ainsi, si je veux afficher une image de fond, en un unique exemplaire ( no-repeat ), toujours visible ( fixed ) et positionné en haut à droite ( top right ), je vais écrire ceci :

f) La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.

la propriété opacity

Propriété très simple, elle permet d'indiquer le niveau d'opacité (c'est à dire l'inverse de la transparence).

Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60 %… et on verra donc à travers !

Voici un exemple qui va nous permettre d'apprécier la transparence. Vous en trouverez le code CSS et le rendu HTML aux figures suivantes.

la notation RGBa

CSS3 nous propose une autre façon de jouer avec la transparence : la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre : le niveau de transparence (appelé « canal alpha »). De la même façon que précédemment, avec une valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent.

4) Créer des bordures et des ombres

Sommaire

5) Créer des apparences dynamiques

Sommaire

6) Pratiquer !

Sommaire

7) Entraînement : mise en forme du CV

Sommaire


haut de page

Technique de remplacement d'image

destinée à combiner les avantages de l'accessibilité avec la puissance de la conception graphique, issu du fichier directives du nouveau et csszengarden.com amélioré.
hack-new-image-replacement | traduction google

Pages les plus performantes

de www.eric-page.info, le jeudi 4 février 2021

  1. 97 clics (Web)
  2. Sociologie.html
  3. 16 clics (Web)
  4. 2-donnees-CQQCOQP.pdf
  5. 12 clics (Web)
  6. POIDS.html
  • Pages ayant reçu le plus de trafic

    Par rapport au mois précédent

    1. +4 clics (Web)
    2. adresses-centres-BOUDDHISTES.pdf
    3. +2 clics (Web)
    4. ajax.html
    5. +2 clics (Web)
    6. 2-donnees-CQQCOQP.pdf
    haut de page

    Éric Bourgeois