CREATION D'UN SITE WEB AVEC HTML ET CSS

II. MISE EN FORME DU SITE AVEC CSS

CSS signifie Cascading Stylesheets, soit « feuilles de style en cascade ». Il a été créé en 1996 et a pour rôle principal de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles. Css s’occupe de la mise en forme, l’embellissement du site (couleur, alignement, bordures etc.).

Cependant, beaucoup confondent les fonctions respectives du HTML et du CSS et utilisent un langage pour faire le travail de l’autre. En l’occurrence, c’est le HTML qui est souvent utilisé à mauvais escient, pour mettre en forme du contenu or que c’est le travail du Css. N’oubliez jamais ceci : Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS : c’est une mauvaise pratique.

II.1 GENERALITES

Dans html, on utilise des balises et dans Css, ce sont des propriétés qui sont utilisées.

II.1.1 Structure du code CSS

Les feuilles de style en CSS sont constituées de règles. Chacune des règles est en trois parties :

Le sélecteur, qui indique au navigateur quelle partie du document est affectée par la règle ;
La propriété, qui spécifie quel aspect de l'affichage est paramétré et
la valeur, qui indique la valeur de la propriété de style.

Schématiquement, le code CSS a la structure suivante :

Html a plusieurs éléments, le sélecteur permet de préciser à quel élément html on veut appliquer les propriétés contenues entre accolades. Donc un sélecteur permet de cibler un élément HTML.
Si par exemple, on veut les appliquer aux paragraphes, le sélecteur sera p :

Cela veut simplement dire que les propriétés ci-dessous vont s’appliquer uniquement aux paragraphes.

On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole « deux-points » ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ). A part les noms de balises html, il existe d’autres sélecteurs qu’on verra plus loin. Maintenant que nous savons comment écrire les codes CSS, voyons où les écrire...

II.1.2 Où écrit-on le code CSS

Avant d’aborder le sujet, copier-coller ce code html dans votre éditeur de texte :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
    </head>
    <body>
         <h1>AVANT PROPOS  </h1> 
                
         <h2>WISSEN  CORPORATION  </h2>      
         <p>C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement qui se sont fixés
         plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en mathématique.  </p>
         
         <p> Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu, car si celle-ci est douée de muscles 
         puissants, elle n’a pas de personnalité » …<br/>
        Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est le travail qui nous différencie. <br/> 
        Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes. </p>        
        
        <p>Il y a une naissance en toute connaissance, Thucydide a dit : « Avoir des connaissances sans les partager, c’est se mettre 
        au niveau de celui qui n’a pas d’idées ». Wissen Corporation est là pour assurer votre formation, votre encadrement suivant vos 
        désirs. </p>         
    </body>
</html>

L’aperçu de cette page est :

On peut écrire le code CSS dans trois endroits différents :

a) Directement dans la balise concernée

Si je souhaite que le dernier paragraphe soit en bleu, je vais me rendre directement à la balise concernée (ici p), dans la balise ouvrante, j’ajoute l’attribut style et c’est là que j’écrirai les propriétés à appliquer à cette balise.

Sachez que la propriété qui permet de changer la couleur est Color, la couleur bleue c’est blue. Le code devient :

Et voilà, le dernier paragraphe est en bleu :

Et si on mettait le titre en rouge ?
La procédure est la même, ajouter l’attribut style à la balise et on met Color : red (red c’est rouge en anglais)

Et voilà :

Imaginez-vous que votre page a cinquante paragraphes et vous voulez qu’ils soient tous en bleu, avec cette méthode, vous serez obligé d’écrire le même code dans les cinquante paragraphes : Avouez que c’est fatiguant !!! c’est pour cette raison que cette méthode n’est pas recommandée.

b) Dans l’en-tête <head></head> du fichier html

On ajoute la balise <style> </style> dans <head> </head>

Reprenons l’exemple précédent, enlever le code CSS que nous avons ajouté au dernier paragraphe et au titre h1. Nous voulons maintenant que le titre soit en jaune et le paragraphe en bleu.

On peut voir le résultat :

On voit que tous les paragraphes sont en bleu. L’explication à cela est très simple : Souvenez-vous que la syntaxe du code CSS est:
Nous avions vu que le sélecteur permet d’indiquer les éléments html auxquels appliquer les propriétés entre accolades. Dans le cas des paragraphes, on a écrit :

Le sélecteur ici est <p>, c’est-à-dire la propriété s’applique à tous les paragraphes : c’est pourquoi ils sont tous en bleu.
Cette méthode est moins recommandée.

c) Dans un fichier CSS

On va écrire le code CSS dans un fichier css (ayant l’extension .css)

Commençons par créer un nouveau projet dans notre éditeur de texte et mettez-y le code suivant :


p
{
  color:green;
}

h1
{
  color:yellow;
}

Enregistrez-le sans oublier avec l’extension .css

Nommez-le comme bon vous semble, pour ma part, je l’ai appelé forme.css

Maintenant, pour que ce qu’on écrira dans forme.css aie effet dans le fichier html, on doit créer le lien entre les deux fichiers.

Pour associer les deux fichiers, on écrit ceci dans l’en-tête du fichier html (dans <head> </head>) :

NomFichier représente le nom de votre fichier css.
Pour notre exemple
Fichier html

Dès que le lien est créé, tout ce qu’on fera dans forme.css prendra effet dans formation.html comme le montre la figure suivante :

Il est inutile d'ouvrir directement le fichier forme.css dans le navigateur. Il faut ouvrir le fichier Formation.html (il fera automatiquement appel au fichier forme.css).

C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier : elle est la méthode recommandée, donc nous allons l’utiliser pour la suite du cours.

Sachez qu’une feuille de style (fichier css) est applicable à une infinité de documents HTML, ce qui en facilite la maintenance et réduit les temps de chargement.

II.1.3 Les commentaires en CSS

Nous avons parlé des commentaires en HTML, il est également possible d’insérer des commentaires en CSS. La syntaxe est la suivante :

Exemple
Forme.css


/*Ce style s'appliquera à tous les paragraphes */
p
{
  color:red;
}

On peut les placer partout entre les règles, voire au sein des règles (mais pas entre une propriété et sa valeur) comme le montre suivant :

II.1.4 Appliquer un style particulier avec id et class

Reprenons notre exemple :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
         <h1>AVANT PROPOS  </h1> 
                
         <h2>WISSEN  CORPORATION  </h2>      
         <p>C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement qui se sont fixés
         plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en mathématique.  </p>
         
         <p> Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu, car si celle-ci est douée de muscles 
         puissants, elle n’a pas de personnalité » …<br/>
        Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est le travail qui nous différencie. <br/> 
        Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes. </p>        
        
        <p>Il y a une naissance en toute connaissance, Thucydide a dit : « Avoir des connaissances sans les partager, c’est se mettre 
        au niveau de celui qui n’a pas d’idées ». Wissen Corporation est là pour assurer votre formation, votre encadrement suivant vos 
        désirs. </p>         
    </body>
</html>

Forme.css


/*Ce style s'appliquera à tous les paragraphes */
p
{
  color:blue;
}

En ouvrant Formation.html, on obtient :

On voit que tous les paragraphes sont en bleu, que faire si l’on souhaite que le dernier paragraphe soit en rouge et les autres en bleu ?

C’est là qu’interviennent les attributs class et id. Ils permettent de donner un nom particulier à une balise pour pouvoir lui appliquer un style particulier dans CSS.

Dans notre cas, on ajoute l’attribut class à la balise <p> du dernier paragraphe :

Je l’ai appelé Troisieme, libre à vous de le nommer comme bon vous semble. On a donné un nom à la balise

du troisième paragraphe, maintenant on a la possibilité de lui appliquer un style différent des autres balises

Sur ce, on va dans css, on écrit :



p
{
  color:blue;
}

.Troisieme
{
  color: red;
}

J’espère que vous avez remarqué le point (.) devant le nom du sélecteur Troisieme !!!!

Ce code peut être expliqué comme ceci : je veux que tous les paragraphes soient en bleu, sauf celui qui s’appelle Troisieme qui doit être en rouge, la figure suivante montre le résultat :

L’attribut id fonctionne de la même façon que class, la seule différence est que deux attributs class dans deux endroits différents peuvent avoir la même valeur, ce qui n’est pas le cas pour l’attribut id, on ne peut pas trouver deux attributs id avec la même valeur dans une page.

Si vous avez utilisé l’attribut class, pour l’identifier dans Css, il faut faire précéder le nom de class de point (.), dans le cas de l’attribut id, on le fait précéder de dièse (#) :

Utilisez l’attribut id pour les éléments uniques de votre page.
Sachez que l’attribut id a plus de poids que l’attribut class en cas de conflit pour déterminer un style particulier.

II.1. 5 Les balises universelles

Créer un nouveau projet et écrivez le code suivant :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Page 1</title>
        <link rel="stylesheet"   href="forme.css"  />    
    </head>
    <body>
         <h1> A PROPOS </h1>
         <p> Je m'appelle Aimé DIUMI DIKOLO, <br/>
         je suis co-fondateur de Wissen Corporation</p>
      
    </body>
</html>

Enregistrez-le avec l’extension html
Créer un autre et mettez-y ceci :



p
{
  color:blue;
}

Enregistrez-le en le nommant forme.css
Le résultat :

Et si on veut que Aimé DIUMI DIKOLO soit en rouge ? Pas moyen de le faire car Aimé DIUMI DIKOLO n’est pas entouré des balises.

Heureusement, qu’on a inventé deux balises qui n’ont pas une signification particulière : Span et div, elles servent à entourer un mot ou un bloc qui au départ n’était pas entouré par des balises pour lui donner un style voulu.

Span : est de type inline, c’est-à-dire qu’elle se place à l’intérieur des autres balises pour sélectionner certains mots uniquement (dans un paragraphe par exemple)
Div : est de type block, elle permet de sélectionner un bloc de texte et elle provoque un retour à la ligne automatique.

Dans notre cas, nous allons utiliser span car on doit sélectionner quelques mots dans un paragraphe : On entoure Aimé DIUMI DIKOLO des balises span sans oublier l’attribut class pour lui donner un nom particulier.

Si vous ouvrez le fichier, vous verrez qu’il n’y aura aucun changement car la balise span n’a aucun effet particulier. Maintenant, que le nom est entouré d’une balise, on peut lui appliquer un style grâce au CSS :



p
{
  color:blue;
}

.nom
{
  color:red;
}

On peut voir le résultat :

Le reste du texte est en bleu, sauf Aimé DIUMI DIKOLO est en rouge.

Retrouvez ce cours en version pdf
Télécharger

Retrouvez ce cours en version pdf
Télécharger

I. NOTIONS DE BASE EN HTML
I.1 INTRODUCTION
I.2 LES BALISES ET LES ATTRIBUTS
I.2.1 Les balises
I.2.2 Les attributs
I.3 STRUCTURE DE BASE D’UNE PAGE HTML
I.4 ENREGISTREMENT D’UN FICHIER HTML
I.5 Commentaires en HTML
I.6.ORGANISATION DU TEXTE
I.6.1 Le retour à la ligne
I.6.2 Les paragraphes
I.6.3 Les titres
I.6.4. Les éléments em, mark et strong
I.6.5 Les listes
I.7 LES IMAGES
I.8.LES LIENS
I.8.1. Lien vers une autre page du site
I.8.2 Lien vers un autre site
I.8.3 Lien vers une ancre (point de repère)
I.8.4 Lien pour télécharger un fichier
I.8.5 Lien pour envoyer un email
I.9 L’AUDIO ET LA VIDEO
I.9.1 L’audio
I.9.2 La vidéo
II. MISE EN FORME DU SITE AVEC CSS
II.1 GENERALITES
II.1.1 Structure du code CSS
II.1.2 Où écrit-on le code CSS
II.1.3 Les commentaires en CSS
II.1.4 Appliquer un style particulier avec id et class
II.1. 5 Les balises universelles
II.2 LES SELECTEURS AVANCES
a) Appliquer le même style à plusieurs éléments
b) * : Le sélecteur universel
c) A B : sélectionne une balise B contenue dans A
d) A+B : une balise B qui suit la balise A
e) A[Attribut] : sélectionne une balise contenant un attribut donné
f) A[Attribut="Valeur" ]
g) A[attribut*= "Val"]
h. A > B : sélectionne B qui est enfant (descendant) direct de A
i. A~B : sélectionne tous les éléments B précédés par l’élément A.
j. A[b^="c"]
k. A[b$="c"]
l. A[b*="c"]
II.3 NOTION D’HERITAGE EN CSS
II.4 MISE EN FORME DU TEXTE
II.4.1 La taille du texte
II.4.2 La police
II.4.3 L’italique
II.4.4 Mettre le texte en gras
II.4. 5 Le soulignement du texte
II.4.6 L’alignement du texte