Ce cours est proposé par M.
Sellé THIAM Etudiant en Master II en
Informatique à l’Université Amadou Hâmpaté BA de Dakar.
Le principal objectif de la conception de ce cours est l’initiation de ceux
qui n’ont pas jusque là vu les notions importantes du développement
d’applications web, que sont le langage HTML et les CSS.
C’est dans ce sens que nous essayerons de faire un petit rappel sur le
langage HTML, ensuite parler en détails des notions théoriques des CSS et
enfin, par un cas pratique réaliser un projet web portant essentiellement
sur du HTML et CSS.
Pour vos suggestion, critiques et vos éventuelles corrections en vue de
perfectionner ce cours, peuvent être envoyés sur thiam_selle@[Link] ou
joignez moi par téléphone au (+221) 77 415 13 67.
thiam_selle@[Link] / (+221)77 415 13 67 1
Rappels sur le langage HTML
HTML, ou HyperText Markup Language qui signifie Langage de Description de
Documents HyperTextuels, fonctionne sous la base des balises (ou tag).
Exemple: <html>, <p>, <table>, …
Une balise formate le document en entier ou une partie du texte.
A (pratiquement) chaque balise correspond une balise fermante, qui délimite
l’effet de la balise.
Exemple: <center>Ce texte est centré</center>
Ce code suivant me permet de réaliser ma première page web:
Ce document sera enregistré sous l’extension .html ou .htm
thiam_selle@[Link] / (+221)77 415 13 67 2
Introduction au langage CSS
Après ce rappel sur HTML, nous allons maintenent découvrir le langage
CSS. Le langage CSS ou Cascading Style Sheet que l’on peut traduir en
Français par Feuilles de Style en Cascade, n’est pas plus compliqué que
HTML, il vient le compléter pour nous aider à mettre en forme nos pages
web.
Dans ce chapitre sur le CSS, nous allons voir la théorie sur le CSS: qu’est ce
que c’est? A quoi cela ressemble-t-il? Où est-ce qu’on écrit du code CSS?
Définition et principes:
Jusqu’ici nous avons vu que HTML sert à structurer un contenu, par
exemple titre, insertion d’image, liens internet…
En résumé, HTML sert à structurer le contenu alors que CSS sert à formater
le contenu structuré.
Versions de CSS
CSS1 publié en 1996.
CSS-P (CSS positioning) permet le positionnement d’éléments.
thiam_selle@[Link] / (+221)77 415 13 67 3
CSS2 est une recommandation de Mais 1998 qui inclut les attributs des
deux précédentes versions. L’accent a été mis sur l’accessibilité et la
capacité à avoir un style différent selon les medias.
CSS3: encore en construction . Nouveautés: multicolonnage, style sur les
polices, arrondir les coins des boîtes, utiliser des images de fond dans les
bordures, des ombres portées…
Où écrit-on le CSS?
Nous avons le choix car nous avons la possibilité d’écrire en du code CSS
à trois endroits différents:
Dans un fichier .css (méthode la plus recommandées).
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ées).
Nous allons mettre en œuvre ces trois méthodes, toutefois nous devons
retenir que la première est la meilleure.
Dans un fichier .css (recommandé): dans cette méthode , on écrit le
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 souple. Cela nous évitera de tout mélanger dans un
même fichier.
thiam_selle@[Link] / (+221)77 415 13 67 4
Nous allons partir de notre première page web que nous avions réaliser et
que le code est suivant:
Vous noterez certainement que nous avons ajouté la ligne 4; c’est elle qui
indique au fichier HTML qu’il est lié à un fichier CSS qui sera chargé de sa
mise en formes.
Ainsi nous allons créer notre fichier [Link] qui nous se chargera du
formatage de notre page web.
Ainsi, dans la capture suivante vous verrez comment est structuré notre
feuille de style [Link] qui nous permettra de formater nos pages web. On
aura l’occasion de mieux expliquer notre fichier css dans la partie pratique
de ce cours.
thiam_selle@[Link] / (+221)77 415 13 67 5
thiam_selle@[Link] / (+221)77 415 13 67 6
Ainsi à travers notre exemple nous avons pu formater notre page web
avec notre fichier css externe à notre page HTML.
Dans l’en-tête <head> du fichier HTML: avec cette méthode, nous inserrons
directement notre code css dans une balise <style> dans l’en-tête de
notre page web <head>.
Exemple:
thiam_selle@[Link] / (+221)77 415 13 67 7
Avec ce bout de code nous aurons le contenu web suivant:
Enfin nous mettons en œuvre la dernière méthode de formatage de
contenu de notre application web, qui consiste à :
Mettre directement le style dans les balises (non recommandé):
Exemple: le code suivant nous permettra d’avoir le même contenu dans
notre page web que ci-dessus.
thiam_selle@[Link] / (+221)77 415 13 67 8
Et voilà cette autre méthode nous permet aussi d’avoir le même
formatage de notre application web comme dans la capture suivante.
Toutefois il est fortement déconseillé d’user de cette méthode car il
pourrait nous rendre le travail fastidieux lors de la maintenance.
thiam_selle@[Link] / (+221)77 415 13 67 9
Application du css:
Maintenant que nous savons où placer notre code CSS, on va essayer de
se familiariser avec ce code, en répondant à la question: qu’est ce qui
nous permet de faire quoi?
Pour définir un style, il existe un ensemble de règles en texte simple
permettant de décrire l’aspect des éléments de la page.
Une règle CSS contient deux éléments principaux:
Un sélecteur de style précisant à quelles balises appliquer le style
Une déclaration de style définie entre accolades « { } »
Une ou plusieurs propriétés: suivie du caractère « : »
Une ou plusieurs valeurs: séparés par des virgules et suivie du caractère
«;»
Exemple:
thiam_selle@[Link] / (+221)77 415 13 67 10
Ce bout de code nous permet d’appliquer un style au paragraphe de
notre page web auquel la feuille de style sera lié.
Ici, le sélecteur de style s’applique à la balise p et dans nos paragraphes:
la police du texte sera Century Gothic de taille 15px, en gras et de couleur
bleu.
Les sélecteurs en CSS
Nous avons trois types de sélecteurs en CSS, les sélecteurs de classe, les
sélecteurs ID et les sélecteurs contextuels:
Les sélecteurs de classe: ici nous devons définir une classe dans la balise à
laquelle on souhaiterait appliquer la sélection. Maintenant pour
sélectionner la classe c’est comme suit: .nom_de_la_classe
Exemple:
Ceci nous permet d’appliquer une couleur rouge aux titres de niveau h1
qui ont une classe contenu.
Dans la capture suivante, nous montrons là où la classe est définie.
thiam_selle@[Link] / (+221)77 415 13 67 11
Ainsi, nous le titre Ceci est mon contenu. qui sera en rouge.
Ensuite nous aurons; les sélecteurs ID:
Exemple: si on a la balise div qui a un ID comme suit:
Si dans notre feuille de style on a:
Ceci nous permet de formater la partie mhaut de notre page, en lui
appliquant des marges, une couleur de fond…
thiam_selle@[Link] / (+221)77 415 13 67 12
Enfin, nous avons le sélecteur contextuel: par exemple si nous avons
Uniquement les éléments EM dans un h1 seront mis en rouge.
Cependant on peut combiner plusieurs sélecteurs en même temps pour
atteindre un objectif bien déterminé.
Les pseudo-classes en CSS
Les pseudo-classes nous permettent d’affiner le style appliquer à un
certain nombre de balises en définissant une réaction à un évènement
ou à la position relative de la balise au sein des autres balises.
Les pseudo-classes sont prédéfinies contrairement aux classes.
Il existe plusieurs types de pseudo-classes:
Les pseudo-classes dynamiques
Les pseudo-classes de liens
Les pseudo-classes de langue
Les pseudo-classes firts-child
Les pseudo-classes de page
Les pseudo-classes de texte.
Les pseudo-classes dynamiques: ils permettent de modifier le style d’une
thiam_selle@[Link] / (+221)77 415 13 67 13
d’une balise en fonction d’un évènement comme un clic souris. Nous
avons trois pseudo-classes dynamiques; :hover(survol avec souris),
:focus(clic dans un formulaire) et :active(entre le début d’un clic souris et le
moment où on relâche).
Exemple:
Les pseudo-classes de liens: ils permettent de modifier le style d’un lien.
Nous avons deux pseudo-classes de lien qui sont; :link(style non consulté) et
:visited(style consulté).
Les pseudo-classes de langue: ils permettent de définir un style en fonction
de la langue d’un document ou d’un élément HTML (spécifié grâce à
l’attribut optionnel LANG). Ici nous n’avons qu’un seul pseudo-classe;
:lang(Langue).
Exemple:
La pseudo-classe descendante: elle permet d’appliquer un style à la
première balise au sein d’un élément en utilisantle symbole « > » et la
pseudo-classe :first-child
Exemple:
thiam_selle@[Link] / (+221)77 415 13 67 14
Les pseudo-classes de page: le sélecteur @page permet de modifier la
mise en page d’un contenu d’une page HTML. Nous avons trois pseudo-
classes; :left(les pages de gauche), :right(les pages de droite) et :first(la
première page).
Exemple:
Les pseudo-classes de texte: elles permettent d’appliquer un style à une
partie d’un texte délimité par des balises (<p>). Nous avons deux pseudo-
classes; :first-line(la première ligne du texte) et :first-letter(la première lettre
du texte).
Exemple:
Les unités en CSS
Les unités relatives:
em (taille proportionnelle à la taille de la police utilisée)
ex (taille relative à la minuscule de la police)
px (pixels, taille relative à l’appareil [écran, projecteur, imprimante …]
thiam_selle@[Link] / (+221)77 415 13 67 15
Les unités absolues:
in, cm, mm (pouces, centimètres, millimètres)
pt (pint, 1/72pouces)
pc (pica, 12points)
Les couleurs en CSS
Nous avons différentes façons de définition des couleurs:
Définition de la couleur par son nom: il existe 17 couleurs: aqua, green,
orange, white, black, lime, purple, yellow, blue, maroon, red, fuschia,
navy, silver, gray, olive, teal.
Exemple:
Définition de la couleur par son code RGB (ou RVG) en hexadécimal:
nous avons 16 millions de couleurs avec RGB: #RRGGBB avec RR, GG, BB =
chacun est égal à un nombre hexadécimal entre 00 et FF pour le rouge
(Red), le vert(Green) et le bleu(Blue)
Exemple:
Définition da la couleur par son code RGB en notation décimale:
proposition relative en pourcentage (%) ou en notation entière absolue
(entre 0 et 255).
thiam_selle@[Link] / (+221)77 415 13 67 16
Exemple:
Le positionnement en CSS
Avec les balises <span> et <div> du langage HTML, il est possible de
positionner au pixel près du texte et des images. On peut avoir:
Un positionnement relatif (par rapport à d’autres éléments)
Un positionnement absolu (coin supérieur gauche de la fenêtre du
navigateur)
Exemple: dans cet exemple nous allons mettre en œuvre le positionnement
d’un texte.
thiam_selle@[Link] / (+221)77 415 13 67 17
Quelques propriétés en CSS
Pour les polices de caractère:
font-family: Arial; font-size:x-large; font-style:bold; …
Pour les textes et les paragraphes:
text-align:center; color:red; text-indent:5px; width:640; height:480; …
Pour les couleures et l’arrière plan:
background:-color:yellow; background-position:left; …
Pour les bordures:
Border-left-color:#0000FF; border-top-width:3pt; …
Pour les espaces intérieures:
Padding-top:3px; padding-right:0.25em; …
thiam_selle@[Link] / (+221)77 415 13 67 18