Cours 2 CSS PDF

1.
Styling HTML avec CSS

 CSS est l'acronyme de Cascading Style Sheets en français feuille de style en cascade.
 CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur un autre support.
 CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web en même
temps. Des exemples de pages web afficher avec 4 différentes feuilles de styles :
1.1. Pourquoi utiliser CSS?
Le CSS permet de définir les styles de vos pages Web, notamment la conception, la disposition et les variations
d’affichage pour différents appareils et tailles d’écran.
1.2. Syntaxe CSS : les règles CSS se compose d'un sélecteur et d'un bloc de déclaration comme le montre la
figure suivante :
Le sélecteur pointe sur l'élément HTML que vous souhaitez styler par example H1 qui indique titre 1. Le bloc de
déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Chaque déclaration inclut un nom
de propriété CSS et une valeur, séparés par deux points. Une déclaration CSS se termine toujours par un point-virgule
et les blocs de déclaration sont entourés d'accolades. Dans l'exemple suivant, tous les éléments <p> seront alignés au
centre, avec une couleur de texte rouge:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
1.2.1. Sélecteurs CSS :

Les sélecteurs CSS permettent de "rechercher" (ou de sélectionner) des éléments HTML en fonction de leur nom, id,
classe, attribut, etc.
1.2.2. Le sélecteur d'élément : Le sélecteur d'élément sélectionne les éléments en fonction du nom de
l'élément. Vous pouvez sélectionner tous les éléments <p> sur une page html comme ceci :
p {
text-align: center;
color: red;
}
dans ce cas, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge.
1.2.3. Le sélecteur d'identifiant

Le sélecteur id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique. L'identifiant d'un
élément doit être unique dans une page, le sélecteur d'identifiant sert donc à sélectionner un élément unique. Pour
sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l'identifiant de l'élément.
La règle de style ci-dessous sera appliquée à l'élément HTML avec id = "para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
1.2.4. Le sélecteur de classe

Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique. Pour sélectionner des éléments
avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe. Dans l'exemple ci-dessous, tous
les éléments HTML avec class = "center" seront en rouge et centrés:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
NB : Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.
Dans l'exemple ci-dessous, seuls les éléments <p> avec class = "center" seront alignés au centre:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Les éléments HTML peuvent également faire référence à plus d'une classe. Dans l'exemple ci-dessous, l'élément
<p> sera stylé selon class = "center" et class = "large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>

<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
1.2.5. Sélecteurs de regroupement : Si vous avez des éléments avec les mêmes définitions de style,
comme ceci:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Il sera préférable de regrouper les sélecteurs pour minimiser le code. Pour regrouper les sélecteurs, séparez chaque
sélecteur par une virgule. Dans l'exemple ci-dessous, nous avons regroupé les sélecteurs à partir du code ci-dessus:
h1, h2, p {
text-align: center;
color: red;
}
1.3. Commentaires CSS : Les commentaires sont utilisés pour expliquer le code et peuvent vous aider lorsque
vous modifiez le code source à une date ultérieure. Les commentaires sont ignorés par les navigateurs. Un
commentaire CSS commence par / * et se termine par * /. Les commentaires peuvent également s'étendre sur
plusieurs lignes:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
1.4. Comment ajouter CSS : Lorsqu'un navigateur lit une feuille de style, il formate le document HTML en
fonction des informations contenues dans la feuille de style. CSS peut être ajouté aux éléments HTML de 3
manières:
1.4.1. Inline - en utilisant l'attribut style dans les éléments HTML : Un style en ligne peut être utilisé
pour appliquer un style unique à un seul élément. Pour utiliser des styles inline, ajoutez l'attribut style à
l'élément concerné. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple ci-dessous
montre comment changer la couleur et la marge gauche d'un élément <h1>:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

<p>This is a paragraph.</p>
</body>
</html>
1.4.2. Internal - en utilisant un élément <style> dans la section <head> Une feuille de style interne
peut être utilisée si une seule page a un style unique. Les styles internes sont définis dans l'élément
<style>, dans la section <head> d'une page HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
1.4.3. External - en utilisant un fichier CSS externe : Avec une feuille de style externe, vous pouvez changer
l'apparence d'un site Web entier (plusieurs pages en même temps) en ne modifiant qu'un seul fichier.
Chaque page doit inclure une référence au fichier de feuille de style externe à l'intérieur de l'élément
<link>. L'élément <link> va à l'intérieur de la section <head>:
Fichier html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucune
balise HTML. Le fichier de feuille de style doit être enregistré avec une extension .css. Voici à quoi ressemble
"mystyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Plusieurs feuilles de style : Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes
feuilles de style, la valeur de la dernière feuille de style lue sera utilisée. Le moyen le plus courant d’ajouter des CSS
est de conserver les styles dans des fichiers CSS séparés. Cependant, nous utiliserons ici le style en ligne et le style
interne, car il est plus facile à démontrer et plus facile à essayer vous-même.
background en CSS :
La propriété background-color spécifie la couleur d'arrière-plan d'un élément. La couleur de fond d'une page est
définie comme ceci:
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Avec CSS, une couleur est le plus souvent spécifiée par:
 un nom de couleur valide - comme "red"

 une valeur HEX - comme "# ff0000"
 une valeur RGB - comme "rgb (255,0,0)"
Dans l'exemple ci-dessous, les éléments <h1>, <p> et <div> ont des couleurs d'arrière-plan différentes:
h1 {
background-color: green;
}
div {
}
p {
background-color: yellow;
}
2.1. Image de fond : La propriété background-image spécifie une image à utiliser comme arrière-plan d'un
élément. Par défaut, l'image est répétée pour couvrir tout l'élément. L'image de fond d'une page peut être définie
comme ceci:
body {
background-image: url("paper.gif");
}
2.1.1. background-image - Répéter horizontalement ou verticalement

Par défaut, la propriété background-image répète une image horizontalement et verticalement. Certaines images
doivent être répétées uniquement horizontalement ou verticalement, sinon elles auront l’air étrange, comme ceci:
body {
background-image: url("gradient_bg.png");
}
Si l'image ci-dessus ne se répète que horizontalement (background-repeat: repeat-x;), l'arrière-plan aura une meilleure
apparence:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
2.1.2. background-image - Définir la position et ne pas répéter :

L'affichage de l'image d'arrière-plan une seule fois est également spécifié par la propriété background-repeat:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Dans l'exemple ci-dessus, l'image d'arrière-plan est affichée au même endroit que le texte. Nous voulons changer la
position de l'image pour qu'elle ne gêne pas trop le texte. La position de l'image est spécifiée par la propriété
background-position:
body {
background-position: right top;
}
2.1.3. background-image- Position fixe
Pour spécifier que l'image d'arrière-plan doit être corrigée (ne défilera pas avec le reste de la page), utilisez la propriété
background-attachment:
body {
background-position: right top;
background-attachment: fixed;
}
Propriétés de la bordure CSS

Les propriétés de la bordure CSS vous permettent de spécifier le style, la largeur et la couleur de la bordure d'un
élément.
3.1. Style de bordure

La propriété border-style spécifie le type de bordure à afficher. Les valeurs suivantes sont autorisées:
 dotted – bordure pointillé

 dashed – dashed bordure
 solid – solide bordure
 double – bordure double
 groove - Defines a 3D grooved
 ridge – bordure 3d avec effet
 outset – bordure 3D
 none – sans bordure
 hidden – bordure caché
exemple :
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}

p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
3.2. Largeur de la bordure

La propriété border-width spécifie la largeur des quatre bordures. La largeur peut être définie comme une taille
spécifique (en px, pt, cm, em, etc.) ou en utilisant l’une des trois valeurs prédéfinies: mince, moyenne ou épaisse. La
propriété border-width peut avoir une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure
inférieure et la bordure gauche).
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 2px 10px 4px 20px;
}
3.3. Couleur de la bordure (border-color)

La propriété border-color est utilisée pour définir la couleur des quatre bordures. La propriété border-color peut avoir
une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).
Example :
p.one {
border-color: red;
}
p.two {
border-color: green;
}
p.three {
border-color: red green blue yellow;
}
ecriture simple :
p {
border: 5px solid red;
}
veux dire bordure style solid, largeur 5px avec couleur rouge.
Vous pouvez également spécifier toutes les propriétés de bordure individuelles pour un seul côté: p {
border-left: 6px solid red;
background-color: lightgrey;
}
3.4. Bordures arrondi

La propriété border-radius est utilisée pour ajouter des bordures arrondies à un élément:
Example :
p {
border-radius: 5px;
}
CSS margins
4.1. Marges CSS : Les propriétés de la marge CSS sont utilisées pour créer un espace autour des éléments, en
dehors de toute bordure définie. Avec CSS, vous avez un contrôle total sur les marges. Il existe des propriétés
permettant de définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).
CSS possède des propriétés permettant de spécifier la marge de chaque côté d'un élément:
- haut de la marge
- marge droite
- marge inférieure
- marge gauche
Toutes les propriétés de la marge peuvent avoir les valeurs suivantes:
- auto - le navigateur calcule la marge

- length : spécifie une marge en px, pt, cm, etc.
- % - spécifie une marge en% de la largeur de l'élément conteneur
Exemple :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
ecriture simple des marges :
p {
margin: 25px 50px 75px 100px;
}
cela veut dire que l’élément p a en haut une marge de 25px, à droite 50px, en bas 75px et à gauche 100px. Vous
pouvez définir la propriété margin sur auto pour centrer horizontalement l'élément dans son conteneur. L'élément
prendra alors la largeur spécifiée et l'espace restant sera divisé de manière égale entre les marges gauche et droite:
div {
width: 300px;
margin: auto;
}
CSS padding
Les propriétés de remplissage CSS permettent de créer un espace autour du contenu d'un élément, à l'intérieur de toute
bordure définie. Avec CSS, vous avez un contrôle total sur le remplissage. Il existe des propriétés permettant de définir
le remplissage pour chaque côté d'un élément (haut, droite, bas et gauche).
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
5.1. Eciture simple du css padding :
div {
padding: 25px 50px 75px 100px;
}
5.2. Remplissage et largeur d'élément :

La propriété CSS width spécifie la largeur de la zone de contenu de l'élément. La zone de contenu est la partie à
l'intérieur du remplissage, de la bordure et de la marge d'un élément. Ainsi, si un élément a une largeur spécifiée, le
remplissage ajouté à cet élément sera ajouté à la largeur totale de l'élément. C'est souvent un résultat indésirable. Dans
l'exemple suivant, l'élément <div> a une largeur de 300px. Cependant, la largeur réelle de l'élément <div> sera de
350px (300px + 25px de remplissage gauche + 25px de remplissage droit) :
div {
width: 300px;
padding: 25px;
}
Pour conserver la largeur à 300 pixels, quelle que soit la quantité de remplissage, vous pouvez utiliser la propriété
box-sizing. Cela fait que l'élément conserve sa largeur. si vous augmentez le remplissage, l'espace de contenu
disponible diminuera. Voici un exemple:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
la hauteur et la largeur en CSS

6.1. Réglage de la hauteur et de la largeur :
Les propriétés height et width permettent de définir la hauteur et la largeur d'un élément. La hauteur et la largeur
peuvent être définies sur auto (valeur par défaut. Indique que le navigateur calcule la hauteur et la largeur) ou spécifiées
en valeurs de longueur, telles que px, cm, etc. ou en pourcentage (%) du bloc le contenant.
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
a comme résultat la figure suivante :
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Le modèle de boîte (box model) en CSS

Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le terme "modèle de boîte" est utilisé
quand on parle de design et de mise en page. Le modèle de boîte CSS est essentiellement une boîte qui entoure chaque
élément HTML. Il comprend: les marges, les bordures, le remplissage et le contenu réel. L'image ci-dessous illustre
le modèle de boîte:
Explication des différentes parties:
 Content (Contenu) : Le contenu de la boîte, où le texte et les images apparaissent
 Remplissage (padding) : Efface une zone autour du contenu. Le rembourrage est transparent
 Bordure (Border) : Une bordure qui entoure le rembourrage et le contenu
 Marge (marging)- Efface une zone en dehors de la frontière. La marge est transparente
Le modèle de boîte nous permet d'ajouter une bordure autour des éléments et de définir un espace entre les éléments.
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the
actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</div>
</body>
</html>
Contour en CSS
Un contour est une ligne qui est dessinée autour des éléments, EN DEHORS des bordures, pour que l'élément "se
démarque". Les propriétés outlines sont :
La propreité outline-style : peut avoir les valeurs suivant :
 Dotted, dashed, solid, double, groove, ridge, inset, outset, none

 hidden
8.1. Couleur de contour (outline-color) :

La propriété outline-color est utilisée pour définir la couleur du contour. L'exemple suivant montre des contours
différents avec des couleurs différentes. Notez également que ces éléments ont également une fine bordure noire à
l’intérieur du contour:
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: double;
outline-color: green;
}
p.ex3 {
outline-style: outset;
outline-color: yellow;
}
8.2. Outline Width : La propriété outline-width spécifie la largeur du contour peut avoir une
des valeurs suivantes :
 thin (1px)
 medium (3px)
 thick (5px)
 valeur spécifique (en px, cm, %)
L'exemple suivant montre des contours de différentes largeurs:
Exemple :
p.ex1 {
outline-color: red;
outline-width: thin;
}
p.ex2 {
outline-color: red;
outline-width: medium;
}
p.ex3 {
outline-color: red;
outline-width: thick;
}
p.ex4 {
outline-color: red;
outline-width: 4px;
}
8.3. Outline offset :

La propriété outline-offset ajoute un espace entre un contour et la bordure d'un élément. L'espace entre un élément et
son contour est transparent. L'exemple suivant spécifie un contour 15px en dehors de la bordure:
p {
margin: 30px;
outline: 1px solid red;
outline-offset: 15px;
}
CSS text
9.1. Text color : La propriété color est utilisée pour définir la couleur du texte.
La couleur de texte par défaut d'une page est définie dans l’élément body.
Exemple :
body {
color: blue;
}
9.1. Text align (alignement de text) :
La propriété text-align est utilisée pour définir l'alignement horizontal d'un texte. Un texte peut être aligné à gauche
ou à droite, centré ou justifié. L'exemple suivant montre un texte aligné au centre, ainsi qu'un texte aligné à gauche et
à droite :
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
9.2. Text decoration:

La propriété text-decoration est utilisée pour définir ou supprimer des décorations du texte. La valeur text-decoration:
none; est souvent utilisé pour supprimer le soulignement des liens:
Exemple :
a {
text-decoration: none;
}
cette propreité est utilize pour décorer le texte :
exemple :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>

</body>
</html>
Le résultat de l’exemple précédent :
9.3. Transformation de texte (text transformation) :

La propriété text-transform est utilisée pour spécifier des lettres majuscules et minuscules dans un texte. Il peut être
utilisé pour tout transformer en lettres majuscules ou minuscules, ou pour mettre en majuscule la première lettre de
chaque mot:
Exemple :
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
9.4. Indentation du texte (text indentation) :

La propriété text-indent est utilisée pour spécifier l'indentation de la première ligne d'un texte:
p {
text-indent: 50px;
}
9.5. L'espacement des lettres (lettre spacing) :

La propriété letter-spacing est utilisée pour spécifier l'espace entre les caractères d'un texte. L'exemple suivant montre
comment augmenter ou diminuer l'espace entre les caractères:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
9.6. espace entre les lignes :
La propriété line-height est utilisée pour spécifier l'espace entre les lignes:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
9.7. Ombre de texte (text shadow) :

La propriété text-shadow ajoute une ombre au texte. L'exemple suivant spécifie la position de l'ombre horizontale
(3px), la position de l'ombre verticale (2px) et la couleur de l'ombre (rouge):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>
L’exemple précédent a comme résultat la figure suivante :

Polices CSS
Les propriétés de la police CSS définissent la famille de police, l'audace, la taille et le style d'un texte. La famille de
polices d'un texte est définie avec la propriété font-family. La propriété font-family doit contenir plusieurs noms de
police en tant que système "de secours". Si le navigateur ne prend pas en charge la première police, il essaie la police
suivante, etc. Commencez par la police de votre choix, puis terminez par une famille générique, pour permettre au
navigateur de choisir une police similaire dans la famille générique, si aucune autre police n'est disponible. Il y’a une
Différence entre les polices Serif et Sans-Serif.
Remarque: Si le nom d'une famille de polices comporte plus d'un mot, il doit être placé entre guillemets, par exemple:
"Times New Roman".Plusieurs familles de polices sont spécifiées dans une liste séparée par des virgules:
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
10.1. Le style de police (font style) :

La propriété font-style est principalement utilisée pour spécifier du texte en italique. Cette propriété a trois valeurs:
- normal - Le texte est affiché normalement

- italic - Le texte est en italique
- oblique - Le texte est "penché" (oblique est très similaire à l'italique, mais moins pris en
charge)
exemple
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
10.2. Font size :

La propriété font-size définit la taille du texte. Être capable de gérer la taille du texte est important dans la conception
Web. Toutefois, vous ne devez pas utiliser les ajustements de taille de police pour que les paragraphes ressemblent à
des en-têtes ou que les en-têtes ressemblent à des paragraphes. Utilisez toujours les balises HTML appropriées, telles
que <h1> - <h6> pour les en-têtes et <p> pour les paragraphes. La valeur de la taille de la police peut être une taille
absolue ou relative.
10.2.1. Taille absolue: Définit le texte à une taille spécifiée et Ne permet pas à l'utilisateur de changer la taille
du texte dans tous les navigateurs (mauvais pour des raisons d'accessibilité). La taille absolue est utile lorsque la
taille physique de la sortie est connue.
10.2.2. Taille relative: Définit la taille par rapport aux éléments environnants et permet à un utilisateur de
changer la taille du texte dans les navigateurs.
10.2.3. Font Weight (largeur) :

La propriété font-weight spécifie le poids d'une police:
Exemple :
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
link en CSS
Avec CSS, les liens peuvent être stylés de différentes manières avec n’importe quelle propriété CSS (couleur,
famille de polices, arrière-plan, etc.). exemple :
a {
color: hotpink;
}
De plus, les liens peuvent être stylés différemment en fonction de l'état dans lequel ils se trouvent. Les quatre états
de liens sont:
 a:link – un lien normal non visité

 a:visited – un lien que l’utilisateur a visité
 a:hover - un lien lorsque l'utilisateur passe la souris dessus
 a:active - un lien au moment où il est clique
exemple :
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
11.1. Lien sous forme boutons :

Cet exemple illustre un exemple plus avancé dans lequel nous combinons plusieurs propriétés CSS pour afficher les
liens sous forme de boîtes / boutons:
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
Le résultat de cet exemple est :
CSS list
Différents marqueurs d'éléments de liste. La propriété list-style-type spécifie le type de marqueur d'élément de liste.
L'exemple suivant montre certains des marqueurs d'éléments de liste disponibles:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Le résultat est :
12.1. Une image en tant que marqueur d'élément de liste :

La propriété list-style-image spécifie une image en tant que marqueur d'élément de liste:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('image.png');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
12.2. Stylé les lists avec des couleurs :

Nous pouvons également créer des listes de couleurs avec des listes pour les rendre plus intéressantes. Tout élément
ajouté à la balise <ol> ou <ul> affecte la liste entière, tandis que les propriétés ajoutées à la balise <li> affectent les
éléments de liste individuels:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Tableaux en CSS
13.1. Tableau de bordure (border table) : Pour spécifier les bordures de tableau en CSS, utilisez la propriété
border. L'exemple ci-dessous spécifie une bordure noire pour les éléments <table>, <th> et <td>:
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {

}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Exemple suivant montre une seul bordure autour du tableau :

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Single Border Around The Table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
13.2. Largeur et hauteur de table (width et height) :

La largeur et la hauteur d'une table sont définies par les propriétés width et height. L'exemple ci-dessous définit la
largeur de la table sur 100% et la hauteur des éléments <th> sur 50px:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
13.3. Alignement horizontal

La propriété text-align définit l'alignement horizontal (comme à gauche, à droite ou au centre) du contenu dans <th>
ou <td>. Par défaut, le contenu des éléments <th> est aligné sur le centre et le contenu des éléments <td> est aligné à
gauche. L'exemple suivant aligne à gauche le texte dans les éléments <th>:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
13.4. Alignement vertical

La propriété vertical-align définit l'alignement vertical (comme haut, bas ou milieu) du contenu dans <th> ou <td>.
Par défaut, l'alignement vertical du contenu d'un tableau est le milieu (pour les éléments <th> et <td>). L'exemple
suivant définit l'alignement vertical du texte en bas pour les éléments <td>:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
13.5. Le remplissage dans tableau :

Pour contrôler l'espace entre la bordure et le contenu d'une table, utilisez la propriété de remplissage des éléments
<td> et <th>. Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a table.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
13.6. Diviseurs horizontaux
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>

<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Le résultat du code précédent est :
13.7. Table Hoverable :

Utilisez le sélecteur: hover sur <tr> pour mettre en surbrillance les lignes du tableau au survol de la souris:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Le résultat est :
13.7. Couleur du tableau :
L'exemple ci-dessous spécifie la couleur d'arrière-plan et la couleur du texte des éléments <th>:
!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Display en CSS
Comme mentionné, chaque élément a une valeur d'affichage par défaut. Cependant, vous pouvez remplacer ceci. La
modification d'un élément en ligne en un élément de bloc, ou inversement, peut être utile pour donner à la page un
aspect spécifique, tout en respectant les standards Web. Un exemple courant consiste à créer des éléments <li> en
ligne pour les menus horizontaux:
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
Le résultat est :
L'exemple suivant affiche les <a> éléments en tant qu'éléments de bloc:
<!DOCTYPE html>
<html>
<head>
<style>
a{
display: block;
}
</style>
</head>
<body>
<p>Display links as block elements:</p>
<a href="/html/default.asp" target="_blank">HTML</a>

<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>
</body>
</html>
Résultat :

Langue

Cours 2 CSS PDF

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

Cours 2 CSS PDF

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

1.

Styling HTML avec CSS

1.2.1. Sélecteurs CSS :

1.2.3. Le sélecteur d'identifiant

1.2.4. Le sélecteur de classe

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Avec CSS, une couleur est le plus souvent spécifiée par:

 un nom de couleur valide - comme "red"

2.1.1. background-image - Répéter horizontalement ou verticalement

2.1.2. background-image - Définir la position et ne pas répéter :

Propriétés de la bordure CSS

3.1. Style de bordure

 dotted – bordure pointillé

p.ridge {border-style: ridge;}

<h2>The border-style Property</h2>

<p class="dotted">A dotted border.</p>

3.2. Largeur de la bordure

3.3. Couleur de la bordure (border-color)

3.4. Bordures arrondi

- auto - le navigateur calcule la marge

<h2>Using individual padding properties</h2>

5.1. Eciture simple du css padding :

5.2. Remplissage et largeur d'élément :

la hauteur et la largeur en CSS

Le modèle de boîte (box model) en CSS

 Dotted, dashed, solid, double, groove, ridge, inset, outset, none

8.1. Couleur de contour (outline-color) :

8.3. Outline offset :

9.2. Text decoration:

<h1>This is heading 1</h1>

9.3. Transformation de texte (text transformation) :

9.4. Indentation du texte (text indentation) :

9.5. L'espacement des lettres (lettre spacing) :

9.7. Ombre de texte (text shadow) :

L’exemple précédent a comme résultat la figure suivante :

10.1. Le style de police (font style) :

- normal - Le texte est affiché normalement

10.2. Font size :

10.2.3. Font Weight (largeur) :

 a:link – un lien normal non visité

/* mouse over link */

11.1. Lien sous forme boutons :

Le résultat de cet exemple est :

<p>Example of unordered lists:</p>

<p>Example of ordered lists:</p>

12.1. Une image en tant que marqueur d'élément de liste :

12.2. Stylé les lists avec des couleurs :

<h1>Styling Lists With Colors:</h1>

border: 1px solid black;

<h2>Add a border to a table:</h2>

Exemple suivant montre une seul bordure autour du tableau :

<h2>Single Border Around The Table:</h2>

13.2. Largeur et hauteur de table (width et height) :

13.3. Alignement horizontal

<h2>The text-align Property</h2>

13.4. Alignement vertical

<h2>The vertical-align Property</h2>

13.5. Le remplissage dans tableau :

<h2>The padding Property</h2>