Cascading Style Sheets version 3
Définition : CSS
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les fichiers CSS, comprennent du code qui permet de gérer le design d'une page en HTML.
Feuille de style = jeux de règles qui précise l'affichage d'un élément HTML.
Voici un exemple de règle CSS permettant d'afficher les paragraphes en bleu et de taille 14 pixels:
Exemple :
p{
color: blue;
font-size: 14px;
}
Les règles CSS
Une règle CSS est composée de 2 parties : un sélecteur (ici p) et une déclaration (color:blue). Une déclaration a deux parties : une propriété (color) et une valeur (blue).
Les sélecteurs sont les éléments HTML, on peut donc indiquer pour chaque élément un ensemble de déclarations (lorsqu'il y en a plusieurs, on les sépare avec des points virgules). De même si des déclarations s'appliquent à plusieurs sélecteurs, on peut les regrouper. Dans l'exemple suivant, on affiche les entêtes et paragraphes en rouge et on place une marge gauche de 1cm dans tous les paragraphes,
H1, P { color : red; margin-left : 1cm}
Placer une feuille de style
Il y a trois méthodes principales pour placer une feuille de style:
Écrire le CSS dans un élément HTML style.
Écrire le CSS dans la balise ouvrante des éléments HTML.
Écrire le CSS dans un fichier CSS séparé.
Écrire le CSS dans un élément HTML style
La première façon d'écrire du code CSS va être à l'intérieur même de notre page HTML, au sein d'un élément style.
L'élément style sera en général placé en haut de notre page HTML, à l'intérieur même de l'élément head.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Où écrire le CSS ?</title>
<meta charset= "utf-8">
<style>
body{
background-color: orange;
}
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Un titre de niveau 1</h1>
<p>Un paragraphe</p>
<p>Un deuxième paragraphe</p>
</body>
</html>
Écrire le CSS dans la balise ouvrante des éléments HTML
Pour faire cela, nous utiliserons cette fois-ci un attribut style (à ne pas confondre avec l'élément style). Cet attribut va prendre comme valeur les différentes déclarations CSS relatives à l'élément.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Où écrire le CSS ?</title>
<meta charset= "utf-8">
</head>
<body style="background-color:orange;">
<h1>Un titre de niveau 1</h1>
<p style="color: blue;font-size: 16px;">Un paragraphe</p>
<p >Un deuxième paragraphe</p>
</body>
</html>
Écrire le CSS dans un fichier CSS séparé
Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l'extension « .css ». C'est la méthode recommandée, qui sera utilisée autant que possible.
Exemple :
body{
background-color: orange;
}
p{
color: blue;
font-size: 14px;
Nous travaillons donc dorénavant avec deux fichiers : un fichier que j'ai appelé CSS3.html et notre fichier CSS3.css
Nous allons maintenant finalement devoir lier notre fichier CSS à notre fichier HTML. Pour cela, nous allons utiliser un nouvel élément HTML : l'élément link (« lien », en français).
Cet élément va avoir besoin de deux attributs : rel, qui va préciser le type de fichier (dans notre cas, ce sera « stylesheet » pour feuille de style) et un attribut href qui va indiquer l'adresse relative du fichier CSS.
On va placer l'élément link dans l'élément head de notre fichier HTML. Cet élément prend la forme d'une balise orpheline.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Où écrire le CSS ?</title>
<meta charset= "utf-8">
<link rel ="stylesheet" href ="CSS3.css">
</head>
<body>
<h1>Un titre de niveau 1</h1>
<p>Un paragraphe</p>
<p>Un deuxième paragraphe</p>
</body>
</html>
Quelques propriétés pour commencer
Voici tout d'abord un ensemble de propriétés parmi les plus utilisées.
font-family Nom de la police de caractères à utiliser font-family : Arial;
font-style Style de la police de caractères. Valeurs possibles : normal, italic, oblique font-style : italic;
font-weight Epaisseur de la police de caractères. Valeurs possibles normal, bold, bolder, lighter, 100, 200, 300,... 900. font-weight : bold;
font-size taille de la police de caractères. Valeurs possibles xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller.
On peut aussi utiliser une taille absolue : 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut). font-size : x-small; font-size : 18pt; font-size : 150%;
Exemple :
p{
font-family : arial;
font-style: italic;
font-weight:bold;
font-size: 28px;
}
text-align Alignement du texte. Valeurs possibles : left, right, center, justify text-align : center;
text-decoration Valeurs possibles : none, underline, overline, line-through, blink (Ces valeurs peuvent être combinées) text-decoration : underline line-through;
text-transform Valeurs possibles : capitalize, uppercase, lowercase, none text-transform : uppercase;
color Pour indiquer la couleur du texte. color : red; color : #fd4a88; color : rgb(125,32,98);
background-color Couleur du fond background-color : blue;
background-image Image à utiliser pour le fond. Valeurs possibles : url("...") ou none. BODY { background-image: url("monfond.jpg") } P { background-image: none }
margin-top, margin-bottom, margin-left, margin-right Les marges (respectivement au dessus, au dessous, à gauche et à droite). On peut utiliser différentes unités de mesures : 1em : hauteur d'un caractère dans la police courante 1ex : hauteur du x dans la police courante 1px : 1 pixel 1in : 1 inch 1cm : 1 centimètre 1mm : 1 millimètre 1pt : 1 point = 1/72 inch 1pc : 1 pica = 12pt
margin-top: 1em margin-bottom: 2ex margin-left: 12px margin-right: 2cm
border-style Style de la bordure. Valeurs possibles : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-style : solid;
border-width Epaisseur de la bordure. Valeurs possibles : thin, medium, thick ou bien une longueur. border-width : thin; border-width : 3px;
border-color Couleur de la bordure. border-color : red;
Voici un exemple en vidéo de mise en forme de page web en appliquant le langage CSS3 :