[PDF] Cours approfondie de css sur les bases de la mise en forme | Cours css

(1)

(2)

1. Présentation

CSS (Cascading Style Sheets, aussi appelées Feuilles de style) est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évoluées et bien d'autres choses…

Les feuilles de style, pourquoi faire ?

En HTML, pour mettre en forme un titre nous utilisons la balise <font>. Par exemple :

<h2><font size="+1" color="#333366" face="Verdana">Mon titre ici</font></h2>

Ce qui donne le résultat suivant :

Mon titre ici

Imaginons que nous ayons 6 titres dans la même page, avec la même présentation, nous répéterions 6 fois notre balise <font> avec tous ses attributs. Ceci donnerai un code bavard et nous obligerai à de multiples modifications le jour où l'on souhaite modifier la couleur de nos titres.

La solution, séparer le code et la présentation avec les CSS

Avec les feuilles de style, on peut regrouper les informations de présentation une fois pour toute pour notre page.

(3)

CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc. CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page.

CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc.

Quels sont les avantages de CSS ?

CSS fut une révolution dans l'univers de la conception Web. Les avantages concrets de CSS sont les suivants :

• Le contrôle de la présentation de plusieurs documents par une seule feuille de style ; • Un contrôle plus précis de la présentation ;

• Des présentations différentes appliquées à des types de médias différents (à l'écran, à l'impression, etc.) ;

• De nombreuses techniques évoluées et sophistiquées.

Dans ce qui suit, nous verrons comment CSS fonctionne réellement et comment commencer

2. Comment CSS fonctionne-t-il ?

Dans ce chapitre, nous apprendrons à fabriquer notre première feuille de style. Nous saurons ce qu'est le modèle CSS de base et quels sont les codes nécessaires pour utiliser CSS dans un document HTML.

Beaucoup de propriétés des feuilles de style en cascade (CSS) sont similaires à celles de HTML. Si nous avons l'habitude d'utiliser HTML pour la présentation, nous reconnaîtrons donc beaucoup de ces codes. Voyons un exemple concret.

! La syntaxe CSS de base :

La définition de base d'un style est simple :

Balise {propriété de style: valeur; propriété de style: valeur} Exemple 1 :

Avec HTML, nous l'aurions fait comme ceci : <body bgcolor="#FF0000">

Avec CSS, on peut obtenir le même résultat comme cela : body {background-color: #FF0000;}

(4)

Exemple 2 :

H3 { font-family: Arial; font-style: italic }

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.

Comme nous l'aurons remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Ces exemples illustrent également le modèle fondamental de CSS :

Selector

{

property:

value;

…}

2. Comment appliquer CSS à un document HTML ?

Il y a trois façons d'appliquer le style CSS à un document HTML.

• dans un fichier .css (méthode la plus recommandée) ; • dans l'en-tête <head> du fichier HTML ;

• directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).

Elles sont toutes expliquées ci-dessous : " Dans un fichier .css (recommandé)

On écrit le code CSS dans un fichier spécial ayant l'extension « .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. (Pour le reste, nous utiliserons cette méthode pour tous les exemples.)

<html>

<head>

<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>. Patientez encore un peu !</p>

</body> </html>

A quelle balise HTML la propriété s’applique. Ex. Body, H3, …

La propriété, par exemple la couleur d’arrière-plan background-color ;

La valeur de la propriété, par exemple la couleur d’arrière-plan est rouge : #FF0000

(5)

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Notepad++) et copiez-y ce bout de code CSS :

p {

color: blue; }

Enregistrez le fichier en lui donnant un nom qui se termine par « .css », comme style.css. Placez ce fichier « .css » dans le même dossier que votre fichier « .html ».

Dans Notepad++, vous devriez observer quelque chose de similaire à la figure suivante.

Fichiers HTML et CSS dans Notepad++

Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté le « .html », de l'autre le « .css », comme à la figure suivante.

(6)

Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous le faites d'habitude. Vos paragraphes sont écrits en bleu, comme dans la figure suivante !

(7)

l existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>. Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui contient le code CSS.

<html>

<head>

</head>

<body>

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

</body> </html>

Testez, vous verrez que le résultat est le même.

" Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :

<html>

<head>

</head>

<body>

<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

</body> </html>

Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera coloré en bleu (figure suivante).

(8)

Quelle méthode choisir ?

Il est recommandé de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters… Pourquoi ?

Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site, comme le montre la figure suivante.

(9)

Essayez vous-même :

Lancez Notepad++ et créez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants :

default.htm <html> <head>

<title>Mon document</title>

<body>

<h1>Ma première feuille de style</h1> </body> </html> style.css body { background-color: #FF0000; }

Placez maintenant les deux fichiers dans le même dossier. Songez à sauvegarder les fichiers avec les bonnes extensions (respectivement « .htm » et « .css »)

Ouvrez « default.htm » dans votre navigateur et constatez le fond rouge de la page. Félicitations ! Vous avez fabriqué votre première feuille de style !

3. Les couleurs et les arrière-plans :

Maintenant, nous apprendrons comment appliquer des couleurs et des couleurs d'arrière-plan

à nos sites Web. Nous étudierons également des méthodes évoluées pour positionner et

contrôler les images d'arrière-plan. Les propriétés CSS suivantes seront expliquées :

• color

• background-color

• background-image

• background-repeat

• background-attachment

(10)

• background-position

• background

" La couleur d'avant-plan : la propriété 'color'

La propriété color décrit la couleur d'avant-plan d'un élément.

Par exemple, supposons que nous voulions tous les titres du document en rouge foncé. Les

titres sont tous balisés avec l'élément HTML <h1>. Le code suivant donne aux éléments <h1>

une couleur rouge.

h1 {color: #ff0000;}

Remarque :

On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent

(#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB = Red Green Blue

(rgb(255,0,0)).

" La propriété 'background-color'

La propriété background-color décrit la couleur d'arrière-plan des éléments.

L'élément <body> est le réceptacle de tout le contenu du document HTML. Pour changer la

couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background

color' à l'élément <body>.

On peut aussi appliquer une couleur d'arrière-plan à d'autres éléments y compris les titres et le

texte. Dans l'exemple ci-dessous, Des couleurs d'arrière-plan différentes sont appliquées aux

éléments <body> et <h1>.

body {background-color: #FFCC66;}

h1 {color: #990000; background-color: #FC9804;}

" Les images d'arrière-plan [background-image] :

La propriété CSS background-image sert à insérer une image d'arrière-plan.

Pour insérer une image en arrière-plan d'une page Web, appliquez simplement la propriété

background-image à l'élément <body> et indiquez le chemin de l'image.

(11)

Remarque :

Le chemin de l'image avec url("fleur.gif"). Cela signifie que l'image se trouve dans le même

dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec

url("../images/fond.gif"), ou même sur Internet en donnant l'adresse complète du fichier :

url("http://www.html.net/fond.gif").

" Répéter l'image d'arrière-plan [background-repeat] :

Avez-vous remarqué, dans l'exemple précédent, que l’image de fond était répété par défaut

horizontalement et verticalement pour couvrir la totalité de l'écran ? Ce comportement est

contrôlé par la propriété background-repeat.

Le tableau suivant décrit les quatre valeurs différentes de background-repeat.

Valeur

Description

repeat-x

L'image se répète horizontalement

repeat-y

L'image se répète verticalement

repeat

L'image se répète horizontalement et verticalement

no-repeat

L'image ne se répète pas

Par exemple, pour éviter la répétition d'une image d'arrière-plan, le code devrait ressembler à

ceci :

body {

background-color: #FFCC66;

background-image: url("fleur.gif");

background-repeat: no-repeat;

}

(12)

La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile

avec l'élément conteneur.

Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la

page, au contraire d'une image d'arrière-plan non bloquée qui défilera avec le texte de la page

Web.

Valeur

Description

scroll

L'image défile avec la page (non bloquée)

fixed

L'image est bloquée

Par exemple, le code suivant bloquera l'image d'arrière-plan.

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

" Positionner une image d'arrière-plan [background-position]

Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran.

La propriété background-position permet de changer cette position prédéfinie et de placer

l'image d'arrière-plan n'importe où à l'écran.

Il y a plusieurs méthodes pour fixer la valeur de background-position. Par contre, elles se

présentent toutes sous la forme d'un jeu de coordonnées. Par exemple, la valeur « 100px

200px » positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px depuis le

haut de la fenêtre du navigateur.

Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités

fixes (pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center",

"left" ou "right". Le modèle suivant illustre ce système :

(13)

L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur droit de la

page :

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

" Concision [background] :

La propriété background est un raccourci pour toutes les propriétés listées dans cette leçon.

Avec background, on peut comprimer plusieurs propriétés et donc écrire une feuille de style

plus courte, ce qui en facilite la lecture.

Par exemple, les cinq lignes suivantes :

• background-color: #FFCC66;

(14)

• background-repeat: no-repeat;

• background-attachment: fixed;

• background-position: right bottom;

On peut obtenir le même résultat avec background en une seule ligne de code :

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

La liste de commande est la suivante :

[background-color] | [background-image] | [background-repeat] | [background-attachment] |

[background-position]

Si une propriété manque, elle prend automatiquement sa valeur par défaut. Par exemple, si on

supprime background-attachment et background-position de l'exemple :

background: #FFCC66 url("butterfly.gif") no-repeat;

Ces deux propriétés non définies prendront tout simplement leurs valeurs par défaut, qui sont

comme chacun sait : "scroll" et "top left".

4. Les polices

Nous apprendrons ce que sont les polices et comment les appliquer avec CSS.

Les propriétés CSS suivantes seront décrites :

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font

"

La famille de polices [font-family] :

La propriété font-family sert à indiquer la liste prioritaire des polices à utiliser pour

l'affichage d'un élément donné ou d'une page Web.

Il y a deux types de noms pour catégoriser les polices : les noms de familles et les familles

génériques. Les deux termes sont expliqués ci-dessous.

• Le nom de famille : Comme exemples de noms de familles (souvent appelées «

polices »), on trouve "Arial", "Times New Roman" ou "Tahoma".

• La famille générique : On peut décrire les familles génériques comme des groupes

de noms de familles ayant des aspects uniformes. Un exemple est celui de la famille

sans sérif, qui est un ensemble de polices sans « empattement ».

(15)

Exemple :

h1 {font-family: arial}

h2 {font-family: "Times New Roman"}

On peut mettre plusieurs nom de famille selon l’affichage dans le navigateur s’il accepte un

nom de famille ou non ; exemple :

h1 {font-family: arial, verdana, sans-serif;}

" Le style des polices [font-style]

La propriété font-style définit le style de la police concernée être normal, italic ou

oblique.

Exemple : h2 {font-family: "Times New Roman"; font-style: italic;}

" Les variantes de polices [font-variant] :

La propriété font-variant sert à choisir entre les variantes normal ou small-caps ( petites

capitales) d'une police.

Exemple :

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

" [font-weight] :

Définit l'épaisseur de la police normal ou bold ou bolder ou lighter ou valeur numérique

soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)

(16)

" font-size

Définit la taille de la police. On peut choisir parmi beaucoup d'unités différentes points (pt),

inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

Exemple :

• P {font-size: 12pt}

• h1 {font-size: 30px;}

• h3 {font-size: 120%;}

" Concision [font]:

Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de

police en un coup.

Par exemple, prenons ces quatre lignes de code servant à décrire les propriétés de police de :

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Avec la propriété raccourcie, on peut simplifier le code :

p {font: italic bold 30px arial, sans-serif;}

L'ordre des valeurs de la propriété font est le suivant :

font-style | font-variant | font-weight | font-size | font-family

(17)

Les propriétés textes vont vous permette de personnaliser l’affichage de vos textes tout en

combinant les balises de formatages avec la CSS.

• text-indent

• text-align

• text-decoration

• letter-spacing

• text-transform

# text-indent

Cette propriété est utilisée pour ajouter un alinéa à la première ligne du texte.

Exemple : un alinéa de 30px est appliqué à tous les paragraphes balisés par un élément <p> :

p {text-indent: 30px;}

# text-align

La propriété text-align permet de modifier l'alignement d’un texte. Le texte peut être centré,

aligné à droite ou à gauche, ou encore justifié.

Dans l'exemple suivant, le texte des titres du tableau <th> est aligné à droite, tandis que les

données du tableau <td> sont centrées. Enfin, les paragraphes de texte normaux sont justifiés :

th {text-align: right;}

td {text-align: center;}

p {text-align: justify;}

# text-decoration :

La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au

texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc.

Dans l'exemple suivant, les éléments <h1> sont des titres soulignés, les éléments <h2> sont

des titres avec un trait au-dessus et les éléments <h3> des titres barrés.

h1 {text-decoration: underline}

h2 {text-decoration: overline}

h3 {text-decoration: line-through}

# letter-spacing :

L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La

valeur de la propriété est simplement celle de l'espacement désiré.

(18)

Par exemple, si vous voulez un espacement de 3px entre les lettres d'un paragraphe de texte

<p>, et de 6px entre les lettres des titres <h1>, voici le code à utiliser :

h1 {letter-spacing: 6px;}

p {letter-spacing: 3px;}

# text-transform

La propriété text-transform contrôle la capitalisation du texte. On peut choisir une

capitalisation initiale, une mise en majuscules ou une mise en minuscules,

• capitalize : Elle capitalise la première lettre de chaque mot. Par exemple, « marcel

dupond » deviendra « Marcel Dupond ».

• uppercase : Elle convertit toutes les lettres en majuscules. Par exemple, « marcel dupond

» deviendra« MARCEL DUPOND ».

• lowercase : Elle convertit toutes les lettres en minuscules. Par exemple, « MARCEL

DUPOND » deviendra « marcel dupond ».

• none : Aucune transformation, et le texte se présente tel qu'il apparaît dans le code

HTML.

Exemple :

h1 {text-transform: uppercase}

h1 {text-transform: lowercase}

li {text-transform: capitalize}

Exercice :

En utilisant une feuille de style externe, sur un fond gris, centrez un <h1> rouge dans votre

document. Placez ensuite un titre de <h2> bleu en capitale suivi de deux paragraphes avec une

indentation. Modifiez ensuite la hauteur de ligne du deuxième paragraphe pour le rendre plus

lisible.

6 Border, Margin et Padding

Modèle de boîte

Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes. Chacune de ces boîtes est constituée d’un contenu, d’un espacement intérieur, d’une bordure, et d’une marge externe. Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de chacun de ses constituants :

(19)

6.1 Border

Permet de définir les bordures autour des éléments.

Liste des propriétés border :

- border-style

Border-style vous permet de préciser la taille du bord. Les bords peuvent être en pointillé, en

trait, avec ligne continue, une double ligne, etc.

p {border-style:solid;}

Vous pouvez également utiliser :

dashed (en tirets) ; dotted (en pointillés) ; double (double); ridge; inset; outset (en 3D)

- border-color

Border-color vous permet de préciser la couleur du bord.

p {border-color:black}

-border-width :

Définit l’épaisseur de la bordure.

Exemple :

p {border-width:5px}

Remarque : Les propriétés border-width, border-style et border-color regroupent

elles-mêmes les propriétés top, left, bottom et right.

(20)

Exemple :

p {

border-top-style:solid;

border-right-style:dotted;

border-left-style:solid;

border-bottom-style:dotted;

}

-border :

Définit comme un raccourci global les propriétés de bordure

Border : taille style couleur;

Exemple :

p {border:5px solid red;}

6.2 Margin

Comme dit précédemment, margin représente la marge externe de la boîte. Vous pouvez modifier les espaces haut, droit, bas et gauche indépendamment des autres.

(21)

Exemple:

margin-top:5px;

margin-right:50px;

margin-bottom:10px;

margin-left:5px;

Il existe quatre manières de raccourcir les margin, dépendant des côtés que vous souhaitez modifier : • margin:5px 50px 10px 5px : Modifie respectivement TOP, RIGHT, BOTTOM, LEFT, toujours dans

cet ordre

• margin:5px 50px 10px : top = 5px, right et left = 50px, bottom = 10px • margin:5px 50px : top et bottom= 5px, right et left = 50px

• margin:50px : La marge de 50px s’applique dans toutes les directions.

6.3 Padding

Le padding représente un espace entre le contenu et le bord de la boîte. Même si ces propriétés, valeur et raccourci, sont identiques au margin, il ne faut en aucun cas les confondre. Ils ont chacun leur utilisation propre.

Exercice :

(22)

7 Les listes

Grâce aux feuilles de style, les listes deviennent un élément incontournable de la construction d’un site internet. On peut les personnaliser de nombreuses façons, ajouter des images, appliquer différents styles, etc.

Liste des propriétés listes : - list-style-type :

List-style-type vous permet de changer le marqueur présent devant chaque élément de la liste. Voici un exemple qui aura pour effet de placer un rond vide devant chaque élément :

ul {list-style-type:circle;}

Certaines de ces valeurs s’appliquent pour les listes non-ordonnées et d’autres pour les listes ordonnées.

! Valeurs des listes non-ordonnées :

(23)

- list-style-image : Utilisez les images avec les listes. Voici un exemple qui aura pour effet de placer une image devant chaque élément :

ul {list-style-image:url(‘mon-image.jpg’)}

- list-style-position :

Spécifie le retrait des puces. Les valeurs possible : inside; outside;

- list-style : Raccourci global vers les propriétés des listes : type position url();

8 Les liens

Nous pouvons appliquer aux liens ce que nous avons déjà vu dans les parties précédentes (c'est-à-dire à changer les couleurs et les polices, les soulignés, etc.). La nouveauté, c'est que CSS permet de définir ces propriétés différemment, selon que le lien est visité, non visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles à vos sites Web. Pour contrôler ces effets, on utilise ce qu'on appelle des pseudo-classes.

Qu'est-ce qu'une pseudo-classe ?

Une pseudo-classe permet de tenir compte de conditions et événements différents pour la définition d'une propriété sur une balise HTML.

Voyons un exemple. Comme vous le savez, les liens sont définis en HTML avec des balises <a>. On peut donc utiliser a comme sélecteur dans CSS :

a {color: blue;}

Un lien est susceptible d'avoir plusieurs états. Par exemple, il peut être visité ou non. Vous pouvez utiliser des pseudo-classes pour assigner des styles différents aux liens visités et non visités.

a:link {color: blue;} a:visited {color: red;}

Utilisons respectivement a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.

Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplémentaires.

• La pseudo-classe :link

La pseudo-classe :link est utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.

Dans le code suivant, les liens non visités seront en bleu clair.

a:link {color: #6699CC;}

• La pseudo-classe :visited

La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. Par exemple, le code suivant donnera la couleur mauve foncé à tous les liens visités :

(24)

a:visited {color: #660099;}

• La pseudo-classe :active

La pseudo-classe : active est utilisée pour les liens qui sont activés.

Cet exemple montre des liens activés dont la couleur d'arrière-plan est jaune :

a:active {background-color: #FFFF00;}

• La pseudo-classe :hover

La pseudo-classe :hover est utilisée lorsque le pointeur de la souris survole un lien.

On peut s'en servir pour créer des effets intéressants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait être le suivant :

a:hover {

color: orange;

font-style: italic;

}

Exemples :

• Espacement des lettres :

Comme indiqué avant, on peut ajuster l'espacement entre les lettres avec la propriété letter-spacing. Cela s'applique aux liens pour un effet spécial :

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

• MAJUSCULES et minuscules

Nous avons déjà vu la propriété text-transform qui permet de basculer entre des lettres majuscules et minuscules.

Elle peut aussi servir pour créer un effet sur les liens :

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

}

(25)

Pour supprimer le souligné, il suffit de lui donner la valeur none.

a {text-decoration:none;}

9 L'identification (class et id)

9.1 Les classes :

Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.

La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :

•

Syntaxe :

balise.nom_de_classe {propriété de style: valeur ; propriété de style: valeur ; …}

Où « Nom_de_la_classe » représente le nom donné à la classe. Exemple :

p.rouge {font: Verdana 12px; color: #FF0000; }

• Appel d'une classe :

Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :

<p class="rouge"> Texte à mettre en rouge </p>

• Les classes universelles :

Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point

.Nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...}

Exemple :

Soit la classe « important » suivante :

.important {font-type: arial; color: red; font-weight: bold}

L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide :

(26)

<P class=". important"> ... blabla ... </P>

<H1 class=". important">Titre 1</H1>

<TABLE><TR><TD class=". important">cellule</TD></TD>...

9.2 Notion des ID :

Le sélecteur d'ID (identifiant) permet de faire référence à un élément unique d'une page repéré par son identifiant. Les ID servent notamment à localiser des éléments HTML grâce au JavaScript.

Les ID fonctionnent exactement comme les classes. La syntaxe est :

#nom_de_ID {propriété de style: valeur}

Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>

Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi, pour #important {...} <P id=important> est correct. Mais si on rencontre dans la même page <H1 id=important> ce n'est plus correct !

Remarque :

Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.

Si par contre vous souhaitez utiliser des scripts avec les feuilles de (voir plus loin dans le cours), la notion de ID vous sera alors indispensable.

10 Le regroupement d'éléments : (span et div)

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises.Si, par exemple, on veut modifier uniquement « bienvenue » dans le paragraphe suivant :

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

Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement il n'y en a pas.

Les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.

Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID. • SPAN

(27)

paragraphe ou si vous préférez à un morceau de paragraphe. Ainsi on peut écrire pour l’exemple précédant :

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

Avec la class salutation est définit comme suit :

.salutations

{

color: blue;

}

• DIV

La balise <DIV> ... </DIV> est utilisée pour définir une division ou une sélection dans un document html. Elle est souvent utilisée pour grouper les éléments de type bloc et leur appliquer un style.