Creation Sites Web 3-1 - CSS - Introduction

HC Hervé Chappert 1
Sommaire
Chapitre : Les bases du CSS
Partie : Introduction
A. Principes de fonctionnement
B. Modifier le comportement des balises (1)
C. Diviser une page en zones (#Div)
D. Modifier le comportement des balises (2)
HC Bases du CSS / Introduction 2

A – Principe
Le principe utilisé par tous les Webmaster et préconisé par le W3c (avec le
soutien des moteurs de recherche) est de séparer :
Ø Le contenu (en HTML)
Ø La mise en forme (en CSS)
Cela permet de faire évoluer son site simplement, de ne pas surcharger le code
HTML (et donc de rendre illisible les pages), de faciliter le travail au navigateurs et
aux robots d’indexation, etc…
Toutes les mises en forme seront donc faites en CSS (Couleurs de fond, de
caractères, polices de caractères, taille des images, zones de la page, etc …)
Les sites Web en CSS peuvent être très réussi, regardez les mises en formes sur :
http://www.csszengarden.com/
Vous pouvez aussi participer …
HC Bases du CSS / Introduction/ A – Principe 3

On peut écrire le CSS à trois endroits différents :
1. Dans les balises HTML (attribut style)
2. Dans l’en-tête de la page HTML (<head>)
3. Dans un fichier spécifique (.css)
On peut peux aussi bien sûr écrire du CSS, dans ces 3 endroits à la fois…
Comment choisir où écrire son code CSS ?
Choix 1, dans les balises HTML :

Le CSS va s’appliquer uniquement à cette balise HTML, si on veut que
cette balise se comporte de la même façon à un autre endroit, on doit
réécrire le code CSS
On « surcharge » le code HTML et on complique la lecture
àOn évite donc d’écrire le CSS dans les balises HTML (sauf cas
particulier)

Choix 2, dans l’entête de la page HTML :
Le CSS va s’appliquer uniquement à cette page HTML, si on veut que
d’autres pages se comportent de la même façon à un autre endroit, on
doit réécrire le code CSS
On « surcharge » la page HTML et on complique la lecture
àOn évite donc d’écrire le CSS dans les entêtes HTML (sauf cas
particulier)
Choix 3, dans un fichier spécifique :

On va décider à quelles pages HTML, notre fichier doit s’appliquer. On
peut le changer facilement et les changements seront répercutés sur
toutes les pages
On « simplifie » la page HTML et on simplifie la lecture
àOn écrit donc prioritairement le CSS dans un fichier spécifique
Si on écrit avec ces 3 façons en même temps pour le même élément, c’est la valeur « la
plus proche » de l’élément qui l’emporte à celle dans la balise HTML

HTML HTML HTML HTML HTML HTML HTML
link
CSS
Le principe est donc simple, on va écrire nos pages HTML en les structurant mais
la mise en forme sera dans un fichier externe en CSS.
Il faudra ajouter dans la balise <head> de chaque fichier HTML un lien (link) vers
le fichier CSS pour que le navigateur sache quelle mise en forme appliquée
On peut donc avoir plusieurs fichiers CSS pour faire des mises en forme par
famille de pages

On peut avoir trois types de mise en forme dans un fichier CSS :
1. Modifier le comportement des balises HTML de façon

uniforme
CSS
2. Diviser une page HTML en « zones » (Blocs, boîtes,
calques, …) appelées #Div
3. Modifier le comportement de certaines balises HTML en

les regroupant par classes

B – Modifier le comportement des balises HTML
Nous avons vu que les balises <h1> à <h6> avaient un comportement déterminé
par le HTML
Elles avaient une taille déterminée, une couleur, une police, etc… prédéfinies.
Si on veut changer ce comportement par défaut de la balise, on va le faire avec le
CSS.
Dans notre fichier CSS, on indiquera la balise que l’on veut modifier et ensuite les
caractéristiques que l’on souhaite changer sur le principe de :
Selecteur {
Propriété : nouvelle valeur;
}
Le sélecteur c’est le nom de la balise HTML, la propriété est l’attribut que l’on veut
modifier
HC Bases du CSS / Introduction/ B – Modifier balises HTML 8

Travail à Faire :
1. Regarder la vidéo CSS 1 sur http://www.youtube.com/c/hervechappert

2. Mettre en pratique
3. Dans Bluefish utilisez l’option « créer une feuille de style » et comprendre le
fonctionnement. Attention de bien comprendre ce que vous faites !! Nous
sommes partis du principe de mettre tout le CSS dans un fichier dédié
externe ….. C’est vous qui décidez, pas Bluefish
4. Sur le site www.mammouthland.net lire « Premier pas en CSS » :
• Principe des CSS
• Feuille de style CSS de base
HC Bases du CSS / Introduction/ B – Modifier balises HTML 9

C – Diviser une page en zone (#div)

Les Div représentent les zones de l’écran, il ne peut donc pas y avoir deux zones
différentes avec le même nom … La correspondance avec le HTML se fait avec des
sélecteurs ID, il ne peut donc pas avoir non plus plusieurs ID avec le même nom
dans une page HTML
Pour mettre des commentaires dans une page CSS, la syntaxe est :
/* mes commentaires */
HC Bases du CSS / Introduction/ C – les #Div 10
D – Modifier le comportement de certaines balises

On va apprendre à n’appliquer des changements (dans le CSS) qu’à certaines

balises du HTML avec les sélecteur CLASS
HC Bases du CSS / Introduction/ D – les class 11

HC Hervé Chappert 12
Creative Commons:
• Attribution
• Pas d’Utilisation Commerciale
• Pas de Modification
Under the following terms:
Attribution — You must give appropriate credit, provide a link to the

license, and indicate if changes were made. You may do so in any
reasonable manner, but not in any way that suggests the licensor endorses
you or your use.
NonCommercial — You may not use the material for commercial purposes.
NoDerivatives — If you remix, transform, or build upon the material, you

may not distribute the modified material.

Creation Sites Web 3-1 - CSS - Introduction

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Creation Sites Web 3-1 - CSS - Introduction

Transféré par

Droits d'auteur :

Formats disponibles

HC Hervé Chappert 1

B. Modifier le comportement des balises (1)

C. Diviser une page en zones (#Div)

D. Modifier le comportement des balises (2)

HC Bases du CSS / Introduction 2

Vous pouvez aussi participer …

HC Bases du CSS / Introduction/ A – Principe 3

Comment choisir où écrire son code CSS ?

Choix 1, dans les balises HTML :

HC Bases du CSS / Introduction/ A – Principe 4

Choix 3, dans un fichier spécifique :

àOn écrit donc prioritairement le CSS dans un fichier spécifique

HC Bases du CSS / Introduction/ A – Principe 5

HC Bases du CSS / Introduction/ A – Principe 6

1. Modifier le comportement des balises HTML de façon

3. Modifier le comportement de certaines balises HTML en

HC Bases du CSS / Introduction/ A – Principe 7

HC Bases du CSS / Introduction/ B – Modifier balises HTML 8

1. Regarder la vidéo CSS 1 sur http://www.youtube.com/c/hervechappert

HC Bases du CSS / Introduction/ B – Modifier balises HTML 9

1. Regarder la vidéo CSS 2 sur http://www.youtube.com/c/hervechappert

1. Regarder la vidéo CSS 3 sur http://www.youtube.com/c/hervechappert

On va apprendre à n’appliquer des changements (dans le CSS) qu’à certaines

HC Bases du CSS / Introduction/ D – les class 11

Under the following terms:

Attribution — You must give appropriate credit, provide a link to the

NoDerivatives — If you remix, transform, or build upon the material, you

Vous aimerez peut-être aussi