1
INSTITUT UNIVERSITARIE DES SCIENCES ET TECHNIQUES D’ABECHE
DEPARTEMENT D’ELECTROMECANIQUE ET INFORMATIQUE INDUSTRIELLE
Technologie Internet : Le CSS
IIG3 Année académique 2012/2013
Chargé de cours : Dr Abakar Mahamat Ahmat
I - Qu’est ce que la CSS
Cela signifie : "Cascading Style Sheets", ce qui peut se traduire en français par "Feuilles de
style en cascade". Les CSS (Cascading Style Sheet = feuille de styles) sont des documents au
format texte, tout comme le HTML. La différence est qu'une CSS n'est prévue ni pour être
visualisée par l'internaute ni pour être affichée directement dans le navigateur. Une feuille de
styles n'est qu'un document qui définit comment une page HTML doit être affichée.
Le navigateur Web s'occupe de charger la CSS sans que l'internaute doive intervenir ; une
CSS a pour vocation d'agir en arrière plan.
En utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu d'être
bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le texte est toujours
orange.
En fait, l'idée est que le navigateur parcourt le document HTML. Lorsqu'il rencontre une
balise, il demande à la CSS de quelle manière il doit l'afficher. La CSS ne sait rien faire
d'autre que dire comment doit être affiché tel ou tel élément de la page Web.
II - Où mettre du code CSS
En règle générale, on écrit le code CSS dans un fichier à part (avec l'extension .css au lieu de
.html). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et
la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond etc.
On peut écrire du code CSS dans trois endroits différents, selon ce qu'on préfère :
Première méthode : dans un fichier .css (le moyen le plus recommandé)
Deuxième méthode : dans l'en-tete du fichier HTML
Et enfin troisième méthode : dans les balises
Première méthode : dans un fichier .css :
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
quasiment utilisée.
Parmi les nombreux avantages que cette solution apporte, il y a la possibilité de pouvoir
proposer facilement plusieurs designs différents aux visiteurs du site.
Remarque :
On doit ajouter dans le fichier HTML (XHTML) une ligne entre les balises <head> </head>
qui va permettre de "dire" au fichier XHTML quel fichier CSS il doit charger :
<link rel="stylesheet" media="screen" type="text/css" title="Essai_IUSTA" href="department_IIG.css" />
La balise <link /> comporte plusieurs attributs qu’on peut en modifier deux d'entre eux pour
le moment :
- title : c'est le nom de la feuille de style
- href : c'est l'emplacement où se trouve la feuille de style (sous forme de lien).
Il est conseillé de mettre dans le même dossier les deux fichiers .html et .css
Directement dans le header du fichier XHTML (Méthode B) :
Il est aussi possible de taper du CSS directement a l'intérieur même du fichier XHTML, entre
les balises <head> </head>. On doit y mettre une balise <style> </style> à l'intérieur :
Les deux méthodes se ressemblent beaucoup. Cependant, la première qui utiliser un .css
externe est plus pratique, car elle permettra de faire changer le design du site en un clin d'oeil.
2
De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages du site, ce qui
allégera la taille des fichiers .html et rendra donc le site plus rapide !
La troisième méthode :
La troisième méthode est la moins recommandée. Elle consiste à ajouter un attribut style sur
les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les
balises.
Cette méthode a tous les défauts : non seulement le CSS sera peu lisible à l'intérieur des
balises, mais en plus ca ne permet pas de profiter de tous les avantages du CSS, comme la
possibilité de changer la couleur de tous les titres du site en un clic.
En conclusion :
Il est conseillé d’avoir dans le même dossier les 2 fichiers : un .html et un .css :
Le fichier .html contient le code XHTML (html) avec en particulier la ligne pour faire
la liaison avec le fichier .css :
Le fichier .css qui contient le code CSS :
III – Application d’un style à des balises
Dans un CSS, on trouve 3 éléments différents :
1. Noms de balises : Noms des balises dont on veut modifier l'apparence.
2. Propriétés CSS : "effets de style" : par exemple la propriété color permet d'indiquer la
couleur du texte, font-size indique la taille du texte etc.
3. valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la
couleur, il faut indiquer le nom de la couleur, etc.
Exemple d’une feuille de style (code : CSS)
balise1
{
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
}
Remarque : Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur
correspondante. Et chaque ligne se termine par un point-virgule (;)
Exemple :
Modifier tous les paragraphes pour qu'ils soient écrits en bleu, avec une taille de 18 pixels.
Comme tous les textes de paragraphes sont entre des balises <p> </p>, alors le code CSS
sera :
p
{
color: blue;
font-size: 18px;
}
Remarque : Ne jamais mettre d'espace entre "18" et "px", sinon le code CSS ne fonctionnera
pas.
Pour appliquer un style à plusieurs balises :
Code : CSS
h1, h2
{
color: red;
}
Tous les textes des titres <h1> et <h2> soient écrits en rouge
3
Exemple d’application 1
Soit le code html suivant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple d’utilisation du CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-/>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design.css">
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Cette page comporte une feuille de style externe. C’est la meilleure méthode à
utiliser quand on fait du CSS.
</p>
<h2>Remarquez l’apparence des paragraphes suivants</h2>
<p>
Remarquez ce paragraphe a aussi le même style que le paragraphe précédent. <br />
N’est ce pas ?
</p>
<p>
Et encore un dernier paragraphe
</p>
</body>
</html>
Et le fichier desing.css contient les codes suivants
p
{
color: blue;
font-size: 18px;
}
Remarque (Explication des quelques balises) :
- La balise <Doctype> : Cette balise sert à dire au navigateur que ce qui suit est une page
XHTML, et que on utilise la version 1.0 du langage XHTML.
- La balise <html> contient 2 attributs :
1. xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML.
2. xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web.
Si on crée une page web en français, on doit mettre "fr" (xml:lang="fr").
- La balise <head> : contient quelques informations d'en-tete pour la page web.
- A l'intérieur de la balise <head> : on trouve notamment la balise <title>. Elle est
très importante : c'est elle qui contient le titre de la page web.
- Ensuite, il ya la balise <meta> : elle sert à indiquer qu’on utilise des caractères
spécifiques au français (éèàê etc...).
- La balise <link /> comporte plusieurs attributs (qu’on peut en modifier deux
d'entre eux pour le moment) :
o title : c'est le nom de la feuille de style
o href : c'est l'emplacement où se trouve la feuille de style (sous forme de lien).
Utilisation des attributs class et id
Pour appliquer un style sur une partie des paragraphes par exemple, on doit utiliser les
attributs class et id. Ces deux attributs sont presque identiques et se distinguent par le fait que
l’attribut class peut être plusieurs fois alors que l’attribut id une seule fois.
4
Ces attributs peuvent être utilisés sur n’importe quelle balise ou paragraphe :
Exemple :
<h1 class="nom"> </h1>
<p class="partie"></p>
<img class="propre" />
Et dans le code css il faut précéder la valeur de l’attribut par un point (.) dans le cas de class et
par dièse (#) dans le cas de id.
Exemple :
.nom
{
color: red;
font-size: 18px;
}
Remarque id fonctionne de la même manière que class mais il ne peut être utilisé qu’une seule
fois dans la page. Il peut par exemple être utilisé pour les logo, etc.
Quelques balises universelles
<span> </span> : c'est une balise de type inline qui permet de mettre le style au milieu d’un
paragraphe
Exemple :
<p>observer son effet <span class="nom">suivant cet exemple</span> merci</p>
Le code css associé
.nom
{
color: blue;
}
<div> </div> : c'est une balise de type block. Comme <p>, <h1>, etc... Elle crée un nouveau
"bloc" dans la page, et provoque obligatoirement un retour à la ligne. Cette balise très utilisée
pour faire un design pour les sites web.
On peut classer les balises XHTML dans une des 2 catégories suivantes : inline et block ("En
ligne" et "Bloc").
Par exemple, <p></p> est une balise block.
Et <a></a> est une balise inline.
Comment distinguer une balise inline par rapport à une balise block ?
- block : Une balise de type "block" crée automatiquement un retour à la ligne avant et
après sur une page web. Il suffit d'imaginer tout simplement un bloc. une page web est
constituée d'une série de blocks à la suite les uns des autres. Mais il est possible de
mettre un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos
possibilités pour créer le design de notre site.
- inline : Une balise de type "inline" se trouve obligatoirement a l'intérieur d'une balise
"block". Une balise inline ne crée pas de retour a la ligne, le texte qui se trouve à
l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne.
5
Exemple :
La taille du block
Contrairement à un inline, un block a des dimensions précises. Il a une largeur (width) et une
hauteur (higth).
width : S’exprimer en pixels (px) ou en pourcentage (%).
height : S’exprime soit en pixels (px), soit en pourcentage (%).
Par défaut un block prend 100% de la largeur disponible.
Exemple 1 : N’utilisant pas le css.
<p> Une balise de type "block" crée automatiquement un retour à la ligne avant et après
sur une page web. Il suffit d'imaginer tout simplement un bloc. Une page web est
constituée d'une série de blocks à la suite les uns des autres. Mais il est possible de mettre
un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités
pour créer le design de notre site. Et une balise de type "inline" se trouve obligatoirement
à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour a la ligne, le texte
qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne </p>
Exemple 2 : application du css suivant :
p{
width: 50%;
text-align: justify; /* Texte justifié pour mieux voir la largeur du block */
}
Ou encore :
p{
width: 250px;
text-align: justify;
}
Et si nous voulions que le paragraphe fasse 250px de large et 100px de haut.
p{
width: 250px;
height: 100px;
text-align: justify;
}
La bordure du block
On peut utiliser jusqu'a 3 valeurs pour modifier l'apparence de la bordure :
1. La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme
2px), ou utilisez un des mots-cle suivants :
- thin : bordure fine
- medium : bordure moyenne
- thick : bordure épaisse
6
7
8
9
10
11
1
/
11
100%
