Cette page a été faite par mon collègue Olivier JAMIN.
Le CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.
Le contenu de votre document est décrit et organisé à l'aide des <balises> dans un fichier HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8" />
<title> Créer une feuille de style en CSS </title>
</head>
<body>
<h1>Ceci est un gros titre </h1>
<p>Ceci est un paragraphe</p>
</body>
</html>
La mise en forme du document se fait généralement à part, dans un
fichier CSS, où on définit le style de chaque balise : taille, police et
couleur des charactères, bordure, couleur ou image de fond, etc...
Pour créer ce fichier, il suffit d'ouvrir un nouveau document dans
l'éditeur de texte et de l'enregistrer dans le même dossier que le
fichier HTML en le nommant par exemple style.css.
Il faut ensuite appeler le fichier CSS dans l'entête du fichier HTML pour appliquer à la page web la mise en forme définie dans ce fichier CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8" />
<link rel ="stylesheet" href ="style.css" />
<title> Créer une feuille de style en CSS </title>
</head>
Le code ci-dessous donne un exemple de fichier CSS. Il indique que les titre h1 sont en rouge, de taille 14 pixels et soulignés et que la police des paragraphes est Helvetica.
h1 {
color : red;
size : 14px;
text-decoration : underline; }
p {
font : Helvetica; }
Les propriétés CSS de type font- permettent de modifier l'apparence du textes.Voici les plus utilisées :
Elle sert à définir la police de charactère. Cependant les
navigateurs ne supportent pas tous toutes les polices, c'est pourquoi on
indique toujours plusieurs noms de police à utiliser en valeur de la
propriété font-family, en commençant par celle souhaitée. Ainsi, si le
navigateur ne supporte pas une police, il passe à la suivante et utilise
la première qu’il reconnait.
Remarque : pour uriliser un nom de police qui contient des espaces, on le mettre entre guillemets.
body {
font-family : Verdana, Arial, "Courier News", sans-serif; }
Les polices les plus courantes sont:Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.
Elle sert à définir la taille des charactères. Elle peut être renseignée en valeur fixe exprimée en pixels pxou en valeur relative % ou empar rapport à la taille standard du navigateur.
h1 {
font-size : 200%; }
h3 {
font-size : 1.3em; }
p {
font-size : 12px; }
Elles servent à mettre le texte est en italic ou en gras. Les valeurs de font-style sont :italic, oblique ou normal. Celle de font-weight sont :bold ou normal.
En complétant l'exemple précédent, on peut écrire:
h1 {
font-size : 200%; }
font-weight : bold; }
h3 {
font-size : 1.3em; }
font-style : italic; }
p {
font-size : 12px; }
La propriété CSS text-align permet de définir l’alignement parmi les valeurs left, right, center et justify. Par défaut lLe texte est aligné à gauche.
Sur notre exemple:
h1 {
font-size : 200%; }
font-weight : bold; }
text-align : center; }
h3 {
font-size : 1.3em; }
font-style : italic; }
p {
font-size : 12px; }
text-align : justify; }
Avant de voir la propriété qui permet de changer la couleur du texte, nous allons voir comment "désigner" une couleur en CSS. Cela peut se faire par un nom de couleur (red, blue, etc.), une valeur hexadécimale (#AA8811, etc.) ou une valeur RGB. Le tableau suivant donne les noms et valeurs de quelques couleurs :
Pour changer la couleur d'un texte, il suffit d'utiliser la propriété color.
Exemple pour des titre h1 en rose, des sous-titre h2 en bleu et les paragraphes en vert:
h1 {
font-size : 200%; }
font-weight : bold; }
text-align : center; }
color : RGB(240,96,204); }
h3 {
font-size : 1.3em; }
font-style : italic; }
color : blue; }
p {
font-size : 12px; }
text-align : justify; }
color : #00FF00; }
Pour attribuer une mise en forme particulière à un titre, un paragraphe, un mot ou n'importe quelle partie du document, on peut utiliser l'attribut class qui se glisse à l'intérieur des balises HTML avec un nom de class permettant de cibler cette partie.
<body>
<p>Un premier paragraphe ordinaire.</p>
<p class="resume">Un second avec une mise en forme particulière pour un résumé.</p>
<p>Un troisième contenant un <span class="special">mot</span> particulier.</p>
</body>
En utilisant les sélecteurs .class (en jaune ci-dessous) on peut mofidier les propriétés du texte correspondant.
body { background : rgb(249, 228, 187); }
p { font-size : 14px;
color : brown; }
.resume { background : rgb(255, 193, 73);
border-radius : 10px;
padding : 5px; }
.special { font-weight : bold;
color : green; }
Voici ce qui s'affiche dans le navigateur :
Ces quelques exemples devraient vous permettrent de mettre en forme vos premières pages web. Il existe de nombreuses commandes pour modifier l'arrière plan, les intervalles, créer des bordures, des tableaux, etc... Pour les découvrir, vous pouvez consulter le site de Pierre Giraud en français ou le site de référence w3schools.com en anglais.