Se connecter
S'inscrire

Série Coder avec CSS

Image à la une de la série Coder avec CSS sur le blog Activateur Web
Image de l'icône de CSS 3

Préambule de la série Coder avec CSS

Le CSS, et le codage de ses différentes propriétés, méritent bien une série sur Activateur Web. 

Cette série sera un soutien à la série “Transformez une maquette en site web avec HTML et CSS“, que vous pouvez retrouver sur ce blog. 

Comme toujours sur Activateur web, cette série est à suivre sur ma chaîne YouTube, et ici sur ce blog.

Vous pouvez donc suivre ces tutoriels en vidéos, ou lire ce tutoriel ci-dessous, pour plus de détails. 

Pour chaque chapitre, je vous mets la vidéo, et en dessous de celle-ci, vous retrouverez le tutoriel à lire contenant mes explications , le code et parfois, des illustrations.

Alors, je ne vous fais pas languir plus longtemps et vous fais découvrir les principales propriétés CSS.

Introduction et anatomie d'une règle CSS

Que signifie CSS ?

CSS signifie Cascading Style Sheets, ou en français, feuilles de style en cascade.
Tout comme le HTML, le CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer un style sur les différents éléments d’un document HTML.
Alors pourquoi feuille de style en cascade et pas feuille de style tout court ?
Les propriétés CSS sont héritées en cascade : si nous donnons un style à un élément, tous ces sous-éléments auront le même style. Nous parlons du principe de l’héritage en CSS. Mais je reviendrai sur ce principe, un tout petit peu plus tard. 

A quoi sert le CSS ?

Si vous vous demandez à quoi sert le CSS, sachez que comme le HTML, il est aujourd’hui un indispensable d’un site web.
Le CSS va vous permettre de gérer la mise en forme de votre site.
J’aime comparer le HTML et CSS, à la construction d’un bâtiment : le HTML sert à construire les fondations et la structure, et le CSS détermine la position, la taille, les couleurs, etc.
Le CSS vous permet de sélectionner la police d’écriture utilisée sur votre site, la taille du texte, les bordures, le fond, ainsi que toute la mise en page de votre site. Vous pourrez avec lui décider de placer tel élément à droite, au centre ou à gauche, en haut ou en bas, et que votre élément ait telle largeur, telle hauteur, qu’il soit toujours visible ou non, etc.
Bref, avec le CSS, vous allez donner une forme et un style à votre page.

Avantages

Le fait de coder avec CSS dispose de plusieurs avantages :

  • Nous pouvons ainsi séparer la présentation d’une page d’avec sa structure. Nous créons alors une feuille de style séparée du document HTML.
  • Une même page HTML peut alors être présentée selon plusieurs styles différents, et selon le support sur lequel elle est présentée (écran, impression)..
  • Le code HTML est très réduit et beaucoup moins complexe.
  • La mise en style peut être modifiée très rapidement. 

Comment est interprété le CSS ?

Je vous sens impatient de pouvoir écrire vos premières lignes de CSS, alors je vais vite passer sur l’histoire de CSS. Juste savoir tout de même que si HTML est né en 1991, CSS, lui, a vu le jour en 1996. Et si vous vous demandez comment nous faisions la mise en style avant sa naissance, et bien tout se faisait dans le HTML, avec des balises dédiées à cela.
Tout comme le HTML également, CSS évolue dans le temps. Aujourd’hui, nous écrivons avec le CSS version 3. Il existe une version 4 qui étend les modules de la version 3, avec des modules figés ou en phase de tests.

Compatibilité du navigateur web

Tout comme le HTML, le CSS est lu et interprété par le navigateur web. Et aujourd’hui, il existe un nombre assez important de navigateurs web. Attention toutefois car tous ne sont pas capables d’interpréter les propriétés CSS qui existent. Ce qui peut faire que d’un navigateur à l’autre, votre site sera affiché différemment. En effet, lorsqu’un navigateur web ne peut pas interpréter la propriété CSS qui lui est transmise, il ne va pas faire planter votre page. Il se contentera d’ignorer la propriété et de ne pas mettre en forme l’élément ciblé par cette propriété. Ce qui peut parfois être très ennuyeux pour l’utilisateur du site.

C’est pour cela que je vous rappellerai ici, comme lorsque nous avons créé le projet “Transformer une maquette en site web avec HTML et CSS”, la recommandation de mettre dans vos favoris le site caniuse.com qui propose des tables de compatibilité des fonctionnalités HTML et CSS sur les différents navigateurs et leurs différentes versions.

Utiliser le CSS

Anatomie d’une règle CSS

Pour utiliser le CSS, il faut commencer par en connaître l’anatomie afin de bien savoir de quoi on parle. Lorsqu’on écrit du CSS, on parle de règle CSS. Et une règle CSS est composée ainsi : 

Image représentant l'anatomie d'une règle CSS
Anatomie d'une règle CSS
  • Un sélecteur : c’est le nom de l’élément HTML que l’on cible pour lui appliquer un style.
  • On ouvre ensuite les parenthèses qui contiennent la ou les déclarations.
  • La déclaration est composée d’une propriété à laquelle on attribue une valeur.
  • La propriété : c’est la façon de mise en forme ou en style que l’on veut appliquer à l’élément. Chaque propriété possède plusieurs valeurs possibles.
  • La valeur : placée à droite de la propriété après les 2 points, c’est la mise en forme ou en style que l’on veut appliquer à la propriété donnée.

Mémoire

À retenir que :

  • Une règle CSS est toujours placée entre accolades à l’exception du sélecteur.
  • Chaque déclaration doit utiliser les 2 points pour séparer la propriété de sa valeur.
  • Une déclaration se termine toujours par un point-virgule.

Une règle CSS peut être composée de plusieurs déclarations.

Image de plusieurs déclarations dans une même règle
Plusieurs déclarations dans une même règle CSS

Plusieurs sélecteurs pour une même règle CSS

Nous pouvons également cibler plusieurs types d’éléments pour leur appliquer la même règle. Il nous suffit alors d’écrire les sélecteurs séparés par des virgules : 

				
					selecteur1, selecteur2, selecteur3 {
    propriete1: valeur1;
    propriéte2: valeur2;
}

Exemple : 

p, li, h1 {
    color: blue;
    font-size: 16px;
    font-weight: bold;
}

Ci-dessus, nous voyons que nous pouvons appliquer une même règle CSS à plusieurs sélecteurs. 

Nous mettons ainsi en place, un principe en programmation, qui est appelé DRY. 

DRY pour Don’t Repeat Yourself. En français, ne pas se répéter, et donc éviter d’écrire du code répétitif.

Dans l’exemple, si je veux appliquer au texte contenu dans les paragraphes, dans les éléments de liste et dans le titre H1, une couleur bleue, une taille de 16px et une graisse “épaisse”, plutôt que de répéter ce code pour chaque élément, alors je cible mes sélecteurs que je sépare par des virgules, afin de ne pas répéter le code et appliquer la même règle CSS à chacun de ces  éléments.

Comment déclarer le CSS et où l’écrire ?

C’est la question que l’on se pose lorsqu’on débute dans le développement. En effet, il existe 3 endroits différents où l’on peut écrire notre CSS :

  • Dans un fichier avec l’extension .css.
  • Dans l’en-tête du fichier HTML.
  • Directement dans les balises HTML via un attribut style.

Voyons ces 3 endroits et ces 3 méthodes, car chacune d’entre elles utilise une syntaxe différente.

Pour les besoins de ce tutoriel, je créais un dossier de projet, et pour le moment dans ce dossier, je créais un fichier que je nomme index.html : 

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Coder avec CSS</title>

</head>

<body>

    <header>
        <img decoding="async" src="https://activateurweb.com/wp-content/uploads/2022/04/Favicon-site-512x512px.png" alt="Logo Activateur Web" id="logo">
        <nav>
            <a href="retourindex.html">Accueil</a>
            <a href="index.html">Page-2</a>
            <a href="https://activateurweb.com" target="_blank">Activateur Web</a>
        </nav>
    </header>

    <h1>Mon site bientôt en ligne</h1>

    <p>Bonjour tout le monde et bienvenue sur mon site ! Ceci est le premier paragraphe</p>
    
    <p>Nous allons voir comment utiliser le CSS pour mettre en forme cette page.Ceci est le deuxième paragraphe</p>

    <p>
    Ceci est le troisième paragraphe.<br>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero, ipsa aspernatur dicta, excepturi earum, perspiciatis explicabo ipsam molestiae suscipit numquam voluptatum dignissimos ullam. Excepturi rerum saepe, sunt quod quasi molestias?
    Eveniet debitis a illo sequi recusandae laboriosam sint et nihil autem magnam earum ipsa consequatur perspiciatis, rerum porro repellendus aut, tenetur quia perferendis. Maxime, laboriosam ratione expedita commodi illum provident.
    Omnis qui ipsa tempore, ad magni rerum laborum minima! Error facere ipsum recusandae non accusamus. Rerum quasi architecto harum, quam quibusdam sint pariatur non maiores reiciendis rem voluptatum culpa nihil.
    Exercitationem odit facilis blanditiis, ex explicabo aliquam, provident magnam quis, animi labore voluptatum dolor distinctio ad corporis culpa repellat fuga libero assumenda. Ullam in modi debitis molestias at blanditiis animi.
    Quas dolore amet eos quae excepturi beatae a deleniti. Sed ut ducimus consequuntur ea ad laboriosam animi, suscipit veniam. Est illum assumenda aliquam recusandae ipsum pariatur vel non eaque. Porro!
    Repellendus reprehenderit omnis, possimus fugit laboriosam eligendi eaque cumque consequatur ipsa incidunt voluptatum provident illum, quisquam voluptas illo aspernatur perspiciatis obcaecati molestiae. Similique inventore sed laboriosam nam ipsum quos est.
    Vitae quas nesciunt, modi dolore sed sint expedita dolor recusandae sit eligendi ipsum. Libero earum possimus quis iure repellendus officiis enim sit obcaecati eaque consectetur unde perspiciatis, quod placeat magni!
    Adipisci provident dolore, placeat officiis ipsam ipsum assumenda animi quos voluptatibus. Possimus beatae tempora reiciendis repellat nam perspiciatis ab, neque corrupti suscipit soluta dolorem quasi vero nobis aut eum est.
    </p>

    <article>
        <h2>Mon second titre à l'intérieur de ma balise article</h2>
        <p>
            Le paragraphe à l'intérieur de ma balise article.<br>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda tenetur rerum ab labore magnam? Quasi fugit hic quaerat pariatur ut quo facilis. Veritatis quisquam nam modi obcaecati tempore fugit porro!
            Saepe veniam libero recusandae quod ullam officiis quisquam aliquid nobis sunt, cum debitis id fugit laborum autem quis quibusdam incidunt illum voluptas rem assumenda perspiciatis mollitia eaque voluptatibus omnis! Quod!
            Pariatur esse fuga optio asperiores impedit exercitationem quo minus molestiae eum ut veniam beatae quae a eligendi consequuntur reiciendis numquam nihil dolore quos molestias, nobis recusandae accusamus! Eum, quia omnis?
            Et dignissimos cum culpa vero tempore, repudiandae itaque voluptate, asperiores excepturi debitis nulla praesentium quisquam amet quod. Consequatur, temporibus, veniam ea sint dolore minus, repellat aperiam non eligendi iusto nemo.
            Ut, distinctio architecto porro animi sapiente suscipit minima amet excepturi fuga? Veniam provident in fugiat tenetur vero at corporis quod vitae. Quidem, sint ex. Ea provident rem minus ad commodi.
        </p>
    </article>

    <div>
        <p>
            <img decoding="async" src="https://doodleipsum.com/200/outline?i=a28bcf0176524d4f74e60f83ece7b5d7" alt="Sightseeing by Ivan Mesaroš" class="imgfloat" />
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet sint non debitis expedita deleniti labore itaque quam magni voluptates doloremque, mollitia similique libero voluptatum sed delectus quisquam aspernatur laboriosam commodi.
            Enim quos maxime quas alias quaerat id placeat praesentium ratione assumenda minus, exercitationem, doloremque molestiae iusto consectetur aut dolorem, quis iure esse a omnis corrupti quo. Cum laudantium explicabo vero.
            Blanditiis sit ipsa molestias facilis omnis, ratione voluptas quo iste odio nemo suscipit cum distinctio labore, quod quis! 
                Officiis mollitia dolore eos ad laboriosam eligendi asperiores. Saepe perferendis ducimus omnis!
                Quibusdam sint aliquam pariatur dolorem ex quas? Dolorum, animi tempore. Deleniti harum sed error aliquid fugiat suscipit minus eveniet accusamus eos velit. Illo esse nesciunt voluptas ab dolores deserunt officiis.
                Error modi cumque quisquam fuga atque vel officiis totam eaque, voluptatum rerum, non consequuntur quas inventore nulla facere culpa aliquam magnam sapiente placeat accusamus voluptatem, similique reiciendis doloremque? Officiis, excepturi!
        </p>
    </div>

</body>
</html>

Voici comment est interprété ce fichier index.html par mon navigateur pour le moment : 

Image de la page index.html sans CSS
Interprétation par le navigateur du fichier index.html

Comme vous pouvez le voir, l’affichage d’une page HTML sans application du CSS, est plutôt “brut” ! 

ATTENTION : Dans les exemples suivants, le code ne sera pas toujours réécrit en entier. Mais les extraits de code sont bien issus du code ci-dessus. 

Méthode 1 : écrire le CSS dans le "Head" du fichier HTML

Pour utiliser cette méthode, nous devrons écrire nos règles CSS dans une balise <style></style> à l’intérieur de la balise <head></head> de notre fichier HTML. 

Par exemple, nous pouvons donner une couleur de texte verte à notre titre principal (sélecteur h1), et une couleur de texte bleue à nos paragraphes (sélecteur p), en écrivant ceci : 

				
					<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Coder avec CSS</title>

        <style>
            h1 {
                color: green;
            }
            p {
                color: blue;
            }
        </style>

    </head>

    <body>
        
        code HTML précédent....
    </body>
</html>

Ce qui donnera ceci pour l’affichage de notre page dans le navigateur : 

  • Le texte de notre titre h1 est bien vert.
  • Le texte de nos paragraphes est en bleu.
Image de la page index.html avec CSS dans balises head
La page index.html après écriture du code CSS dans une balise style, située entre les balises head.

Méthode 2 : écrire le CSS directement dans les balises HTML

Une autre méthode, pour appliquer le CSS à nos éléments, est d’écrire ce code directement dans les balises HTML, en ajoutant un attribut style à ces balises. Ainsi, si je veux le même résultat que l’exemple précédent, je devrai alors coder ainsi : 

				
					<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
        <title>Coder avec CSS</title>
    </head>

    <body>

        <header>
            <img decoding="async" src="https://activateurweb.com/wp-content/uploads/2022/04/Favicon-site-512x512px.png" alt="Logo Activateur Web" id="logo">
            <nav>
                <a href="retourindex.html">Accueil</a>
                <a href="index.html">Page-2</a>
                <a href="https://activateurweb.com" target="_blank">Activateur Web</a>
            </nav>
        </header>

        <h1 style="color:green;">Mon site bientôt en ligne</h1>

        <p style="color: blue">Bonjour tout le monde et bienvenue sur mon site ! Ceci est le premier paragraphe</p>
        
        <p style="color: blue">Nous allons voir comment utiliser le CSS pour mettre en forme cette page.Ceci est le deuxième paragraphe</p>

        <p style="color: blue">
        Ceci est le troisième paragraphe.<br>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero, ipsa aspernatur dicta, excepturi earum, perspiciatis explicabo ipsam molestiae suscipit numquam voluptatum dignissimos ullam. Excepturi rerum saepe, sunt quod quasi molestias?
        Eveniet debitis a illo sequi recusandae laboriosam sint et nihil autem magnam earum ipsa consequatur perspiciatis, rerum porro repellendus aut, tenetur quia perferendis. Maxime, laboriosam ratione expedita commodi illum provident.
        Omnis qui ipsa tempore, ad magni rerum laborum minima! Error facere ipsum recusandae non accusamus. Rerum quasi architecto harum, quam quibusdam sint pariatur non maiores reiciendis rem voluptatum culpa nihil.
        Exercitationem odit facilis blanditiis, ex explicabo aliquam, provident magnam quis, animi labore voluptatum dolor distinctio ad corporis culpa repellat fuga libero assumenda. Ullam in modi debitis molestias at blanditiis animi.
        Quas dolore amet eos quae excepturi beatae a deleniti. Sed ut ducimus consequuntur ea ad laboriosam animi, suscipit veniam. Est illum assumenda aliquam recusandae ipsum pariatur vel non eaque. Porro!
        Repellendus reprehenderit omnis, possimus fugit laboriosam eligendi eaque cumque consequatur ipsa incidunt voluptatum provident illum, quisquam voluptas illo aspernatur perspiciatis obcaecati molestiae. Similique inventore sed laboriosam nam ipsum quos est.
        Vitae quas nesciunt, modi dolore sed sint expedita dolor recusandae sit eligendi ipsum. Libero earum possimus quis iure repellendus officiis enim sit obcaecati eaque consectetur unde perspiciatis, quod placeat magni!
        Adipisci provident dolore, placeat officiis ipsam ipsum assumenda animi quos voluptatibus. Possimus beatae tempora reiciendis repellat nam perspiciatis ab, neque corrupti suscipit soluta dolorem quasi vero nobis aut eum est.
        </p>

        <article>
            <h2>Mon second titre à l'intérieur de ma balise article</h2>
            <p style="color: blue">
                Le paragraphe à l'intérieur de ma balise article.<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda tenetur rerum ab labore magnam? Quasi fugit hic quaerat pariatur ut quo facilis. Veritatis quisquam nam modi obcaecati tempore fugit porro!
                Saepe veniam libero recusandae quod ullam officiis quisquam aliquid nobis sunt, cum debitis id fugit laborum autem quis quibusdam incidunt illum voluptas rem assumenda perspiciatis mollitia eaque voluptatibus omnis! Quod!
                Pariatur esse fuga optio asperiores impedit exercitationem quo minus molestiae eum ut veniam beatae quae a eligendi consequuntur reiciendis numquam nihil dolore quos molestias, nobis recusandae accusamus! Eum, quia omnis?
                Et dignissimos cum culpa vero tempore, repudiandae itaque voluptate, asperiores excepturi debitis nulla praesentium quisquam amet quod. Consequatur, temporibus, veniam ea sint dolore minus, repellat aperiam non eligendi iusto nemo.
                Ut, distinctio architecto porro animi sapiente suscipit minima amet excepturi fuga? Veniam provident in fugiat tenetur vero at corporis quod vitae. Quidem, sint ex. Ea provident rem minus ad commodi.
            </p>
        </article>

        <div>
            <p style="color: blue">
                <img decoding="async" src="https://doodleipsum.com/200/outline?i=a28bcf0176524d4f74e60f83ece7b5d7" alt="Sightseeing by Ivan Mesaroš" class="imgfloat" />
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet sint non debitis expedita deleniti labore itaque quam magni voluptates doloremque, mollitia similique libero voluptatum sed delectus quisquam aspernatur laboriosam commodi.
                Enim quos maxime quas alias quaerat id placeat praesentium ratione assumenda minus, exercitationem, doloremque molestiae iusto consectetur aut dolorem, quis iure esse a omnis corrupti quo. Cum laudantium explicabo vero.
                Blanditiis sit ipsa molestias facilis omnis, ratione voluptas quo iste odio nemo suscipit cum distinctio labore, quod quis! 
                    Officiis mollitia dolore eos ad laboriosam eligendi asperiores. Saepe perferendis ducimus omnis!
                    Quibusdam sint aliquam pariatur dolorem ex quas? Dolorum, animi tempore. Deleniti harum sed error aliquid fugiat suscipit minus eveniet accusamus eos velit. Illo esse nesciunt voluptas ab dolores deserunt officiis.
                    Error modi cumque quisquam fuga atque vel officiis totam eaque, voluptatum rerum, non consequuntur quas inventore nulla facere culpa aliquam magnam sapiente placeat accusamus voluptatem, similique reiciendis doloremque? Officiis, excepturi!
            </p>
        </div>

    </body>
</html>

Ce code produira le même affichage que lorsque nous avons codé dans le head du fichier html. 

Cependant, vous l’aurez sûrement remarqué, si vous codez en même temps, et c’est vraiment ce que je vous conseille, nous devons répéter le code par exemple pour chacune des balises de paragraphes (<p>).

Cela ne respecte pas vraiment le principe DRY, vu auparavant, n’est ce pas ?

Méthode 3 : écrire le CSS dans un fichier séparé avec l'extension .css

Cette méthode est de loin, la plus pratique et la plus souple. Cela évite de tout mélanger le code dans un seul fichier, et permet de produire du code maintenable facilement.

Pour utiliser cette méthode, il faut bien sûr déclarer un fichier avec l’extension .css, et le lier à notre fichier HTML avec une balise link placée dans le head. 

Dans le projet de notre site web, nous aurons donc 2 fichiers au minimum : un fichier avec l’extension .html et un autre avec l’extension .css. 

Nous allons donc créer un fichier que nous nommons style.css : ce nom est souvent donné aux feuilles de styles, mais sachez que vous pouvez donner le nom que vous voulez à ce fichier. L’important est qu’il se termine par .css, et que vous déclariez ce même nom dans la balise link de votre fichier html.

Pour reproduire le même affichage que dans les exemples précédents, je vais donc écrire dans ce nouveau fichier comme ceci : 

Fichier style.css

				
					h1 {
    color: green;
}

p {
    color: blue;
}

Pour le moment, rien ne se passe du côté de l’affichage. Cela est normal car nous devons lier le fichier style.css à notre fichier index.html. 

Pour faire cela, nous déclarons une balise <link> dans le <head> du fichier html comme ceci : 

Fichier index.html

				
					<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
        <link rel="stylesheet" href="style.css">
        <title>Coder avec CSS</title>
    </head>

    <body>
        code HTML précédent...
    </body>
</html>

Après avoir lié notre fichier CSS à notre fichier html, alors les règles CSS s’appliquent comme dans les exemples précédents. Notre texte est maintenant en vert pour le titre H1, et en bleu pour les paragraphes.

ATTENTION ! Si vous avez nommé votre fichier CSS, autrement que style.css, il faudra alors bien entendu, l’indiquer dans le href de la balise link (ligne 7 ci-dessus.). 

Pour l’exemple, j’ai pour ma part, nommer mon fichier CSS : activateur.css 

J’écrirai donc ma balise link ainsi : 

				
					<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
        <link rel="stylesheet" href="activateur.css">
        <title>Coder avec CSS</title>
    </head>

    <body>
        code HTML précédent...
    </body>
</html>

Quelle méthode choisir ?

Image de code css écrit dans la balise head d'un fichier html
Code CSS mis en place dans le "head" du fichier index.html
Image de code CSS écrit directement dans les balises d'un fichier html
Code CSS écrit directement dans les balises html avec un attribut style
Image de code CSS écrit dans un fichier séparé ayant l'extension .css
Code CSS écrit dans un fichier séparé ayant l'extension .css

La méthode à privilégier et à utiliser est sans aucun doute la dernière méthode que nous avons appliquée. C’est d’ailleurs celle qui est utilisée par tous les développeurs confirmés.

Pourquoi ?

Alors peut-être que certains d’entre vous se demandent pourquoi nous devrions utiliser 2 fichiers, là où tout peut se faire sur un seul et même endroit ? Ou pourquoi se compliquer la vie avec la déclaration de classe ou d’ID, alors qu’il suffit de déclarer le style dans les balises HTML ?

La question qui revient souvent : pourquoi faire simple quand on peut faire compliquer ?

Bien entendu, je plaisante ! Je vous explique pourquoi cette méthode est bien mieux que les autres :

Mes explications

Pour le moment, nous avons fait nos tests sur une simple page HTML contenant que peu de contenu, mais il est évident que votre site web sera à l’avenir constitué de plusieurs pages HTML.
Alors imaginons que nous avons placé notre code CSS dans le head de notre fichier HTML.
Il faudra alors recopier ce code sur toutes nos pages HTML. Et si demain, je décide que mes titres ne seront plus écrits en bleu, mais en rouge par exemple, alors il me faudra modifier chaque fichier HTML un par un. Pas très pratique n’est ce pas ?

Le principe DRY

D’autant plus que si vous vous rappelez, il existe un principe de programmation que nous appelons DRY pour Don’t Repeat Yourself . 

Alors maintenant, imaginons que nous mis notre style dans chaque balise HTML comme le décrit la 2ème méthode ? Nous voyons tout de suite le nombre de codes que nous allons devoir répéter à chacune de nos pages de notre site.

Alors qu’avec notre dernière méthode, le code CSS sera écrit une seule fois pour tout notre site. Et si nous devons modifier les couleurs ou tout autre chose, nous le ferons à un seul et unique endroit. Plutôt pratique non.

Illustrations

Ces illustrations résument bien les choses : 

Image de la duplication du code CSS lorsqu'il est écrit dans le html
Duplication du code CSS lorsqu'il est écrit dans les fichiers html.
Image du code CSS lorsqu'il est écrit dans un fichier séparé
Code CSS écrit dans un fichier séparé. Les modifications se feront sur ce seul fichier .css

Nous avons vu que d’écrire notre CSS dans un fichier séparé est la meilleure méthode à appliquer. C’est donc celle-ci que nous utiliserons tout au long de ce tutoriel, et dans nos futurs projets, ça va de soi. 

Les différents types de sélecteurs et les balises universelles

Dans ce chapitre, revenons sur les sélecteurs CSS pour découvrir leurs différents types. Parlons de l’héritage en CSS et finissons par revoir les balises universelles en html. 

Les différents types de sélecteurs :

Sélecteur de type CSS (ou de balises)

Les exemples que nous avons vus jusqu’à maintenant utilisent un sélecteur de type CSS.
C’est-à-dire qu’ils ciblent une balise HTML : p, li, h1, etc. 

Exemple : Je donne une couleur verte au texte du titre et une couleur bleue au texte de tous les paragraphes : 

				
					h1 {
    color: green;
}

p {
    color: blue;
}

Sélecteur universel CSS

Le sélecteur universel que l’on nomme parfois caractère générique sélectionne toutes les balises sans exception. On le représente par le caractère astérisque *. Il fait partie de la famille des sélecteurs avancés.

Exemple : Je donne une marge extérieure, et une marge intérieure de 10 pixels, à tous les éléments de ma page.

				
					* {
    margin: 10px;
    padding: 10px;
}

Sélecteur d’ID

Le sélecteur d’ID ciblera l’élément qui possède l’ID fourni. Pour rappel, un élément qui possède un ID ne peut être qu’unique sur une page.
Un sélecteur d’ID se déclare avec un # suivi du nom de l’ID.

Exemple :  Je commence par attribuer un ID à mon élément html. Comme rappelé, un id est unique sur une page. Ceci est le cas pour mon logo. je vais donc ajouter l’attribut id à mon image de logo, et lui donner un nom. Comme je suis inspiré, je vais nommé cet id : logo !  Dans la balise html, je code donc ceci : 

				
					<!-- fichier index.html -->
<header>
    <img decoding="async" src="https://activateurweb.com/wp-content/uploads/2022/04/Favicon-site-512x512px.png"
    alt="Logo Activateur Web" id="logo">
    <nav>
        <a href="retourindex.html">Accueil</a>
        <a href="index.html">Page-2</a>
        <a href="https://activateurweb.com" target="_blank">Activateur Web</a>
    </nav>
</header>

Dans mon fichier CSS, je vais donc maintenant cibler mon élément qui a l’id se nommant logo.

Nous l’avons dit, un sélecteur d’id commence par un # suivi du nom de l’id. J’écris alors :

				
					/* fichier activateur.css */

#logo {
    width: 100px; /*largeur */
    height: 100px; /* hauteur */
}

Ne vous préoccupez pas des déclarations CSS pour le moment. Nous verrons toutes ses propriétés en détails par la suite. 
Dans l’exemple ci-dessus, j’ai donc donné une largeur et une hauteur à mon élément qui a l’id nommé logo.
Automatiquement, ma page s’affiche avec le logo de 100px de largeur et de hauteur. Cela parce que j’ai choisi l’enregistrement automatique sur Visual Studio Code. Si vous ne l’avez pas sélectionné chez vous ou que vous utilisez un autre éditeur de code, il faut alors enregistrer les fichiers et actualiser la page de votre navigateur.

Image de l'affichage de la page html avec règle css ciblant l'id logo
Affichage de la page html avec règle css ciblant l'élément qui a pour attribut l'id nommé "logo"

Sélecteur de classe

Le sélecteur de classe ciblera tous les éléments qui auront la classe spécifiée.

Pour rappel, plusieurs éléments, même de différents types, peuvent avoir la même classe sur une page.

Un sélecteur de classe se déclare avec un . suivi du nom donné à la classe. 

Exemple : Je donne une couleur bleue au texte de tous mes paragraphes, et si je veux que la couleur du texte de mon 3ème paragraphe soit verte, alors j’ajoute un attribut “class” à ma balise <p> et lui donne un nom, comme ceci : 

				
					<!-- fichier index.html -->
<p class="tests">
    Ceci est le troisième paragraphe.<br>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero, ipsa aspernatur dicta, excepturi earum, perspiciatis explicabo ipsam molestiae suscipit numquam voluptatum dignissimos ullam. Excepturi rerum saepe, sunt quod quasi molestias?
    Eveniet debitis a illo sequi recusandae laboriosam sint et nihil autem magnam earum ipsa consequatur perspiciatis, rerum porro repellendus aut, tenetur quia perferendis. Maxime, laboriosam ratione expedita commodi illum provident.
    Omnis qui ipsa tempore, ad magni rerum laborum minima! Error facere ipsum recusandae non accusamus. Rerum quasi architecto harum, quam quibusdam sint pariatur non maiores reiciendis rem voluptatum culpa nihil.
    Exercitationem odit facilis blanditiis, ex explicabo aliquam, provident magnam quis, animi labore voluptatum dolor distinctio ad corporis culpa repellat fuga libero assumenda. Ullam in modi debitis molestias at blanditiis animi.
    Quas dolore amet eos quae excepturi beatae a deleniti. Sed ut ducimus consequuntur ea ad laboriosam animi, suscipit veniam. Est illum assumenda aliquam recusandae ipsum pariatur vel non eaque. Porro!
    Repellendus reprehenderit omnis, possimus fugit laboriosam eligendi eaque cumque consequatur ipsa incidunt voluptatum provident illum, quisquam voluptas illo aspernatur perspiciatis obcaecati molestiae. Similique inventore sed laboriosam nam ipsum quos est.
    Vitae quas nesciunt, modi dolore sed sint expedita dolor recusandae sit eligendi ipsum. Libero earum possimus quis iure repellendus officiis enim sit obcaecati eaque consectetur unde perspiciatis, quod placeat magni!
    Adipisci provident dolore, placeat officiis ipsam ipsum assumenda animi quos voluptatibus. Possimus beatae tempora reiciendis repellat nam perspiciatis ab, neque corrupti suscipit soluta dolorem quasi vero nobis aut eum est.
</p>

Maintenant pour appliquer la couleur verte seulement à ce troisième paragraphe, il me suffit de cibler son attribut “class”.

Pour cibler un attribut de class, je déclare ma règle CSS en commençant par un . suivi du nom de la classe( ici “tests”). 

Je coderai donc ainsi mon CSS :

				
					/* fichier activateur.css */

/*: Sélecteur CSS */
p {
    color: blue;
}


/*: sélecteur d'ID ciblant la balise ayant l'ID logo */
#logo {
    width: 100px; /* largeur*/
    height: 100px; /* hauteur */
}

/*: Sélécteur de class ciblant la balise qui a la class tests */
.tests {
    color: green
}

Le code ci-dessus produira cet affichage dans le navigateur : 

Image de l'affichage du fichier index.html après ciblage du sélecteur de class
Affichage de la page index.html après la règle CSS ciblant l'élément ayant la class nommée "tests"

Nous le voyons ci-dessus, le texte de nos paragraphes est en bleu car ciblé par le sélecteur CSS “p”, et nous pouvons donné une couleur verte au 3ème paragraphe après lui avoir donné un attribut de classe que nous avons nommé “tests”. Nous ciblons ensuite cet attribut de classe en CSS par le sélecteur de classe “.tests”. 

Et, nous l’avons dit, un attribut de classe peut être attribuer à plusieurs éléments. Si je veux que mon 1er paragraphe soit en vert également, il me suffit alors dans la balise html de ce paragraphe (<p>) d’ajouter l’attribut de classe : class=”tests”. 

Sélecteur d’attribut

Le sélecteur d’attribut ciblera l’élément possédant l’attribut donné. 

Il se déclare avec la balise suivie de 2 crochets enfermant l’attribut.

Exemple : Dans le “header” de mon fichier index.html, j’ai mis 3 balises <a> qui sont des liens. Si je veux cibler et mettre en style uniquement mon premier lien, je peux alors avec un sélecteur d’attribut, cibler le href  qui commence par “retour”. Son nom complet étant “retourindex.html”.

Pour cibler mon attribut, je déclare donc sa balise (a) suivie, de l’attribut placé entre crochet ( [href] ). Pour indiquer que je veux qu’il commence par, je déclare le ^, et enfin pour dire qu’il doit commencer par retour, je code =”retour”. 

J’écrirais donc ainsi mon code CSS : 

				
					

/*: Sélecteur CSS */
p {
    color: blue;
}


/*: sélecteur d'ID ciblant la balise ayant l'ID logo */
#logo {
    width: 100px; /* largeur*/
    height: 100px; /* hauteur */
}

/*: Sélécteur de class ciblant la balise qui a la class tests */
.tests {
    color: green
}

/*: Sélecteur d'attribut dont href commence par retour */

a[href^="retour"] {
    background-color: gold;
    color: red;
}

Ci-dessus, j’ai indiqué que je voulais que les liens (les balises a) qui ont pour attribut un href commençant par “retour”, auront un fond de couleur or, et un texte de couleur rouge. Mon code produit alors cet affichage sur le navigateur.

N’hésitez pas à modifier le href de vos autres liens, et de les faire commencer par le mot “retour”, et vous verrez alors que la règle s’applique automatiquement. 

Image de l'affichage de la page index.html après avoir cibler le sélecteur d'attribut href du premier lien
Affichage de la page index.html après avoir cibler le sélecteur d'attribut href du premier lien

De nombreux autres sélecteurs

Il existe de nombreux autres sélecteurs, et nous ne pouvons pas les voir tous dans ce tutoriel. Je vous propose si vous le souhaitez de les retrouver soit sur :

Le CSS et l’héritage

Chose promise, chose due. Je vous ai dit que je reviendrai sur ce principe qu’est l’héritage en CSS. Comme nous l’avons vu plus tôt, si nous appliquons une propriété color avec la valeur blue à notre body, ce sont tous les éléments qui se retrouvent écrits en bleu. Ceci est tout à fait compréhensible, dans le sens où tout le contenu se situe dans la balise body.
Les balises qui se trouvent à l’intérieur d’un élément héritent de ses propriétés CSS.

Et si vous avez tout suivi, vous savez que CSS signifie Cascading Style Sheets, c’est-à-dire feuilles de style en cascade. Les propriétés CSS sont donc héritées en cascade : si nous donnons un style à un élément, tous ces sous-éléments auront le même style. 

Donnons donc à tout le contenu de notre balise <body>, une couleur de texte bleue. Je code ainsi : 

				
					/* fichier activateur.css */

body {
    color: blue;
}

En codant cette règle CSS sur le body, nous pouvons voir maintenant que tous les éléments qui n’ont pas de règles CSS déjà établies, ont la couleur de texte bleue. Comme les titres par exemple. Nous sommes bien en présence du principe de l’héritage en CSS.

Image de l'héritage des règles CSS
La règle CSS appliqué au "body", est héritée par tous les éléments qui n'ont pas d'autre règles établies (comme les titres par exemple)

Priorité des règles

Mais pas de panique, si j’applique une couleur bleue à mon body qui contient mon H1, par défaut mon H1 sera donc bleu. Si maintenant, je veux que mon H1 soit en rouge, alors il me suffit d’écrire une règle CSS pour mon H1, en lui indiquant que la couleur sera rouge. Cette règle aura la priorité sur celle définie pour le body. Et cela vaut pour tous les éléments de notre site bien entendu.

Maintenant, il faut quand même penser à structurer votre code, de façon à appliquer la méthode DRY. Ne pas faire trop de répétitions de code et s’organiser pour appliquer ce principe au maximum.

				
					/* fichier activateur.css */

body {
    color: blue;
}

h1 {
    color: red;
}

Cette règle sur le titre h1 prendra alors la priorité sur celle “héritée” du sélecteur CSS body.

Notre titre h1 est maintenant en rouge.

Image de la priorité de la règle CSS du h1 sur celle héritée du body
La règle CSS du titre h1 prend la priorité sur l'héritage de la règle du body

Ce qu’il faut bien retenir ici, est le principe de l’héritage et bien comprendre que dès que nous créons une règle CSS à un élément parent, alors tous ces sous-éléments, ou aussi appelés, éléments enfants, hériteront automatiquement de cette règle. 

Dans les exemples ci-dessus, nous n’avons joué qu’avec la couleur du texte, mais ce principe d’héritage est valable avec toutes les déclarations CSS que nous ferons dans la règle. Toutes les propriétés CSS et les valeurs attribuées seront automatiquement transmises aux éléments “enfants“. 

Balises universelles

Nous avons vu que nous pouvions donc styliser nos éléments avec des attributs de classe ou d’ID. Cela est très bien, mais si par exemple nous ne voulons pas mettre en rouge tout notre titre, mais uniquement “en ligne” ? Comment faire cela puisqu’aucune balise html n’entoure mon expression “en ligne” ?

Et bien nous avons a disposition 2 balises dites universelles que nous pouvons utiliser. Je vous en ai déjà parlé lors de la réalisation du projet “Transformer une maquette en site web avec HTML et CSS”. Nous avons ces 2 balises qui n’ont aucune signification particulière, et que nous utilisons fréquemment lors de la réalisation de projet, et qui sont les balises span et div. 

Différences

La seule différence entre ces balises est que la balise <span></span> est une balise de type inline, c’est à dire une balise que l’on place au sein d’un texte pour sélectionner certains mots uniquement. La balise <div></div> est du type block et entoure un bloc de texte. Une balise de type block provoque obligatoirement un retour à la ligne, ce qui la différencie d’une balise de type inline qui elle n’en provoquera pas. 

Nous pourrons donc utiliser une balise span à qui nous attribuons une classe afin de lui donner la couleur rouge attendue par notre exemple de titre. 

Pour faire cela, je vais donc entourer mes mots “en ligne” par un span dans le code de mon index.html comme ceci : 

				
					<!-- fichier index.html -->

 <h1>Mon site bientôt <span class="inline">en ligne</span></h1>

Dans mon fichier activateur.css, maintenant si je veux que seul les mots “en ligne” soient rouge, alors je ciblerai mon sélecteur de classe nommé “inline”, et je supprime la règle CSS coder sur mon sélecteur h1 : 

				
					/* fichier activateur.css */

body {
    color: blue;
}

.inline {
    color: red;
}

En codant cela, nous pouvons voir que seuls les mots “en ligne” sont maintenant en rouge : 

Image de l'affichage de index.html avec ajout d'une balise span
Affichage de la page index.html et du style appliqué à la balise universelle "span" dans le titre h1

Tester

Vous pouvez essayer de votre côté de remplacer la balise universelle “span” par la balise universelle “div”. Vous verrez alors les différences expliquées ci-dessus entre une balise de type inline (comme la span) et une balise de type block (comme la div). En mettant une div à la place du span, les mots ‘en ligne’ feront un retour à la ligne automatiquement puisqu’ils seront situés dans une balise de type block. Ce qui n’est pas le cas avec notre balise “span” de type inline. 

L'abus de balises universelles peut nuire à la santé de votre site.

Nous venons de le voir, l’utilisation des balises universelles “span” et “div”, nous facilite la mise en style. 

ATTENTION ! N’en abusez pas. Nous avons à disposition des balises sémantiques en HTML que nous devons privilégier afin de produire un code plus maintenable et compréhensible. De plus l’utilisation des balises sémantiques, dont je vous ai dressé la liste dans le projet “Transformer une maquette en site web avec HTML et CSS“, permettra à notre site d’être mieux référencé. 

Pensez donc à utiliser les balises sémantiques lorsque vous codez votre HTML, et lorsque vous ne pouvez pas faire autrement, alors utilisez les balises universelles. 

Propriétés CSS

Nous avons vu jusqu’à maintenant les principes à connaître lorsqu’on code en CSS. Nous allons donc pouvoir maintenant découvrir les principales propriétés CSS existantes pour nous aider à mettre en style nos projets, et les différentes valeurs que nous pouvons attribuer à ces propriétés CSS. 

N’hésitez pas à faire une pause, à boire un café, et nous allons voir ensemble ces propriétés CSS. 

Profitez de cette pause pour vous inscrire sur Activateur Web, pour vous abonnez à ma page Facebook, à ma chaîne YouTube, à liker, à partager, et à commenter. Réaliser cette série m’a pris quelques jours, alors merci de prendre quelques secondes, voir quelques minutes, pour m’encourager à continuer de produire du contenu comme cette série. 

Merci pour cela, et maintenant à nous le monde merveilleux de CSS. 😉

Dimensions et marges

Les dimensions

Contrairement à une balise de type inline, une balise de type block possède une largeur et une hauteur. Nous avons donc 2 propriétés CSS pour gérer cela : 

  • La largeur d’un bloc – Propriété CSS: width
  • La hauteur d’un bloc –Propriété CSS: height

La valeur de ces propriétés s’exprime en pixels ou en pourcentage % . 

La width et la height représentent la largeur et la hauteur du contenu des blocs. Si le bloc à des marges, celles-ci s’ajouteront à la largeur et à la hauteur. 

Par défaut, un bloc prend 100% de la largeur disponible.

Appliquons pour vérifier cela une couleur de fond à notre titre h1 :

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
}

Nous voyons que le titre occupe bien toute la largeur de notre page.

Image de la balise h1 de type block occupant 100% de la largeur disponible
Une balise de type block (comme la balise h1) occupe 100% de la largeur

Nous pouvons ensuite appliquer une propriété width (largeur) avec une valeur de 50% :

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    width: 50%;
}

, et nous verrons alors que notre bloc représente maintenant plus que la moitié de la page. 

Image de index.html avec une règle CSS sur le titre avec une width à 50%
Titre h1 auquel nous appliquons une propriété CSS width (largeur) avec la valeur de 50%.

Dans l’exemple ci-dessus, vous pouvez essayer de diminuer la taille de la fenêtre du navigateur. Vous verrez alors que notre titre ne fera toujours que la moitié de la largeur de la page. Ceci est valable, car nous avons exprimé la valeur de la propriété width en %. Si nous utilisons les pixels, cela ne sera plus le cas et notre titre aura toujours une largeur fixe selon le nombre de pixels que nous lui donnons, et ce, quelle que soit la taille de la fenêtre. 

L’utilisation des % sera utile pour créer un design qui s’adapte automatiquement à la résolution des différents écrans. 

Toutefois, parfois nous aurons besoin d’une dimension précise pour certains éléments et dans ce cas, nous utiliserons les pixels. 

Dimensions minimum et maximum

Nous pouvons également demander à ce qu’un bloc ait des dimensions minimales et maximales. Cela permet de définir des dimensions “limites”, encore une fois pour que le site s’adapte aux différents écrans.
Pour cela, les propriétés CSS suivantes peuvent être utilisées :

  • min-width: largeur minimale.
  • min-height: hauteur minimale.
  • max-width: largeur maximale.
  • max-height: hauteur maximale.

Exemple : on peut demander à ce que les paragraphes occupent 50 % de la largeur et qu’ils aient au minimum une largeur de 500 pixels. Nous écrirons alors : 

				
					/* fichier activateur.css */

p {
    color: blue;
    width: 50%;
    min-width: 500px;
}

Pour vérifier que nos paragraphes ont une largeur de 50%mais avec une largeur minimum de 500 pixels, j’utilise les outils de mon navigateur. Pour ouvrir ces derniers, je tape sur la touche F12 lorsque je me trouve sur la fenêtre du navigateur qui affiche mon site.

Je vais ensuite avec l’aide des outils, donner une largeur à ma fenêtre de 400 pixels environ. En sélectionnant les éléments, je peux voir que mes paragraphes dépassent de ma fenêtre et que par conséquent, ils ont bien une taille minimum de 500px. 

Image de l'affichage de la fenêtre à 400px et paragraphes dépassent car min-width de 500px
Les paragraphes ayant une min-width de 500px, dépassent du "body" (ici en bleu) qui ne fait que 400px de largeur

N’hésitez pas à tester ces propriétés de dimensions limites min-width et max-width.

Essayer avec la hauteur et la propriété CSS height, ainsi qu’avec min-height et max-height.

Les marges

Il faut savoir qu’il existe 2 types de marges : 

  • Les marges intérieures, – Propriété CSS: padding
  • Les marges extérieures. – Propriété CSS: margin

Les valeurs de ces propriétés s’expriment principalement en pixels. 

Des marges sont appliquées par défaut aux éléments de type block, mais cette marge par défaut n’est pas la même pour toutes les  balises de type block. 

La marge d’un paragraphe ne sera pas la même que celle d’un titre par exemple. 

Exemple : Avec les outils de mon navigateur, je peux voir que ce sont toujours des marges extérieures (margin)  qui sont appliquées par défaut.

Et en effet, je peux constater que ces marges ne sont pas les mêmes sur les paragraphes et sur les titres.

Les marges extérieures appliquées en haut et en bas du contenu du titre h1, est de 21.440px, tandis que celle du paragraphe est de 16px.

Image représentant les marges extérieures par défaut pour le titre h1
Marges extérieures par défaut attribuées à la balise de type block du titre h1
Image représentant la marge extérieure par défaut d'un paragraphe
Marges extérieures appliquées par défaut à la balise de type block de paragraphe

ATTENTION à cela lorsque nous codons des projets. En effet, il est important de se rappeler que par défaut, les balises de type block se verront attribuées des marges extérieures par défaut. Lorsque nous donnons une taille (largeur ou hauteur) à un élément, alors ces marges s’ajouteront à la taille de cet élément. 

Heureusement, nous pouvons contrôler ces marges par défaut, en attribuant la propriété “margin“, suivie d’une valeur dans les déclarations de notre règle CSS. 

Exemple : si je souhaite que mon titre h1 n’est plus cette marge par défaut de 21.440px, mais qu’il est une marge de 25px, alors il me suffit d’écrire : 

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    width: 50%;
    margin: 25px;
}

Afin de mieux voir les marges extérieures de 25px que nous venons d’appliquer dans notre règle CSS, enlevons la largeur de 50 % à notre titre h1. Notre règle CSS est donc maintenant celle-ci : 

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    margin: 25px;
}

Regardons maintenant nos marges extérieures sur le titre h1 à l’aide des outils du navigateur :

Image de l'affichage du titre h1 avec les marges ayant la valeur transmise dans une règle CSS
La valeur de la propriété margin coder dans la règle CSS prend la priorité sur la marge par défaut

Les marges intérieures (padding) ne sont pas attribuées par défaut. Si nous souhaitons ajouter une marge intérieure à notre contenu, nous écrirons la déclaration dans notre règle CSS, bien entendu.

Afin de mieux distinguer les marges extérieures et les marges intérieures, je vais ajouter une propriété CSS de bordure (que nous verrons plus tard) à mon titre. J’ajouterai ensuite une marge intérieure de 15 pixels par exemple. 

Nous pouvons donc coder ceci : 

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    margin: 25px;
    border: 2px solid red;
    padding: 15px;
}

Voyons l’affichage produit par ce code, et vérifions avec les outils de navigateur :

Image de l'affichage des marges extérieures et des marges intérieures
Marges extérieures et intérieures appliquées au titre suivant les déclarations faites dans la règle CSS

Nous pouvons voir que lorsque nous appliquons une valeur à notre propriété margin ou à notre propriété padding, cela nous crée une marge sur les quatre côtés du bloc. 

Si nous voulons appliquer des marges différentes sur les côtés de nos blocs, alors nous utiliserons des propriétés plus précises comme : 

Pour les marges extérieures :

  • margin-top: marge extérieure en haut.
  • margin-bottom: marge extérieure en bas.
  • margin-left: marge extérieure à gauche.
  • margin-right: marge extérieure à droite.

Pour les marges intérieures : 

  • padding-top: marge intérieure en haut.
  • padding-bottom: marge intérieure en bas.
  • padding-left: marge intérieure à gauche.
  • padding-right: marge intérieure à droite.

Exemple : Appliquons des valeurs différentes à nos marges extérieures et marges intérieures sur notre titre h2, après lui avoir, là aussi pour mieux distinguer, donner une bordure.

				
					/* fichier activateur.css */

h2 {
    border: 2px solid red;
    margin-top: 30px;
    margin-right: 50px;
    margin-bottom: 80px;
    margin-left: 20px;

    padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 25px;
    padding-left: 60px;
}

Nous pouvons voir que l’affichage de nos marges correspond bien aux valeurs que nous avons attribuées aux propriétés séparées des marges.

Image de l'affichage du titre h2 avec les valeurs de marges extérieures et intérieures données dans nos déclarations séparées.
Affichage du titre h2 avec les valeurs de marges extérieures et intérieures données dans nos déclarations séparées.

Autres notations

Nous pouvons aussi utiliser une autre façon d’écrire les marges en donnant des valeurs aux propriétés dans l’ordre suivant : valeur de marge en haut, valeur de marge à droite, valeur marge en bas et valeur de marge à gauche. On notera alors : 

				
					/* fichier activateur.css */

h2 {
    border: 2px solid red;
    /* margin-top: 30px;
    margin-right: 50px;
    margin-bottom: 80px;
    margin-left: 20px; Ces valeurs peuvent aussi s'écrire comme ci-dessous : */ 
    margin: 30px 50px 80px 20px;

    /* padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 25px;
    padding-left: 60px; Ces valeurs peuvent aussi s'écrire comme ci-dessous :*/
    padding: 50px 15px 25px 60px;
}

Important : lorsque vous utilisez cette notation, respectez bien l’ordre de déclaration des valeurs comme indiqué précédemment.

Enfin une autre notation est possible lorsque nous donnons les mêmes valeurs de marges en haut et en bas, et les mêmes valeurs à droite et à gauche. 

Exemple : Si je veux une marge de 20px en haut et en bas, et une marge de 30px à droite et  à gauche, je peux écrire : 

				
					/* fichier activateur.css */

h2 {
    border: 2px solid red;
    /* margin: 20px 30px 20px 30px; Plutôt que cette notation je peux utiliser : */
    margin: 20px 30px;

    /* padding: 20px 30px 20px 30px; Plutôt que cette notation je peux utiliser : */
    padding: 20px 30px;
}

Comme indiqué ci-dessus, nous pouvons employer ces notations aussi bien sur les marges extérieures (propriété CSS margin), que sur les marges intérieures (propriété CSS padding).

A noter

Lorsque nous voulons donner une valeur de 0px (zéro pixels) à nos marges, nous ne sommes pas obligés d’indiquer “px“. Nous pouvons simplement écrire 0 (zéro).

 0 est le seul à pouvoir être écrit sans unité de base à sa suite.

Exemple : 

				
					body {
    margin: 10px 0;
    padding: 0 10px;
}

Centrer des blocs

Nous pouvons centrer des blocs en leur donnant une largeur ( width ) et en indiquant des marges extérieures automatiques avec margin: auto; 

Ainsi, si nous écrivons par exemple :

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    width: 50%;
    margin: auto;
    border: 2px solid red;
    padding: 15px;
}

Ce code permettra de centrer notre balise h1, de type block, sur notre page. Ne pas oublier de lui donner une dimension avant d’appliquer la marge automatique.

A noter que nous ne pouvons que les centrer horizontalement et pas verticalement.

Le résultat de l’affichage : 

Image de l'affichage du titre h1 auquel nous avons appliqué une width et margin:auto
Affichage du titre h1 auquel nous avons appliqué une width et margin:auto

Contrôler le dépassement des blocs

Lorsque nous définissons des dimensions précises pour nos blocs, il peut arriver que ceux-ci deviennent trop petits pour le texte qu’ils contiennent. 

Nous avons là encore des propriétés CSS pour gérer cela :

Couper un bloc -Propriété CSS: overflow

Imaginons que nous ayons, pour une raison qui nous est propre, un long texte dans un paragraphe, mais que nous voulons que notre paragraphe mesure 300 px de large par 150 px de haut. 

Faisons cela sur notre 3ème paragraphe qui a pour attribut de classe le nom de tests (class=”tests”).

Nous allons donc coder ceci : 

				
					/* fichier activateur.css */

.tests {
    color: green;
    width: 300px;
    height: 150px;
}

Côté affichage, nous voyons que notre texte dépasse des limites du paragraphe : 

Image de l'affichage du paragraphe auquel nous avons donné une taille plus petite que son contenu
Affichage du paragraphe auquel nous avons donné une taille plus petite que son contenu. Le contenu (texte vert) dépasse.

Pour éviter cela, nous allons utiliser la propriété CSS overflow qui peut prendre 4 valeurs possibles :

  • visible : le texte dépasse et reste visible. (par défaut)
  • hidden: le texte est coupé, et nous ne pourrons pas voir le reste.
  • scroll: Le texte est coupé, mais cette fois, nous avons un ascenseur pour lire le reste du texte.
  • auto: Le navigateur choisira comment afficher le texte. 

N’hésitez pas à tester toutes ces valeurs et à voir l’affichage produit. Pour ma part, je vais maintenant mettre cette propriété CSS overflow avec la valeur que nous utilisons le plus souvent, auto. 

J’écris donc ceci : 

				
					/* fichier activateur.css */

.tests {
    color: green;
    width: 300px;
    height: 150px;
    overflow: auto;
}

Maintenant que nous avons appliqué cette déclaration dans notre règle CSS, voici l’affichage produit : 

Image de l'affichage de notre paragraphe avec la propriété CSS overflow avec comme valeur auto
Affichage du paragraphe auquel nous avons donné une taille plus petite que son contenu, mais cette fois avec la propriété overflow:auto

Couper un texte trop large -Propriété CSS: word-wrap

Là encore si nous avons un long texte comme une URL par exemple qui ne tient pas dans la largeur, nous pouvons forcer la césure avec la propriété CSS word-wrap.

Nous parlons ici d’un texte qui ne contient ni espace, ni tiret, afin que le navigateur ne sache pas faire la césure. Nous utiliserons  alors  la propriété avec pour valeur break-word .

Exemple : Dans mon html, je code un paragraphe comme ceci : 

				
					<!-- fichier index.html -->

<p class="url-longue">https://ladresseurlquiseratroplonguepourtenirdansmonparagraphe.com</p>

Et dans mon fichier CSS, je lui donne la règle suivante : 

				
					/* fichier activateur.css */

.url-longue {
    width: 150px;
    height: 200px;
    margin: 50px;
    border: 2px solid red;
}

Ce code produira l’affichage suivant :  le texte (ici une url) n’ayant pas de césure, il dépasse de la largeur du paragraphe (balise de type block).

Image de l'affichage d'un paragraphe qui contient un texte trop long sans césure
Affichage d'un paragraphe qui contient un texte trop long sans césure

Comme expliqué précédemment, nous devons pour éviter cela, utiliser la propriété CSS word-wrap avec pour valeur break-word. Ajoutons donc cette déclaration à notre règle CSS : 

				
					/* fichier activateur.css */

.url-longue {
    width: 150px;
    height: 200px;
    margin: 50px;
    border: 2px solid red;
    word-wrap: break-word;
}

L’affichage produit est maintenant celui ci-dessous : 

Image du paragraphe avec un texte trop long mais avec la propriété CSS word-wrap qui a pour valeur break-word
Affichage du paragraphe avec la propriété CSS word-wrap qui a pour valeur break-word

Format et style de texte en CSS :

La mise en forme du texte en CSS peut se faire de plusieurs façons, notamment au niveau de ces propriétés pour changer sa taille, sa graisse, la police d’écriture, l’alignement, etc.

Sachez que le navigateur qui interprète les pages de votre site, utilise une taille et une police par défaut. Il sait, par défaut, interpréter que les titres h1 sont plus grands que les titres h2, qui seront eux même plus grand que le texte d’un h3 ou d’un paragraphe, etc.

La taille du texte - propriété CSS : font-size

Pour modifier la taille du texte, on utilise la propriété CSS “font-size”. Cette propriété à besoin d’une valeur, et c’est là que les choses se compliquent un peu, car plusieurs techniques existent :

  • Indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette solution s’avère très précise, mais mieux vaut l’utiliser qu’en cas d’absolue nécessité. En effet, de nos jours, les différents supports vont du petit écran de la montre connectée à ceux de nos téléviseurs 4 K, voir plus grand encore. Et donc en utilisant une taille absolue, on risque d’indiquer une taille trop petite pour certains lecteurs, ou trop grande pour d’autres.
  • Indiquer une taille relative : en %, en “em”, “rem” ou “ex”. Cette solution à l’avantage d’être plus souple et s’adapte plus facilement à la taille des écrans des utilisateurs. 

Valeur absolue :

 Pour indiquer une taille absolue, on utilise généralement les pixels.

Pour avoir un texte de 16px de hauteur, nous devons écrire : font-size: 16px;

Nous pouvons également remplacer “px” par “cm” ou “mm”, mais ces unités sont moins bien adaptées aux écrans.

Valeur relative :

C’est la méthode recommandée pour que votre texte s’adapte aux écrans sur lesquels il est visualisé. 

Pour utiliser une valeur relative, il y a là aussi plusieurs moyens : 

 Comme écrire la valeur avec des mots anglais : 

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

Cette technique a toutefois un défaut, c’est qu’il n’y a que 7 tailles disponibles.

Autre méthode

Une autre technique et qui est celle que j’utilise la plupart du temps est d’indiquer la taille en “em”, ou en “rem” : 

  • Si on écrit 1em, le texte a une taille normale.
  • Si on veut grossir le texte on écrit une valeur supérieure à 1 avec une décimale après un . : 1.3em par exemple. 
  • Si on veut réduire le texte, on écrit une valeur inférieure à 1 comme 0.8em. 

Attention à bien mettre un point pour les nombres décimaux et non une virgule. 

D’autres unités sont disponibles comme le “ex” ou le “%” . 

La différence entre le “em” et le “rem”, est que le “em” sera dimensionné par rapport à la propriété font-size de son élément parent, tandis que le “rem” lui ne tient pas compte de la taille du texte de son parent. 

Développons un peu

Pour développer un peu, sachez qu’en règle générale un “em” ou un “rem” vaut 16 pixels. Si maintenant dans mon CSS, je déclare que mon “body” par exemple utilise une propriété font-size avec pour valeur 200%, alors mon “em” vaudra 32 pixels, puisque tous les éléments sont des enfants du “body”. Mon “rem”, lui, vaudra toujours 16px, car il ne tient pas compte de la taille de son parent. 

La police d’écriture -propriété CSS : font-family

La police est un autre point noir de l’affichage du texte, car pour qu’une police s’affiche correctement, il faut que le navigateur du visiteur de votre site la prenne en charge, sinon il affichera une police par défaut, qui n’aura peut-être rien à voir avec ce que vous voulez.

Heureusement, depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur qui affiche votre site. Nous verrons cela par la suite.

La propriété CSS qui permet d’indiquer la police à utiliser est la propriété font-family.
Nous déclarons alors font-family: police; Et pour éviter les problèmes au cas où l’internaute n’a pas la même police que nous, on indique en général plusieurs polices séparées par des virgules : font-family: police1, police2, police3, serif;
Le navigateur essaiera d’utiliser la police1, et si il ne l’a pas la police2, et ainsi de suite. On indique en dernier serif ou sans-serif qui correspond à une police par défaut si aucune police n’a été trouvée. La différence entre serif et sans-serif est la présence de petites pattes de liaison en bas de lettres sur la serif, et que la sans-serif n’a pas.

Exemple : 

				
					/* fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
}

Sachez aussi que les polices les plus courantes comme : 

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

fonctionnent bien sur la plupart des navigateurs. 

Dans l’exemple ci-dessus, le navigateur essaiera d’utiliser la police “Arial”, puis il ne l’a pas, la police “Helvetica”, et si il ne l’a pas non plus, il utilisera la police par défaut sans-serif. 

Police personnalisée

Les polices communes, c’est bien et c’est une valeur sûre pour que le navigateur de nos visiteurs les affiche, mais si je veux une police personnalisée et qui sort de l’ordinaire, comment faire ?
Aujourd’hui avec CSS 3, cela est devenu possible, ce qui ne l’était pas auparavant.
Et pour faire cela, il y a 2 méthodes, là encore. 

Téléchargement de la police :

Télécharger le fichier de la police choisie et le placer dans le même dossier que votre fichier .css. 

Pour l’exemple, je vais me rendre sur le site de Google Fonts et télécharger la police appelée “Fuzzy Bubbles” : 

Image de la page Google fonts de la police Fuzzy Bubbles
Téléchargement de la police d'écriture "Fuzzy Bubbles" depuis le site Google Fonts

Après avoir téléchargé le fichier depuis Google Fonts, je le décompresse et récupère les fichiers de police ayant le format .ttf pour les placer dans le même dossier que mon fichier .css. 

Image des fichiers de police d'écriture placés dans le même dossier que mon fichier .css
Fichiers de police d'écriture (.ttf) placés dans le même dossier que mon fichier .css

Ensuite nous devons déclarer la police en CSS comme ceci : 

				
					/* fichier activateur.css */

@font-face { 
    font-family: 'Fuzzy Bubbles'; 
    src: url('FuzzyBubbles-Regular.ttf');
 }

Et pour l’utiliser sur les éléments de ma page, je ferai une déclaration dans la règle CSS. 

Exemple : 

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    width: 50%;
    margin: auto;
    border: 2px solid red;
    padding: 15px;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
}

Nous avons appliqué la police d’écriture dans la déclaration ci-dessus. Regardons le résultat au niveau de l’affichage : 

Image de l'affichage du titre h1 auquel nous appliquons la font-family:"Fuzzy Bubbles"
Affichage du titre h1 auquel nous appliquons la font-family:"Fuzzy Bubbles"

Et là encore, il faudra ne pas s’arrêter là en téléchargeant et en indiquant plusieurs formats. Le navigateur télécharge alors le format qu’il sait lire. 

Les différents formats de fichiers de police qui existent sont : 

  • .ttf : True Type Font
  • .eot : Embedded Open Type
  • .otf : Open Type Font
  • .svg : SVG Font . Format pour iPhone et iPad
  • .woff : Web Open Font Format

Il faudra donc indiquer ses différents formats dans notre règle CSS comme ceci : 

				
					/* fichier activateur.css */

@font-face { 
    font-family: 'Fuzzy Bubbles'; 
    src: url('FuzzyBubbles-Regular.ttf')format('truetype'),
         url('FuzzyBubbles-Regular.eot')format('eot'),
         url('FuzzyBubbles-Regular.woff')format('woff'),
         url('FuzzyBubbles-Regular.svg')format('svg');
 }

ATTENTION, cette méthode a des défauts :

  • Il faudra que le navigateur du visiteur télécharge automatiquement le fichier de la police dont le poids peut atteindre, voire dépasser les 1 Mo.
  • Votre site sera plus lourd et donc plus lent à charger.
  • La plupart des polices sont soumises au droit d’auteur, et vous ne pouvez donc pas les utiliser sur votre site sans licence. Pour cela, assurez vous d’utiliser des polices libres de droits. Des sites comme Google Fonts, fontsquirrel.com, ou dafont.com en proposent un grand nombre qui est libre de droits. 

Utiliser un CDN :

Ma méthode préférée et celle que j’utilise pour tous mes projets, est l’utilisation d’un CDN (Content Delivery Network). 

Pour cela il faut alors ajouter une balise link vers la police de notre choix dans le head de notre HTML avec les polices que nous souhaitons. 

Nous appelons ensuite ces polices dans notre CSS avec la seule propriété font-family suivie de la valeur qui sera la police souhaitée pour l’élément ciblé. 

Voyons cela. Pour commencer nous retournons sur le site Google Fonts et sélectionnons les styles de la police que nous voulons. À noter que pour cette police “Fuzzy Bubbles“, il n’y a que 2 styles disponibles, mais pour d’autres, vous aurez beaucoup plus de styles proposés.

Image de sélection des styles de la police sur Google Fonts
Sélection des styles de la police sur Google Fonts

Nous devons ensuite faire le lien entre notre CDN et nos fichiers. Pour cela, nous allons copier les balises “link” données par Google Fonts : 

Image de copie des balises link du CDN Google Fonts pour faire le lien avec notre projet
Récupération des balises "link" sur le site Google Fonts, à copier et à coller dans le "head" de notre fichier .html

Dans mon fichier index.html, j’ajoute donc les balises copiées sur Google Fonts, dans le “head”, comme ceci : 

				
					<!-- Fichier index.html  -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
        <link rel="stylesheet" href="activateur.css">
        <!-- Liens vers la police d'écriture Fuzzy Bubbles de Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
        <title>Coder avec CSS</title>
    </head>

    <body>

Après avoir supprimé les déclarations faites pour la police à télécharger (@font-face ) et les fichiers de la police présents dans le dossier de notre projet, nous pouvons écrire simplement une déclaration dans notre règle CSS, avec la propriété CSS font-family. Nous verrons ainsi que le lien avec le CDN se fait bien et que la police est appliquée à notre élément : 

				
					/* fichier activateur.css */

h1 {
    background-color: cyan;
    width: 50%;
    margin: auto;
    border: 2px solid red;
    padding: 15px;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
}

Le résultat sur l’affichage est identique que précédemment.

Image de l'affichage du titre h1 auquel nous appliquons la font-family:"Fuzzy Bubbles"
Affichage du titre h1 auquel nous appliquons la font-family:"Fuzzy Bubbles"

Nous le voyons, le résultat d’affichage est le même. Pourtant, en utilisant cette méthode avec le CDN, vous éviterez de faire télécharger cette police par vos utilisateurs, et vous gagnerez en temps de chargement, en poids, et donc en performances.

Je vous conseille donc d’utiliser cette méthode.

Tout comme lorsque vous voudrez utiliser des icônes, ou utiliser Bootstrap dans vos projets, vous utiliserez alors les CDN disponibles. 

N’hésitez pas après avoir suivi ce tutoriel, à regarder la série sur “Transformer une maquette en site web avec HTML et CSS“. Je vous montre comment mettre en place ces CDN pendant la réalisation de ce projet complet. 

Mettre le texte en italique - propriété CSS : font-style

Afin de mettre du texte en italique, on utilise la propriété CSS font-style qui peut prendre 3 valeurs :

  • italic : le texte sera mis en italique.
  • oblique : le texte sera passé en oblique (légère différence avec l’Italique).
  • normal. Le texte sera normal (par défaut).


ATTENTION, une balise <em> que nous utilisons pour mettre en évidence certains mots, est souvent interprétée par les navigateurs par la mise en italique de ce mot. Cependant il ne faut pas confondre les 2, et d’ailleurs nous pourrions pour éviter que le navigateur ne mette ce mot en italique faire un em { font-style: normal; }

Mettre le texte en gras - propriété CSS : font-weight

Afin de donner une graisse au texte, on utilise la propriété CSS font-weight qui peut prendre 2 valeurs :

  • bold: le texte sera en gras.
  • normal: le texte sera écrit normalement.(par défaut)

Là encore, ATTENTION de ne pas confondre avec la balise <strong> qui permet d’indiquer que le texte est important, et qui est interprété par les navigateurs par la mise en gras du mot ou du texte.

Vous verrez également que les éditeurs de code et les styles de police proposent souvent d’autres graisses allant de la valeur 100(thin) à 900 (extra-bold). N’oubliez pas pour pouvoir appliquer ces différentes graisses que vous devrez faire le lien avec le CDN, et donc d’ajouter ces styles dans votre sélection de police.

Soulignement et autres décorations -propriété CSS: text-decoration

La propriété CSS text-decoration parle d’elle même et peut prendre 5 valeurs : 

  • underline : souligné,
  • line-through : barré,
  • overline: ligne au-dessus,
  • blink: clignotant
  • none: normal(par défaut)

ATTENTION, une valeur comme blink n’est pas prise en charge par tous les navigateurs. N’hésitez pas à regarder la compatibilité de la propriété CSS sur le site caniuse.

L’alignement du texte -propriété CSS : text-align

Le CSS nous permet d’aligner le texte aussi bien à gauche, centré, à droite, et justifié. 

Pour cela nous utilisons la propriété CSS text-align, et indiquons comme valeur l’alignement souhaité avec : 

  • left: le texte sera aligné à gauche (réglage par défaut).
  • center: le texte sera centré
  • right: le texte sera aligné à droite
  • justify: le texte sera justifié. Pour rappel, justifier un texte permet de faire en sorte qu’il prenne toute la largeur possible sans laisser d’espace blanc à la fin de la ligne.

ATTENTION, l’alignement du texte ne se fait que sur des balises de type block. En effet sur des balises de type inline (comme <span>, <a>, <em>, <strong>) on ne pourra pas modifier l’alignement de quelques mots au milieu d’un texte et cela est logique. 

Appliquer ces propriétés de texte

N’hésitez pas à pratiquer et à essayer toutes les propriétés CSS de texte ci-dessus dans vos règles CSS. Je ne vous ai pas fourni d’exemple ici, car je pense qu’elles sont assez claires. 

Malgré tout, faisons un exemple qui regroupera toutes ces propriétés. Je vais donc appliquer à mon h2, un texte gras, qui sera en italique, souligné et centré. 

Cela se fera alors comme cela : 

				
					/* Fichier activateur.css */

h2 {
    border: 2px solid red;
    margin: 20px 30px;
    padding: 20px 30px;
    /* Texte en gras */
    font-weight: bold;
    /* Texte en italique */
    font-style: italic;
    /* Texte souligné */
    text-decoration: underline; 
    /* Texte centré */
    text-align: center;
}

L’affichage de notre titre h2 sera alors celui-ci : 

Image de l'affichage du titre h2 auquel nous appliquons des propriétés CSS de texte
Affichage du titre h2 auquel nous appliquons des propriétés CSS de texte.

Les flottants - propriété CSS: float

Cette propriété CSS float nous permet de faire flotter un élément autour du texte. Elle peut prendre 2 valeurs : 

  • left : l’élément flottera à gauche
  • right: l’élément flottera à droite

Pour l’utiliser, il suffit d’appliquer un “float” à une balise, et continuer ensuite à écrire du texte à la suite normalement. 

Cette propriété CSS float s’utilise aussi bien sur des balises inline que sur des balises block. 

Exemple : Dans notre html, nous avons ce paragraphe qui comprend une image qui à une classe “imgfloat”.

Le code est celui-ci : 

				
					<!-- Fichier index.html -->

<p>
    <img decoding="async" src="https://doodleipsum.com/200/outline?i=a28bcf0176524d4f74e60f83ece7b5d7" alt="Sightseeing by Ivan Mesaroš" class="imgfloat" />
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet sint non debitis expedita deleniti labore itaque quam magni voluptates doloremque, mollitia similique libero voluptatum sed delectus quisquam aspernatur laboriosam commodi.
    Enim quos maxime quas alias quaerat id placeat praesentium ratione assumenda minus, exercitationem, doloremque molestiae iusto consectetur aut dolorem, quis iure esse a omnis corrupti quo. Cum laudantium explicabo vero.
    Blanditiis sit ipsa molestias facilis omnis, ratione voluptas quo iste odio nemo suscipit cum distinctio labore, quod quis! 
        Officiis mollitia dolore eos ad laboriosam eligendi asperiores. Saepe perferendis ducimus omnis!
        Quibusdam sint aliquam pariatur dolorem ex quas? Dolorum, animi tempore. Deleniti harum sed error aliquid fugiat suscipit minus eveniet accusamus eos velit. Illo esse nesciunt voluptas ab dolores deserunt officiis.
        Error modi cumque quisquam fuga atque vel officiis totam eaque, voluptatum rerum, non consequuntur quas inventore nulla facere culpa aliquam magnam sapiente placeat accusamus voluptatem, similique reiciendis doloremque? Officiis, excepturi!
</p>

L’affichage de ce code produit l’affichage ci-dessous. Nous voyons que le texte commence après l’image. 

Image de l'affichage d'un paragraphe contenant une image et du texte à la suite
Affichage d'un paragraphe contenant une image et du texte à la suite.

Maintenant, ajoutons notre propriété CSS float à notre image et donnons lui la valeur left, par exemple. 

Pour cibler mon image qui a la classe “imgfloat”, je vais donc déclarer le sélecteur de classe et écrire ensuite ma règle CSS, comme ceci : 

				
					/* Fichier activateur.css */

.imgfloat {
    float: left;
}

Mon texte sera maintenant flottant autour de mon image, comme ci-dessous : 

Image de l'affichage du paragraphe avec le texte flottant avec l'image
Affichage du paragraphe avec le texte flottant avec l'image

Stopper un flottant - propriété CSS: clear

Pour stopper un flottant, nous devons utiliser la propriété CSS clear. Elle prendra 3 valeurs possibles : 

  • left: le texte se poursuit en dessous après un float:left;
  • right: le texte se poursuit en dessous après un float:right;
  • both: le texte se poursuit en dessous, que ce soit après un float:left; ou après un flot:right;

Si je reprends donc mon exemple précédent, imaginons que je veuille qu’une partie de mon texte flotte, et ensuite l’autre partie s’arrête de flotter. Je commencerai par mettre le texte que je veux stopper entre des balises <p> </p>, et j’attribue une classe ‘stopfloat‘ à cette balise. Comme ceci : 

				
					<!-- Fichier index.html -->

<p>
    <img decoding="async" src="https://doodleipsum.com/200/outline?i=a28bcf0176524d4f74e60f83ece7b5d7" alt="Sightseeing by Ivan Mesaroš" class="imgfloat" />
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet sint non debitis expedita deleniti labore itaque quam magni voluptates doloremque, mollitia similique libero voluptatum sed delectus quisquam aspernatur laboriosam commodi.
    <p class="stopfloat">Enim quos maxime quas alias quaerat id placeat praesentium ratione assumenda minus, exercitationem, doloremque molestiae iusto consectetur aut dolorem, quis iure esse a omnis corrupti quo. Cum laudantium explicabo vero.
        Blanditiis sit ipsa molestias facilis omnis, ratione voluptas quo iste odio nemo suscipit cum distinctio labore, quod quis! 
        Officiis mollitia dolore eos ad laboriosam eligendi asperiores. Saepe perferendis ducimus omnis!
        Quibusdam sint aliquam pariatur dolorem ex quas? Dolorum, animi tempore. Deleniti harum sed error aliquid fugiat suscipit minus eveniet accusamus eos velit. Illo esse nesciunt voluptas ab dolores deserunt officiis.
        Error modi cumque quisquam fuga atque vel officiis totam eaque, voluptatum rerum, non consequuntur quas inventore nulla facere culpa aliquam magnam sapiente placeat accusamus voluptatem, similique reiciendis doloremque? Officiis, excepturi!
    </p>
</p>

Voici l’affichage produit : 

Image de 2 paragraphes flottants avec une image
Affichage des 2 paragraphes flottants avec l'image

Je vais ensuite appliquer la propriété CSS clear au texte compris entre les balises<p> ayant la classe “stopfloat”. 

J’écris donc ceci comme règle CSS : 

				
					/* Fichier activateur.css */

.stopfloat {
    clear: left; /* nous pourrions également mettre both comme valeur */
}

Le paragraphe ayant la classe “stopfloat” ne flotte maintenant plus, mais démarre en dessous de l’image.

Nous avons stopper le flottant.

Voici l’affichage produit : 

Image du paragraphe sous l'image après avoir stopper le flottant avec la propriété CSS clear
Affichage du paragraphe sous l'image après avoir stopper le flottant avec la propriété CSS clear:left ou clear:both

Pause

Nous venons de voir un premier gros pavé sur l’utilisation des propriétés CSS, concernant les dimensions, les marges et le formatage du texte. 

N’hésitez pas à faire une pause, à boire un café, et nous continuerons ensuite à voir ensemble d’autres propriétés CSS. 

Profitez de cette pause pour vous inscrire sur Activateur Web, pour vous abonnez à ma page Facebook, à ma chaîne YouTube, à liker, à partager, et à commenter. Réaliser cette série m’a pris quelques jours, alors merci de prendre quelques secondes, voir quelques minutes, pour m’encourager à continuer de produire du contenu comme cette série. 

Merci pour cela, et maintenant retournons dans le monde merveilleux de CSS. 😉

Couleur et fond en CSS

Voyons maintenant comment styliser notre site à l’aide des couleurs. Avec le CSS, nous allons pouvoir coloriser nos textes, mais aussi nos fonds. Nous verrons qu’un fond peut être stylisé avec les couleurs, mais aussi avec une image. Nous pourrons également utiliser des ombres ou de la transparence sur les couleurs données à nos éléments.

Couleur du texte -Propriété CSS: color

Nous avons vu dans les exemples précédents que pour donner une couleur au texte, nous utilisons la propriété CSS color. Et là encore pour attribuer une valeur à cette propriété, il existe plusieurs méthodes : 

Indiquer le nom de la couleur

La méthode la plus simple est sans doute celle-ci. Nous utiliserons le nom de la couleur en anglais, of course, comme valeur. En anglais, car dans le développement web, c’est la langue qu’on utilise en standard. 

Alors c’est simple oui, mais cela à quand même un défaut, c’est que nous n’avons que 16 couleurs dites “standards”. Voici ces couleurs : 

Image des noms des couleurs HTML
Les couleurs dites standards ou HTML

Ces couleurs dites standards seront prises en compte par le navigateur web. On les appelle parfois d’ailleurs les couleurs HTML et CSS. Depuis quelque temps, avec le développement de nouvelles technologies d’écran, une norme de couleurs appelée X11 est disponible et reconnue par la plupart des navigateurs. Elle a l’avantage d’avoir de nombreuses teintes de disponible.
Vous pouvez voir la liste en suivant ce lien wikipédia : couleurs X11

Indiquer le nom de couleur est très simple, mais savez vous qu’un écran peut afficher 16,7 millions de couleurs ? En effet, les écrans peuvent restituer 256 nuances de rouge, 256 nuances de vert, et 256 nuances de bleu. Et lorsqu’on multiplie 256x256x256, alors on obtient les 16,7 millions de couleurs. Plutôt compliqué de mettre un nom à chacune d’entre elles non ? 

Indiquer le code hexadécimal

Une autre méthode que nous utilisons pour donner une valeur à la propriété CSS color, est la notation hexadécimale. Cette notation commence toujours par un dièse # suivie d’une combinaison de 6 lettres allant de A à F ou de chiffres allant de 0 à 9.
Nous utiliserons donc cette valeur ainsi :

				
					/* Fichier activateur.css */

.tests {
    color: #008000; /* code hexadécimal du vert */
    width: 300px;
    height: 150px;
    overflow: auto;
}

Ces combinaisons fonctionnent 2 par 2. Les 2 premiers indiquent une quantité de couleur rouge, les 2 suivant une quantité de vert, et les 2 derniers une quantité de bleu.

Ainsi, la couleur noire utilise la notation hexadécimale #000000 et la couleur blanche est #FFFFFF.
Parfois, vous verrez aussi, une notation raccourcie avec seulement trois caractères, comme le noir #000 et le blanc #FFF.
J’utilise souvent cette méthode, ou celle qui va suivre, mais je vous rassure tout de suite, je ne connais pas les codes hexadécimaux de toutes les couleurs. Pour cela, j’utilise un outil que je vous ferai découvrir après vous avoir présenté la dernière méthode. 

La méthode RGB

La méthode RGB est semblable à la méthode hexadécimale, sauf qu’ici, nous indiquerons les quantités de rouge, de vert et de bleu avec des nombres.
Ah oui, au fait juste pour info, on parle de RGB pour Red – Green – Blue, ou en français Rouge – Vert – Bleu, et c’est pour cela parfois que vous verrez dans certains logiciels RVB au lieu de RGB, mais c’est bien la notation RGB qui est utilisée.

Pour écrire la valeur de la propriété CSS color en rgb, nous écrirons par exemple :

				
					/* Fichier activateur.css */

.tests {
    color: rgb(0, 128, 0); /* code rgb du vert */
    width: 300px;
    height: 150px;
    overflow: auto;
}

Bonus Outils 🎉🍾🎊👌🎆🎇😉

Que ce soit pour le code RGB, ou pour le code hexadécimal, afin de choisir et trouver une couleur, il existe de petits outils très pratiques. Pour ma part, j’utilise une extension de Google Chrome ou Firefox qui est ColorZilla. Pour Firefox, ou Chrome, nous avons aussi une extension qui est ColorPicker.

Et si toutefois, vous n’êtes pas fan des extensions, pourtant bien pratiques, vous pouvez classer dans vos favoris le site ColorPicker.fr 

Couleur de fond -Propriété CSS: background-color

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. 

La valeur de cette propriété est comme la propriété color, le nom d’une couleur, un code hexadécimal, ou un code RGB.

Nous l’utiliserons donc ainsi, pour avoir un fond de couleur fuchsia et du texte en bleu : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-color: #FF00FF;
}

Notre fond sera donc maintenant coloré avec cette couleur fuschia ! Aïe, Aïe ça pique les yeux….

Image de l'affichage de la page à laquelle nous donnons la propriété CSS background-color avec la valeur #FF00FF
Affichage de la page à laquelle nous donnons la propriété CSS background-color avec la valeur #FF00FF

Appliquer une image de fond -Propriété CSS: background-image

La propriété CSS qui permet d’afficher une image en fond est background-image.
La valeur de cette propriété CSS, sera une URLcontenant le chemin vers votre image.
Cette URL peut être écrite en absolu ou en relatif.

  • En absolu, cette url sera un lien vers l’adresse ou est hébergée l’image :

 Exemple : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('https://doodleipsum.com/700/flat?i=4a10e0187f00fac8a34a43145778c483');
}
Image de l'affichage du fond avec une image indiquée avec URL en absolu
Affichage du fond avec une image indiquée avec URL en absolu
  • En relatif, nous indiquerons dans l’url, le chemin par rapport au fichier .css. 

 J’ai une image nommée “fond.png” dans un dossier “images” situé dans le même dossier que mon fichier .css (dossier du projet).

Exemple :

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('images/fond.png'); /* URL en relatif */
}
Image de l'affichage du fond avec une URL d'image en relatif
Affichage du fond avec une URL d'image en relatif

Options des images de fond avec plusieurs propriétés CSS

Pour changer le comportement d’une image de fond, plusieurs propriétés CSS sont disponibles :

N’hésitez pas à les essayer au fur et à mesure pour voir les différences entre les différentes valeurs.

Fixer le fond -Propriété CSS: background-attachment

Le fait de fixer le fond, nous permettra de voir comme si le texte glissait sur le fond.

Cette propriété CSS background-attachment peut prendre 2 valeurs possibles : 

  • fixed : l’image de fond reste fixe;
  • scroll: l’image de fond défile avec le texte (par défaut).

Répétition du fond -Propriété CSS: background-repeat

Par défaut, notre image de fond sera répétée en mosaïque. Nous pouvons modifier cela avec la propriété CSS background-repeat qui peut prendre 4 valeurs :

  • no-repeat : l’image ne sera pas répétée, et sera donc unique sur la page.
  • repeat-x : l’image sera répétée uniquement horizontalement sur la première ligne.
  • repeat-y : l’image sera répétée uniquement verticalement sur la première colonne.
  • repeat : le fond sera répété en mosaïque (par défaut).

Position du fond -Propriété CSS: background-position

Lorsque nous ne répétons pas l’image, il peut être intéressant de vouloir la positionner sur notre fond. Nous utiliserons alors la propriété CSS background-position qui prendra 2 valeurs en pixels pour indiquer la position par rapport au coin supérieur gauche de la page.

Nous écrivons alors, par exemple : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('images/fond.png');
    background-repeat: no-repeat;
	background-position: 40px 60px;
}

Ainsi, notre image de fond sera placée à 40 pixels de la gauche et à 60 pixels du haut de la page.

Nous pouvons aussi utiliser comme valeur les positions :

  • top : en haut
  • bottom : en bas
  • left : à gauche
  • center : centré
  • right : à droite

Et nous pouvons également combiner ces mots comme par exemple : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('images/fond.png');
    background-repeat: no-repeat;
	background-position: top right;
}

La super propriété CSS background

Lorsque nous utilisons beaucoup de propriété en rapport avec le fond, comme par exemple : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('images/fond.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
	background-position: top left;
}

Alors nous pouvons combiner toutes ces propriétés avec la super propriété CSS background. 

Nous écrirons alors : 

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
     background: url('images/fond.png') fixed no-repeat top left;
}

Plus simple n’est ce pas ? De plus, nous ne sommes pas obligés de mettre toutes les propriétés. Je veux dire par là que si par exemple nous n’avons pas besoin d’une image fixe, nous pouvons tout simplement ignorer la valeur fixed.

L’ordre des valeurs n’a aucune importance et nous pouvons donc les mettre dans n’importe quel ordre.

C’est le cas également lorsque nous écrivons une règle CSS, les déclarations peuvent se faire dans l’ordre que l’on veut, cela n’a pas d’importance. 

Plusieurs images de fond

Avec CSS3, nous pouvons donner plusieurs images de fond à un élément.

Pour cela, nous séparerons nos déclaration par une virgule comme dans l’exemple suivant :

				
					/* Fichier activateur.css */

body {
    color: blue;
    font-family:Arial, Helvetica, sans-serif;
     background: url('https://doodleipsum.com/700/flat?i=4a10e0187f00fac8a34a43145778c483') fixed no-repeat 900px 200px, url('images/fond.png') fixed ;
}

ATTENTION, il faut cette fois donner un ordre de déclaration à nos images. La première image sera placée par-dessus les autres. Si dans cet exemple, l’image avec l’URL absolu (https:…) serait déclarée après l’autre image (fond.png), nous ne la verrions pas. 

Encore une fois, n’hésitez pas à pratiquer et essayer les différentes valeurs et positions.

Voilà l’affichage que le code ci-dessus produit : 

Image de l'affichage de la page avec plusieurs images dans la propriété CSS background
Affichage de la page avec plusieurs images dans la propriété CSS background

Transparence

Pour utiliser la transparence avec CSS, nous avons à disposition 2 propriétés : 

L'opacité - Propriété CSS: opacity

L’opacité est l’inverse de la transparence. La propriété CSS opacity aura une valeur comprise entre 0 et 1 :

  • 1 représente un élément qui sera complètement opaque (par défaut).
  • 0 représente un élément qui sera totalement transparent.

Ainsi, si nous indiquons une opacité de 0.4, notre élément sera opaque à 40 %.
Nous le codons ainsi : 

				
					/* Fichier activateur.css */

.tests {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 215, 0);
    opacity: 1;
}

Ci-dessus, nous avons indiqué que l’opacity a une valeur de 1.

Cette valeur étant la valeur par défaut, il n’y a donc aucune transparence. 

Si nous avions mis 0 comme valeur à la propriété opacity, nous ne verrions plus le paragraphe car il serait totalement transparent.

Image de l'affichage d'un paragraphe avec un fond or, un texte noir et une opacité de 1
Affichage d'un paragraphe avec un fond or, un texte noir et une opacité de 1 (aucune transparence)

Passons maintenant la valeur de l’opacité à 40 % : 

				
					/* Fichier activateur.css */

.tests {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 215, 0);
    opacity: 0.4;
}
Image de l'affichage d'un paragraphe avec un fond or, un texte noir et une opacité de 0.4
Affichage du paragraphe avec un fond or, un texte noir et une opacité de 0.4

Nous voyons maintenant à quoi nous sert cette propriété.

Par contre nous voyons que lorsque nous appliquons cette propriété CSS opacity à l’élément, c’est tout le contenu de cet élément qui est rendu transparent. Aussi bien le fond que le texte est rendu transparent.

Si nous voulons juste appliquer cette transparence au fond, alors nous utiliserons la propriété suivante qui est RGBa. 

La notation RGBa

Cette notation vous rappelle quelque chose, n’est ce pas ? Oui, nous avons bien la notation RGB avec l’ajout d’un a au bout. Ce a est en fait un quatrième paramètre à la notation RGB, qui s’appelle le canal alpha. Et ce canal alpha représente la transparence de notre couleur.

Ce canal comme la propriété opacity, peut avoir une valeur comprise entre 0 et 1 :

Et là aussi, la valeur 1 représente un élément opaque, et le 0 un élément totalement transparent. Ainsi, si nous reprenons notre exemple, nous pouvons maintenant avec la propriété CSS background-color indiquer : 

				
					/* Fichier activateur.css */

.tests {
    color: rgb(0, 0, 0);
    background-color: rgba(255, 215, 0, 0.4);
}

Et cette fois, l’effet de transparence ne sera appliqué qu’à notre couleur de fond et non plus à tout le contenu.

Image de l'affichage du paragraphe pour lequel nous utilisons la notation rgba sur la propriété CSS background-color
Affichage du paragraphe pour lequel nous utilisons la notation rgba sur la propriété CSS background-color

Les bordures et les ombres

Bordures

Intéressons-nous maintenant aux bordures en CSS.
Les propriétés CSS pour les bordures sont border-width, border-color, border-style,…

Une super propriété CSS border est la plupart du temps utilisée. Il s’agit là aussi de la propriété raccourcie.

Super propriété border

Pour cette super propriété border, nous pouvons donc utiliser jusqu’à trois valeurs :

  • La largeur – Propriété CSS : border-width. Nous indiquerons sa valeur en pixels.
  • La couleur – Propriété CSS: border-color. Comme pour toutes les couleurs, nous pouvons utiliser le nom de la couleur, une valeur hexadécimale, ou une valeur RGB.
  • Le type de bordure –Propriété CSS: border-style. Cette propriété peut prendre les valeurs suivantes : DIAPO 13
    • none : pas de bordure (par défaut),
    • solid : un trait simple
    • dotted: pointillés
    • dashed: tirets
    • double : traits double
    • groove: en relief
    • ridge: autre effet de relief
    • inset: effet 3D enfoncé
    • outset: effet 3D surélevé

Voici une représentation de ces bordures en fonction de la valeur que nous donnons à la propriété CSS border-style : 

Image des différents types de bordures en CSS selon la valeur de la propriété CSS border-style
Les différents types de bordures en CSS selon la valeur de la propriété CSS border-style

Ainsi, pour utiliser notre super propriété CSS border, nous coderons ainsi : 

				
					/* Fichier activateur.css */

h1 {
    border: 2px solid #ff0000;
}

Nous l’avions déjà vu dans les différents exemples que nous avons codés jusqu’à maintenant.
Lorsque nous utilisons cette propriété CSS border, nous voyons que la largeur, la couleur et le style sont appliqués à nos 4 bordures uniformément.

Et si nous voulons qu’une des bordures soit différente des autres ?

Et bien, il existe là aussi en CSS, 4 super propriétés que sont :

  • border-top
  • border-bottom
  • border-left
  • border-right

Exemple : Je veux que chacune de mes bordures soit différente :

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    border-top: 2px solid #ff0000;
    border-right: 5px ridge #0000ff;
    border-bottom: 4px double #ff9900;
    border-left: 10px groove #ff00fb;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
}

Ce code produira l’affichage de notre titre h1 comme ci-dessous. Nous faisons rarement cela, mais il faut savoir que ces propriétés existent et que nous pouvons les utiliser au besoin. 

Image de l'affichage du titre h1 auquel nous avons attribué une bordure différente sur chaque côté
Affichage du titre h1 auquel nous avons attribué une bordure différente sur chaque côté

Et il existe même des propriétés CSS pour ne modifier qu’une valeur comme par exemple :

  • border-top-width
  • border-top-color
  • border-top-style
  • …

Je ne vais pas faire la liste complète, mais je pense que vous avez compris le principe.

Je peux ainsi appliquer ma super propriété CSS border, et si je ne veux modifier que le style de ma bordure du bas, je ferai une déclaration dans ma règle CSS, avec la propriété CSS border-bottom-style. Etc., etc.

Les bordures s’appliquent sur n’importe quel type d’élément d’une page, et donc à toutes les balises HTML.

Bordures arrondies -Propriété CSS: border-radius

CSS 3 a également permis d’arrondir les angles de nos éléments avec une propriété CSS qui est border-radius. Pour la valeur de cette propriété, on l’exprime en pixels en général, mais on peut comme pour le texte mettre également des “em”, ou des %.

Nous écrirons alors : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 20px;
}

La bordure aura donc maintenant un arrondi de 20 pixels pour chaque angle : 

Image de l'affichage du titre h1 avec les angles des bordures arrondis grâce à la propriété CSS border-radius
Affichage du titre h1 avec les angles des bordures arrondis grâce à la propriété CSS border-radius

Mais nous pouvons aussi donner une valeur différente d’arrondi pour chaque coin.

Il suffit alors d’écrire par exemple : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 20px 0 20px 0;
}
Image de l'affichage du titre h1 avec les angles des bordures arrondis avec des valeurs différentes
Affichage du titre h1 avec les angles des bordures arrondis avec des valeurs différentes

Les valeurs correspondent à l’ordre suivant : la première valeur est l’angle en haut à gauche, la deuxième est l’angle en haut à droite, la troisième est l’angle en bas à droite, et la dernière est l’angle en bas à gauche. 

ATTENTION, a bien respecté cet ordre.

Sachez enfin, que comme pour la super propriété CSS border, nous pouvons utiliser une notation raccourcie lorsque nous donnerons la même valeur à l’angle en haut à gauche, et à l’angle en bas à droite, et la même valeur à l’angle en haut à droite et en bas à gauche. (comme dans notre exemple ci-dessus).

Nous pourrons alors utiliser la notation simplifiée ainsi : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 20px 0;/* notation simplifiée */
}

Enfin, pour continuer de jouer avec notre propriété CSS border-radius, sachez que nous pouvons même créer des courbes elliptiques. Pour cela, nous indiquerons 2 valeurs séparées par un slash, ou barre oblique.

Nous écrirons par exemple : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 140px / 50px; /* courbes elliptiques */
}

Le titre h1 ressemblera alors à cela : 

Image du titre h1 sur lequel nous créons une courbe elliptique sur les bordures avec la valeur attribuée à border-radius
Titre h1 sur lequel nous créons une courbe elliptique sur les bordures avec la valeur attribuée à la propriété CSS border-radius

Bien entendu, il faudra tester et réévaluer les valeurs en fonction du rendu que vous souhaitez donner à votre élément. 

Mais nous le voyons aussi, nous pouvons créer des styles vraiment personnalisés grâce aux propriétés CSS et aux valeurs que nous leur donnons.

Les Ombres

Pour les ombres, CSS 3 nous a mis à disposition 2 types d’ombres. Les ombres des boîtes et les ombres du texte. 

Les ombres des boîtes -Propriété CSS: box-shadow

La propriété CSS box-shadow prend 4 valeurs dans l’ordre suivant : 

  • La distance du décalage horizontal de l’ombre.
  • La distance du décalage vertical de l’ombre.
  • L’adoucissement du dégradé.
  • La couleur de l’ombre. 

Par exemple, pour appliquer une ombre grise de 8 pixels de décalages sans adoucissement, nous écrirons : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 30px; 
    box-shadow: 8px 8px 0 #4f4f4f; /* ombre de boite de 8px grise ss adoucissement */
}

Ce code produira cet affichage :

Image du titre h1 sur lequel nous mettons une ombre avec la propriété CSS box-shadow

Nous pouvons ajouter un adoucissement qui sera faible lorsque inférieur au décalage, normal lorsque égal au décalage et élevé si supérieur au décalage. Cet adoucissement est parfois comparé au flou que nous donnons à cette ombre.

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 30px; 
    box-shadow: 8px 8px 20px #4f4f4f; /* ombre de boite de 8px grise avec adoucissement élevé */
}

Voyons maintenant ce que la valeur de cet adoucissement élevé produit : 

Image du titre h1 sur lequel nous mettons une ombre avec un adoucissement élevé

Une cinquième valeur facultative peut être ajoutée : inset . Et dans ce cas, l’ombre sera placée à l’intérieur du bloc, et donnera un effet enfoncé.

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 30px; 
    box-shadow: inset 8px 8px 20px #4f4f4f; /* ombre intérieure avec la valeur inset */
}
Image du titre h1 sur lequel nous mettons une ombre avec le paramètre facultatif inset
Titre h1 sur lequel nous mettons une ombre intérieure avec le paramètre facultatif inset

N’hésitez pas encore une fois à pratiquer, et à jouer avec toutes ces valeurs. Essayer avec des valeurs négatives en ajoutant le signe – devant vos valeurs, et vous verrez alors l’effet produit. 

Les ombres de texte -Propriété CSS: text-shadow

Pour donner une ombre au texte, nous utiliserons la propriété CSS text-shadow. Les valeurs de cette propriété sont les mêmes que pour la propriété CSS box-shadow. 

A vous de tester. 

Exemple : 

				
					/* Fichier activateur.css */

h1 {
    background-color: rgb(255, 255, 255);
    width: 50%;
    margin: auto;
    padding: 15px;
    text-align: center;
    font-family: 'Fuzzy Bubbles', 'Arial', sans-serif;
    border: 2px solid #ff0000;
    border-radius: 30px; 
    box-shadow: 8px 8px 20px #4f4f4f; 
    text-shadow: 3px 3px 4px #4f4f4f; /* ombre de texte */
}

Voyons l’effet produit sur le texte de notre titre h1 : 

Image du titre h1 sur lequel nous mettons une ombre au texte avec la propriété CSS text-shadow
Titre h1 sur lequel nous mettons une ombre au texte avec la propriété CSS text-shadow

Avec cette propriété CSS aussi, n’hésitez pas à jouer avec les valeurs pour obtenir l’affichage que vous souhaitez.

Pause

Nous venons de voir un nouveau gros pavé sur l’utilisation des propriétés CSS, concernant les couleurs, les fonds, les bordures et les ombres.

N’hésitez pas à faire une pause, à boire un café, et nous continuerons ensuite à voir ensemble d’autres propriétés CSS. 

Profitez de cette pause pour vous inscrire sur Activateur Web, pour vous abonnez à ma page Facebook, à ma chaîne YouTube, à liker, à partager, et à commenter. Réaliser cette série m’a pris quelques jours, alors merci de prendre quelques secondes, voir quelques minutes, pour m’encourager à continuer de produire du contenu comme cette série. 

Merci pour cela, et maintenant retournons dans le monde merveilleux de CSS. 😉

N’oubliez pas non plus que la clé est la pratique. Lorsque vous codez, au début, il faudra revenir voir comment utiliser telle ou telle propriété, mais à force de pratiquer, vous ne vous poserez même plus la question et cela se fera de façon spontanée. 

Changement d’apparence en dynamiques - Les pseudo-formats

Avec CSS, nous pouvons également modifier l’affichage de nos éléments de façon dynamique. Nous ferons appel pour cela aux pseudo-formats, ou appelés aussi pseudo-classes.

Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique. Leur comportement correspond à celui d’une classe, mais qui ne s’appliquerait que partiellement ou temporairement. On gagne ainsi en flexibilité, en éliminant du code inutile. Les pseudo-classes / pseudo-formats sont déclarées par un mot clé commençant par deux points ( : )

ATTENTION, certains navigateurs n’interprètent pas toujours bien les pseudo-formats. Donc n’hésitez pas à consulter, comme vous en avez maintenant l’habitude, le site caniuse.

Changer l’apparence au survol -Pseudo-format :hover

Pour utiliser un pseudo-format en CSS, il faudra l’ajouter à la suite du sélecteur de notre règle CSS. 

Hover signifie survoler. Sur nos écrans, cela s’interprète en disant : lorsque la souris passe sur l’élément. Et si par exemple, je veux que lorsque ma souris passe sur mon paragraphe, mon texte change de couleur alors j’écrirai ainsi : 

				
					/* Fichier activateur.css */

/* lorsque je survole les paragraphes le texte sera de couleur verte */
p:hover {
    color: #008000;
}

Après avoir coder cette règle CSS, le texte de vos paragraphes sera maintenant vert, au survol de la souris. 

Ainsi, nous pouvons appliquer un style à notre paragraphe, par défaut, c’est-à-dire lorsqu’il n’est pas survolé, et appliquer un autre style lorsqu’il l’est.

Ici, j’ai appliqué sur mon sélecteur p, mais il est possible de modifier l’apparence, là encore de n’importe quel élément. Il suffit d’y ajouter le pseudo-format :hover.

Attention, comme indiqué précédemment, tous les navigateurs n’interpréteront pas ces pseudo-formats. 

Inutile d’essayer :hover sur un smartphone par exemple. L’effet se produira lorsque vous appuierez sur l’élément et encore pas sûr que cela fonctionne. 

Changer l’apparence au moment du clic -Pseudo-format: :active

Ce nouveau pseudo-format :active est en général utilisé sur les liens. Mais attention, car le changement d’apparence n’est visible que très peu de temps. Normal puisqu’il se produit uniquement au moment du clic !
Par exemple, nous pouvons faire ceci : 

				
					/* Fichier activateur.css */

/* lorsque je clique sur les liens, le texte sera de couleur violet et le fond sera jaune */
a:active {
    color: rgb(208, 0, 255);
    background-color: #ffff00;
}

Comme dit précédemment les liens ne changent d’apparence que lorsque nous cliquons dessus. Vous pouvez voir cet effet en maintenant le clic sur un lien, et dès que nous relâchons le clic, alors le lien revient à son état d’origine.

Changer l’apparence lorsque l’élément est sélectionné -Pseudo-format: :focus

Ce pseudo-format est souvent utilisé dans les formulaires, afin d’indiquer à l’utilisateur, le champ sur lequel il se trouve. Mais il peut être appliqué à d’autres éléments également. À la différence de :active, la pseudo-classe :focus réagit dès que l’élément a reçu un clic dessus, et par conséquent, il reste sélectionné.

Pour l’exemple, créons un mini formulaire en html. Codons cela, après le titre h1 : 

				
					<!-- Fichier index.html -->

<form>
    <input class="prenom" value="Rouge si focus">
    <input class="nom" value="Vert si focus">
</form>
				
			
				
					/* Fichier activateur.css */

form {
    width: 50%;
    margin: 50px auto;
}
/* si focus texte blanc sur fond rouge  */
.prenom:focus {
    background-color: #ff0000;
    color: rgb(255, 255, 255);
}

/* si focus texte jaune sur fond vert */
.nom:focus {
    background-color: #008000;
    color: #ffff00;
}

Maintenant, dès que nous cliquons dans un des champs du formulaire, il reçoit par conséquent le focus, et s’affiche en rouge pour le premier, et en vert pour le deuxième : 

Image de l'affichage du formulaire avec un focus dans le 1er champ qui change d'apparence avec le pseudo-format CSS :focus
Formulaire avec un focus dans le 1er champ qui change d'apparence avec le pseudo-format CSS :focus

Changer l’apparence lorsque le lien a déjà été consulté -Pseudo-format: :visited

Lorsque vous créez un lien, il a par défaut un style différent. Et lorsque vous cliquez dessus, il change d’apparence pour signifier qu’il a déjà été visité. La plupart du temps, il devient bleu violet. Nous pouvons changer cette couleur en appliquant le pseudo-format :visited. 

Cette pseudo-classe :visited est un peu particulière. Je vous l’ai dit, elle permet de modifier l’aspect d’un lien après que l’utilisateur l’a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent donc être utilisées avec, sont donc restreintes.

À savoir également que sa mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens (Comme :link, :hover, :active).

Pour éviter cet écrasement, il faudra ordonner les pseudo-classes. Le pseudo-format :visited doit être utilisé après une règle basée sur :link, mais avant les règles basées sur :hover, et  :active. 

D'autres pseudo-classes

De nombreux autres pseudo-formats existent, et je ne pourrais pas ici vous en dresser toute la liste. 

Vous pouvez retrouver cette liste de pseudo-classes sur MDN.

N’hésitez pas à pratiquer pour comprendre toutes les subtilités de ces différentes pseudo-classes.

Conclusion

N’hésitez pas, en complément de cette série, à aller voir mes autres séries, notamment celle consacrée à l’utilisation des propriétés Flexbox en CSS. Je ne suis pas revenu sur le concept des boîtes en CSS, car je pense que l’utilisation de Flexbox en CSS permet de comprendre ce concept. Une autre série également à suivre, suite de ce tutoriel est ma série sur comment transformer une maquette en site web avec HTML et CSS. Elle permet de créer un site web en partant d’une maquette, et de mieux comprendre l’organisation du HTML avec les balises sémantiques, et comment appliquer des styles particuliers avec l’utilisation du CSS.

Ce tutoriel arrive à sa fin. Il existe un tas d’autres propriétés en CSS, mais nous avons malgré tout vu les principales pour commencer à coder en CSS.

Dans le développement de mes projets, j’en apprends encore tous les jours, et je n’hésiterai pas à venir mettre à jour ce tutoriel, pour vous faire découvrir ces autres propriétés CSS.

Pratiquez !

Et comme je le dis souvent, c’est en étant bûcheron que Léonard De Vinci !! 😂🤡
C’est donc en pratiquant et en pratiquant encore qu’on apprend et qu’on retient les choses. Au début, vous devrez revenir sur certaines propriétés, et puis au fur et à mesure, vous verrez que vous n’aurez plus besoin de faire une recherche, et que vous les appliquez naturellement dans le code de vos projets. 

Retour apprécié

J’espère que ce tutoriel aura pu vous faire découvrir et vous intéresser au monde merveilleux du développement web. 

Si c’est le cas, ou si vous souhaitez être averti des prochains tutoriels, merci de prendre quelques secondes, ou minutes, pour vous inscrire sur Activateur Web, pour vous abonnez à ma page Facebook, à ma chaîne YouTube, à liker, à partager, et à commenter. Réaliser cette série m’a pris quelques jours, alors merci de prendre quelques secondes, voir quelques minutes, pour m’encourager à continuer de produire du contenu comme cette série. 

Dites moi aussi, via les commentaires, les sujets que vous aimeriez voir abordés sur ce blog.

A très vite...

Je vous donne rendez-vous pour un prochain tutoriel.
En attendant, prenez soin de vous et surtout restez curieux.

Activateur Web
Activateur Web
Créateur et administrateur du site Activateur Web. Développeur web indépendant et passionné, j'aime partager et échanger sur beaucoup de sujets.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

Développeur indépendant

Passionné par le développement web, j’aime créer les contenus web qui permettent à mes clients d’obtenir une marque, un style, un site à leur image.

Catégories
Les catégories d’articles
Mes Articles Préférés
Retrouvez Moi
Sur YouTube
Ma Chaine YouTube Activateur Web

Sur ma chaine Youtube, je partage avec vous sur différents sujets.

Sur Facebook
Liens Amis
Le Fouet Enchanté
Site e-commerce Le Fouet Enchanté
Me rendre sur le site
A découvrir

, , ,

Logo Rond Activateur Web
Mentions Légales

Politique de confidentialité

Politique de cookies(UE)

Facebook Instagram Youtube Github Linkedin

Connectez Vous à votre compte