CONTRIBUTION DU CSS

 

Introduction

Pour améliorer la présentation d’un site Web, on utilise les feuilles de style en cascade (CSS) en anglais Cascade Style sheets. Le CSS est un langage qui vient compléter le html pour permettre une mise en forme de la page web. Il existe plusieurs versions : CSS1, CSS2 et CSS3.

 

Son rôle : Gérer la mise en forme du site c.-à-d. :

- choisir la couleur du texte.

- sélectionner la police utilisée sur le site.

- définir la taille du texte, les bordures, le fond...

- faire la mise en page du site, etc.

 Pour le codage, HTML s'occupe du gros-œuvre (la structure), tandis que CSS fait les finitions (la présentation).Le CSS est venu compléter le HTML en 1996 par le CSS working group.

 

I-MISE EN PLACE DU CSS

On peut écrire du code en langage CSS à 3 endroits différents d’une page web :

 

·        Directement dans les balises (non recommandé)

On peut ajouter un attribut style à n'importe quelle balise. On insère le code CSS directement dans cet attribut.

 

Code : HTML

 

<p style="color : blue;">Ce texte est de couleur bleue</p>

 

Seule la balise du premier paragraphe qui contient le code CSS est concernée par ce code qui impose une couleur bleue au texte.

 

Le navigateur donne :

Ce texte est de couleur bleue

Il existe une autre méthode pour utiliser du CSS dans les fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style>à l'intérieur de l'en-tête <head>.

Code : HTML

<html>

         <head>

<style>// Début du code CSS inséré dans le document HTML

P

{

color: blue;

}

</style>                         // Fin du code CSS

            <title>Ma première page avec CSS</title>  

 

</head>

<body>

            <p>

              Ma première page avec le CSS<br/>

            Bienvenue sur ma première page avec CSS<br/>

            Ici vous pouvez voir le CSS à l'œuvre </p>

</body>

 

</html>

 

 

Ici, le code CSS a été placé dans la section « head » et il s'applique donc à la totalité de la page. Ainsi, toute la page sera affichée en bleu.

            Le navigateur affiche :

 

            Ma première page avec le CSS

            Bienvenue sur ma première page avec CSS

            Ici vous pouvez voir le CSS à l'œuvre

         Le plus souvent on écrit du code CSS dans un fichier spécial ayant l'extension .css(contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus flexible. Çaévite de tout mélanger dans un même fichier.

Code : HTML

<html>

<head>

<link rel="stylesheet" href="style.css" />

<title>Premiers tests du CSS</title>

</head>

<body>

<h1>Mon super site</h1>

<p>Bonjour et bienvenue sur mon site !</p>

<p>Pour le moment, mon site est un peu <em>vide</em>.<br/>

Patientez encore un peu !</p>

</body>

</html>

 

 

         La ligne <link rel="stylesheet" href="style.css" /> indique que ce fichier HTML va être associé à un fichier appelé style.css qui va gérer sa mise en forme.

On enregistre ce fichier avec le nom qu’on veut (par exemple page.html).

 Après on crée un nouveau fichier vide dans l’éditeur de texte et on y copie le code CSS suivant :

Code: CSS

p

{

color: blue;

}

 

 

 

Enfin on l’enregistre sous le nom qui figure dans l’attribut href de la ligne :<link rel="stylesheet" href="style.css" />. Pour cet exemple, on l’enregistre avec le nom style.

En pratique, dans un code CSS, on trouve 3 éléments différents :

-Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si on veut modifier l'apparence de tous les paragraphes <p>, on doit écrire p.

-Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriétécolorqui permet d'indiquer la couleur du texte.

-Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nomde la couleur, blue par exemple.

balise

{

propriété: valeur;

propriété: valeur;

propriété: valeur;

propriété: valeur;

}

Ainsi donc, on écrit le nom de la balise (par exemple h1), et on ouvre des accolades pour y mettre les propriétés et valeurs que l'on veut à l'intérieur. 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 sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;).

On enregistre le fichier en lui donnant un nom qui se termine par .css, comme style.css par exemple, ensuite on le place dans le même dossier que le fichier .html.

NB : La dernière méthode est celle utilisée par la majorité des webmasters parce que lorsque le site est constitué de plusieurs pages HTML, la modification est facile.

En effet, lorsqu’on place le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML du site ! Et si plus tard on change d'avis, par exemple si on veut que les paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un !

II-DES COMMENTAIRES DANS DU CSS

Pour faire un commentaire, on tape /*, suivi du commentaire, puis*/ pour terminer le commentaire.Les commentaires peuvent être écrits sur une ou plusieurs lignes.

Syntaxe : /*………………………………………*/

 

Code : CSS

P

{

color: blue; /* Les paragraphes seront en bleu */

}

 

 

III-ATTRIBUTS SPECIAUX

         Lorsqu’on veut que seulement certains paragraphes soient écrits d'une manière différente, on peut utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :

L'attribut class : indique le nom de la classe CSS à utiliser.

L'attribut id : donne un nom à la balise.

 

 

Code: HTML

 

<h1 class="……………………………………………………….."></h1>

<p class="…………………………………………………………"></p>

<img class="………………………………………………………." />

 

A l’intérieur des guillemets, on doit écrire un nom qui sert à identifier la classe CSS.

Par exemple, supposons qu’on veuille donner un nom « présentation » au premier paragraphe :

 

Code : HTML

<p class="présentation">Bonjour et merci de votre visite sur mon site !</p>

Maintenant le paragraphe est identifié. Il a un nom : présentation. On doit pouvoir réutiliser ce nom dans le fichier CSS pour dire : "Je veux que seules les balises qui ont comme nom présentation soient affichées en bleu ".

Pour faire cela en CSS, on indique le nom de la classe en commençant par un point, comme ceci :

Code : CSS

 

.présentation

{

color: blue;

}

 

Seul le paragraphe appelé "présentation" va s'afficher en bleu !

 

Il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code.

En pratique, on ne mettra des id que sur des éléments qui sont uniques sur la page, comme par exemple le logo ou la table de matière.

 

Code : HTML

 

<img src="images/logo.png" alt="Logo du site" id="logo" />

 

Si on utilise des id, dans le CSS il faudra faire précéder le nom de l'id par un dièse (#) :

 

Code : CSS

#logo

{

/* Dimension du logo */

Width=’’32’’

Height=’’32’’

}

 

IV- BALISES UNIVERSELLES

Il arrivera parfois qu’on veuille appliquer un class (ou un id) à certains mots qui ne sont pas à l'origine entourés par des balises .Par exemple, si on veut modifier uniquement "bienvenue" dans le paragraphe suivant :

Code : HTML

<p>Bonjour et bienvenue sur mon site !</p>

Ça serait facile à faire s'il y avait une balise autour de "bienvenue", malheureusement il n'y en a pas. Pour résoudre le problème,on a inventé 2 balises dites universelles (ou génériques) qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important par exemple).

 

         C'est une balise que l'on place au sein d'un paragraphe de texte,pour sélectionner certains mots uniquement.Les contenus des balises de type inline sont affichés les uns à la suite des autres sur la même ligne (de la gauche vers la droite).

Code  HTML :

<p>Bonjour et <span class="salutations">bienvenue</span>sur mon site !</p>

Code CSS:

.salutations

{

color: blue;

}

 

 

Ici, seul le mot « bienvenue » sera en bleu.

Le navigateur affiche :

Bonjour et bienvenue sur mon site

NB : Les balises <strong>et <em>sont de la même famille. Ces balises s'utilisent au milieu d'un paragraphe, et nous permettent de donner un aspect différent à certains mots.

 

 

C’est une balise de type block qui entoure un bloc de texte.Les contenus des balises de type block sont affichés les uns au-dessus des autres.

 

Code HTML:

<div id="music">

<h1>Ma dernière  chanson</h1>

<p> C’est celle que  j’aime</p>

<p>le 12 mai à 23h12</p>

</div>

 

Code CSS :

#music

{

width: 28%;

}

 

 

NB : Les balises de la même famille sont <p>,<h1>, etc. Ces balises ont quelque chose en commun : elles créent un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. <div>est une balise fréquemment utilisée dans la construction d'un design.

V- PROPRIETES DU CSS

1-La taille

Pour modifier la taille du texte, on utilise la propriété CSS font-size.

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, on doit écrire :

Code CSS :

font-size: 16px;

Les lettres auront une taille de 16 pixels.

On peut utiliser les mots anglais pour indiquer la taille :

xx-small : minuscule

x-small : très petit

small: petit

medium: moyen

large: grand

x-large : très grand

xx-large : gigantesque.

Code CSS :

p{

font-size: small;

}

 

Autres techniques :

Si on écrit 1em, le texte a une taille normale.

Si on veut grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.

Si on veut réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.

Code  CSS :

p

{

font-size: 0.8em;

}

h1

{

font-size: 1.3em;

}

 

2-la police

La propriété CSS qui permet d'indiquer la police à utiliser est font-family. On doit écrire le nom de la police comme ceci :

Code CSS :

balise

{

font-family: police;

}

 

Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police dans son ordinateur, on précise en général plusieursnoms de police, séparés par des virgules :

Code  CSS :

balise

{

font-family: police1, police2, police3, police4;

}

 

Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la police3 et ainsi de suite.

En général, on indique en tout dernier serif, ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).

Code CSS:

p{

font-family: Impact, "Arial Black", Arial, Verdana, serif;

}

 

En général, il est bien d'indiquer un choix de 3-4 polices (+ serif) afin de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.

3-Italique, gras, souligné...

3.1-Mettre en italique

Concrètement, pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :

italic : le texte sera mis en italique.

oblique : le texte sera aussi mis en italique (en penchant les lettres).

normal : le texte sera normal (par défaut).

Pour mettre en italique tous mes titres <h2>:

Code  CSS :

h2

{

font-style: italic;

}

 

 

3.2-Mettre en gras

La propriété CSS pour mettre en gras est font-weight, et prend les valeurs suivantes :

bold : le texte sera en gras.

normal : le texte sera écrit normalement (par défaut).

Voici par exemple comment écrire les titres en gras :

Code CSS:

h1

{

font-weight: bold ;

}

 

3.3-Soulignement et autres décorations

Cette propriété CSS porte bien son nom : text-decoration. Elle permet entre autres de souligner le texte, mais passeulement.

Voici les différentes valeurs qu'elle peut prendre :

underline : souligné.

line-through : barré.

overline: ligne au-dessus.

blink : clignotant. Ne marche pas sur tous les navigateurs (Internet Explorer et Google Chrome notamment).

none : normal (par défaut).

Ce code CSS va vous permettre de tester les effets de text-decoration :

Code  CSS :

.souligne

{

text-decoration: underline;

}

 

3.4-L'alignement

 On utilise la propriété text-align, et on indique l'alignement désiré :

left : le texte sera aligné à gauche (c'est le réglage par défaut).

center : le texte sera centré.

right: le texte sera aligné à droite.

justify : le texte sera "justifié".

Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sanslaisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.

Code  CSS :

 

.signature

{

text-align: right;

}

 

4-La couleur et le fond

4.1-Couleur du texte

La propriété qui permet de modifier la couleur du texte estcolor. Les différentes façons d’indiquer la couleur sont :

La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom.Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard".

Pour passer tous les titres en marron, on peut donc écrire :

Code  CSS:

h1

{                                                              

color: maroon;

}

 

 C’est une combinaison de lettres et de chiffres qui indiquent une couleur.

Exemple : #FF5A28

On doit toujours commencer par écrire un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F.

Ces lettres ou chiffres fonctionnent deux par deux. Les 2 premiers indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les 2 derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.

Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche.

Voici par exemple comment on fait pour appliquer la couleur blanche en hexadécimal sur les paragraphes :

Code CSS:

P

{

color: #FFFFFF;

}

 

Ici, on doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur. Cette méthode est utilisée dans le logiciel de dessin comme Paint.

Exemple :#ab76c2

4.2-Couleur de fond

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

Code  CSS :

body

{

background-color: black; /* Le fond de la page sera noir */

color: white; /* Le texte de la page sera blanc */

}       

 

5-Les bordures et les ombres

5.1-Bordures standard

On utilise border qui possède3 valeurs pour modifier l'apparence de la bordure :

La largeur : mettre la largeur de la bordure en pixels (comme 2px).

La couleur : donner une couleur à la bordure.

Le type de bordure : préciser le type de bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc...

 Voici les différentes valeurs disponibles :

none: pas de bordure (par défaut)

solid : un trait simple.

dotted: pointillés.

dashed: tirets.

double: bordure double.

groove : en relief.

ridge: autre effet relief.

inset: effet 3D enfoncé.

outset: effet 3D surélevé.

Ainsi, pour avoir une bordure bleue en tirets de 3 pixels autour des titres, on va écrire :

Code CSS:

 

h1

{

border: 3px blue dashed ;

}

En haut, à droite, à gauche, en bas...

Dans ce cas, on doit utiliser ces 4 propriétés :

border-top : bordure en haut.

border-bottom : bordure en bas.

border-left : bordure à gauche.

border-right : bordure à droite.

 

Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc :

Code CSS:

 

p

{

border-left: 2px solid black;

border-right: 2px solid black;

}

 

5.2-Bordures arrondies

La propriété border-radius va nous permettre d'arrondir les angles de n'importe quel élément facilement. Il suffit d'indiquer la taille ("l'importance") de l'arrondi en pixels :

Code  CSS :

p

{

border-radius: 10px 5px 10px 5px;

}

Code  CSS :

Les valeurs correspondent aux angles suivants dans cet ordre :

1. En haut à gauche

2. En haut à droite

3. En bas à droite

4. En bas à gauche

5.3-Les ombres

La propriété box-shadow s'applique à tout le bloc et prend 4 valeurs dans cet ordre :

1. Le décalage vertical de l'ombre

2. Le décalage horizontal de l'ombre

3. L'adoucissement du dégradé

4. La couleur de l'ombre

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

Code  CSS :

P

{

box-shadow: 6px 6px 0px black;

 

}

 

VI-MISE EN PAGE D’UNE PAGE WEB

         En général, une page web est constituée d’un en-tête tout en haut de la page (header), des menus de navigation en haut ou sur les côtés (nav), des différentes sections au centre (section) et d’un pied-de-page en bas (footer)

Les balises structurantes de html5 

<header> : en-tête

<footer> : pied -de- page

<nav> : principaux liens de navigation

<section> : une section de la page. Elle sert à regrouper des contenus en fonction des thèmes qu’ils traitent.

<aside> : informations complémentaires. Elle est conçue pour contenir des informations complémentaires au document qu’on visualise.

<article> : un article indépendant sert à englober une portion généralement autonome de la page.

 

 

 

EXERCICES

CONTROLE DES CONNAISSANCES

1-Quel est le rôle du CSS ?

2-Citer 02 balises universelles en CSS

3-Quels sont les deux attributs spéciaux utilisés en CSS ?

4-Citer 02 balises de type inline en CSS.

5-Citer 02 balise de type block en CSS.

6-Quel avantage a-t-on à placer le code CSS dans un fichier spécial ayant l’extension .css ?

7-Le CSS vient combler une lacune de html. Laquelle ?

EXERCICE I :                                                                                         

1.   Donner deux balises structurantes d’une page Web tout en donnant leur rôle.

2.   Que signifie : URL ?                                                                               

3.   Laquelle de ces balises html est-elle correctement écrite ? :

a)   < ! Commentaire> ;          b) < !-Commentaire-> ;         c) < !--Commentaire--> 

4.   Enoncer deux limites du langage HTML.                                                         

5.   Que fait ce code :                                                                                   

<head> 

<style> 

P, h3

{ color : bleu ;

   Font-style : italic ;}

</style> 

</head> 

Citer deux versions du CSS que vous connaissez. 

EXERCICE III : Associer les éléments de la colonne A à ceux de la colonne B.

Colonne A

Colonne B

1-<h1>

2- <id>

3-<span>

4-<aside>

5-<border>

a-est une balise de type inline

b- est une balise de type block

c- est une balise structurante du CSS

d-ajoute une bordure en CSS

e-est un attribut spécial en CSS

 

EXERCICE IV : Donner le code HTML et CSS de la page web suivante :

 

MA  PREMIERE  LEÇON DE  PROGRAMMATION  WEB

Le langage HTML

Le HTML est un langage qui permet de présenter des informations sur Internet et dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.HTML a été inventé en1991 par un scientifique nommé Tim Berners-Lee. 

Lorsqu’on regarde une page sur internet, ce qu’on voit est l’interprétation par le navigateur du code HTML.

Le langage CSS

Pour améliorer la présentation d’un site Web, on utilise  les feuilles de style en cascade (CSS) en anglais Cascade Style sheets. Le CSS est un langage qui vient  compléter le html pour  permettre de mettre en forme la  page web. Il existe plusieurs versions : CSS1, CSS2 et CSS3.

Rectangle : coins arrondis: Copyrigth Yaoundé le 1er Juin 2018
 

 

 

 

 

 

 


CORRIGES

CONTROLE DES CONNAISSANCES

1-Permet de gérer la mise en forme d’une page web.

2-<span>et<div>.

3-<class>et<id>

4-<span> ;<strong> ; <em>.

5-<div> ;< p> ;< h1>

6-Facilité de modification et de mise à jour

7-Bonne mise en forme d’une page web.

 

EXERCICE I :

1. <header> : permet d’insérer l’entête de la page ;

     <footer> : permet d’insérer un pied-de-page.

2. URL=Uniform Ressource Locator (c’est l’adresse d’un site web)

3. c)

4. -html ne s’occupe pas de la mise en forme d’une page ;

    -il ne crée pas des pages interactives.

5. Colore les paragraphes, les sous-titres de 3ème niveau en bleu et les met également en italique.

6. CSS 1 ; CSS 2 ; CSS 3 ;

 

EXERCICE II

1.b ; 2.e ; 3.a ; 4.c ; 5.d

 

EXERCICE III :

Code HTML:

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" />

<title> Correction</title>

</head>

<body>

<div id="bloc_page">

            <h1>Ma première leçon de programmation</h1>

            <h2>Le langage HTML</h2>

 

            <p > Le HTML est un langage qui permet de présenter des informations sur Internet et dont le rôle est de<br/>  formaliser l'écriture d'un document avec des balises de formatage. Les balises

            pemettent d'indiquer la<br/>  façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.HTML a été<br/>  inventé en1991 par un scientifique nommé

            <b>Tim Berners-Lee.</b></p>

            <p>Lorsqu’on regarde une page sur internet, ce qu’on voit est<i> l’interprétation par le

            navigateur</i>du code <br/> HTML. </p>

 

            <h2>Le langage CSS</h2>

 

            <p> Pour améliorer la présentation d’un site Web, on utilise  les feuilles de style en cascade (CSS)  en an-<br/>glais Cascade Style sheets. Le CSS est un langage qui vient  compléter le html pour  permettre de<br/>  mettre en forme la <a href= « #»>page web</a>. Il existe plusieurs versions : CSS1, CSS2 et CSS3.</p>

           

            <div id ="pied_de_page">

                        <p>copyright <br/>

                         Yaoundé le 1er Juin 2018 </p>

            </div>

           

            </div>

</body>

</html>

 

NB :Ajouter dans l’entête la ligne :

<link rel="stylesheet" href="style.css" />

qui indique que ce fichier HTML va être associé à un fichier appelé style.css qui va gérer sa mise en forme.

Code CSS :(A enregistrer dans le fichier style.css)

 

#bloc_page

            {

            width: 630px;

border: 1px solid black;

            }

h1

{

margin: 10px; /* Marge extérieure de 50px */

padding: 5px; /* Marge intérieure de 12px */

text-transform: uppercase;

width: 600px;

border: 1px solid black;

color : red ;

font-style: impact,arial,times new roman, serif;

font-size: 1.5em;

}

h2{

color: red;}

#pied_de_page

{border: 1px solid black;

border-radius: 10px;

background-color: grey; /* Le fond de la page sera gris */

color: red; /* Le texte de la page sera rouge */

text-align:center;

height: 60px;