CSS Langage
Le CSS permet de mettre en forme un document XML (et donc HTML, SVG, etc.). Le CSS ne modifie pas le contenu d’une page web. Le contenu doit rester accessible avec ou sans CSS.
Un fichier CSS est un fichier texte édité avec un simple éditeur de texte. Son extension est .css.
Pour vous donner un petit aperçu de son intérêt, visitez CSSZenGarden. Ce site utilise une page HTML unique, seuls les fichiers CSS changent en fonction du design choisi.
Liez le CSS au HTML#
La solution préconisée est l’appel d’un fichier externe. C’est à dire que votre site est composé d’un ou plusieurs fichiers HTML et d’un fichier CSS. Cette technique permet de régler l’apparence de toutes les pages d’un site en modifiant un fichier unique. De plus, cette feuille sera mise en cache dans le navigateur du client et ne sera pas rechargée par la suite : gain de bande passante.
Dans la partie <head> de votre page HTML, liez un fichier CSS :
Appel avec <link>
<link rel="stylesheet" href="style.css">
Il est également possible de mettre en forme un élément unique depuis HTML avec l’attribut style. Cette solution n’est pas recommandée, mais s’avère utile dans le cas de styles dynamiques par exemple
Mise en forme d’un seul élement HTML
<p>Bla bla bla</p>
<p style="color:red">Bla bla bla</p>
<p>Bla bla bla</p>
Exercice - Liez une feuille de style#
- créez un fichier CSS à la racine de votre site
- appelez-le
styles.css - créez le lien depuis votre fichier HTML
- vérifiez que le fichier est bien chargé depuis les outils de développeurs
Composition d’un style CSS#
Un style CSS est composé de :
- un sélecteur
- des règles
- éventuellement, des commentaires
Les sélecteurs#
Ils désignent les éléments auxquels s’appliquent les styles.
Les règles#
Elles sont à mettre entre { et }.
Une règle est composée d’une propriété associée à une valeur.
Chaque règle se termine par un ;.
Les commentaires#
Ils sont identifiés par les caractères /* et */
Voici un style générique CSS
/* Commentaire */
Selecteur {
propriete1: valeur;
propriete2: valeur;
}
Voici un style "vrai"
/* Style pour les titres de niveau 1 */
h1 {
font-family: Arial;
color: blue;
}
Cascade et héritage#
Bien que votre HTML sans CSS paraisse non stylé, ce n’est pas le cas (taille des textes, espacement, couleurs des liens, etc.). C’est le principe de cascade en CSS. Le développeur n’est pas le seul à pouvoir modifier la mise en forme, le navigateur et l’utilisateur d’un site peuvent également le faire. Il faudra alors parfois surchargé un style navigateur pour obtenir un rendu précis.
Surchage du style navigateur
/* enlever le soulignement des liens (prévoir une alternative) */
a {
text-decoration: none;
}
De plus, si on définit 2 fois une propriété CSS, celle qui sera rencontrée en dernier aura la priorité.
Cascade CSS
/* les <p> seront en bleu */
p {
color: red;
}
p {
color: blue;
}
L’autre notion importante est la notion d’héritage : lorsque l’on définit un style pour une entité, celui-ci peut se transmettre aux enfants, c’est à dire aux élements HTML inclus dans un élément.
Principe d’héritage CSS
/* tous les éléments contenus dans html auront la police Arial */
html {
font-family: Arial;
}
/* tous les éléments h2 auront la police Helvetica */
h2 {
font-family: Courrier;
}
La plupart des propriétés s’héritent, mais heureusement pas toutes. Pour forcer l’héritage, le mot-clé inherit peut être utilisé.