Initiation à la création de site Web

Classes

Principes

on associe un style d'affichage à certaines balises
on peut associer des styles différents à des mêmes balises
pour définir la manière d'afficher une balise on utilise les attributs "id" et "class".
- les identificateurs ("id") sont utilisés pour caractériser un élément unique du document HTML (une liste, un formulaire, etc.)
- les classes ("class") sont utilisées pour caractériser un ensemble d'éléments (comme des listes organisées de manière similaire).

Définition d'un style

balise.nom-de-la-classe {
  propriété de style: valeur;
  propriété de style: valeur;
  ...;
}

Exemple :

H2.titre {
  font-family: arial;
  font-style: italic
}

Remarques :

Les propriétés de style sont englobées par les accolades.
Le couple "propriété, valeur" est séparé par un ":".
Les couples "propriété, valeur" sont séparés par un ";".
Il n'y a pas de limite sur le nombre de couples "propriétés de style/valeur".
Les espaces et l'indentation dans les feuilles de style aident fortement à la lisibilité du code source.

Appel d'une classe

Code CSS :

B.rouge {
  font: Verdana 12px;
  color: #FF0000;
}

Code HTML :

<b class="rouge">Texte à mettre en rouge et en gras</b>

Dans le navigateur :

Texte à mettre en rouge et en gras

Classes universelles

Si on ne précise pas la balise dans la définition de la classe, la classe pourra être utilisée pour n'importe quelle balise pour laquelle le style sélectionné a un sens.

Code CSS :

.code {
  background-color:yellow;
}

Code HTML :

<h4 class="code">Titre en jaune</h4>
<p>La couleur du fond du paragraphe suivant sera jaune.</p>
<p class="code">Code HTML</p>

Dans le navigateur :

Titre en jaune

La couleur du fond du paragraphe suivant sera jaune.

Code HTML

Où mettre une feuille de style ?

Il y a trois possibilités :

on peut mettre la feuille de style directement dans l'en-tête du document, entre une paire de balises
<style type="text/css">...</style>

Exemple :

<html>
  <head>
    <title>Exemple<title>
    <style type="text/css">
      body {background-color: #000000;}
    </style>
  </head>
  <body>
    <p>Cette page est noire</p>
  </body>
</html>

on peut mettre la feuille de style dans un fichier séparé, par exemple, dans monStyle.css et ajouter la ligne suivante
<link rel="stylesheet" type="text/css" href="monStyle.css">
dans la section "head"
Exemple :
```
<html>
  <head>
    <title>Exemple<title>
    <link rel="stylesheet" type="text/css" href="monStyle.css" />
  </head>
  <body>
    <p>Cette page est noire</p>
  </body>
</html>
```

on peut appliquer du style CSS à un élément avec l'attribut "style"

Exemple :

<html>
  <head>
    <title>Exemple<title>
  </head>
  <body style="background-color: #000000">
    <p>Cette page est noire</p>
  </body>
</html>

la méthode recommandée est la deuxième - une feuille de style externe

Comment organiser les fichiers html et css ?

En général, nous avons un fichier css et plusieurs fichiers html qui utilisent ce fichier css.

Une modification dans le fichier css s'appliquera automatiquement à tous les fichiers html.