![[Fléche]](../images/defaut/icones/puce_navig.gif)
Cours de CSS : Introduction au CSS
Ce premier cours sur le CSS aborde les notions essentielles de l'utilisation des feuilles de style.
1. Définir un style
Commençons donc ce cours par voir les méthode vous permettant d'intégrer du CSS dans votre code source XHTML.
Cela peut-être réalisé de 3 façons différentes :
Toutefois cela ne vous empêche pas d'utiliser sur la même page un style interne afin de redéfinir certains style ou d'en ajouter de nouveaux.
Vous pouvez même utiliser ces 3 types de déclarations dans une même page mais normalement vous ne devriez avoir que très rarement recours à un style spécifique.
Il est possible qu'au cours de ces exemples certaines choses vous aient échappées mais ne vous inquiétez pas vous en découvrirez d'avantage sur la syntaxe dans le chapitre ci-dessous.
Cela peut-être réalisé de 3 façons différentes :
- Spécifique
-
Cet emploi du CSS fait appel à l'attribut " style " commun à plusieurs balises XHTML
Cela permet de déclarer un style de façon ponctuelle sur un élément bien précis de la page Web.
Voyons un exemple où nous souhaitons mettre le contenu d'un paragraphe en bleu et en gras :
Code-source : XHTML-CSS<p style='color:blue; font-weight:bold;'>paragraphe affiché en bleu</p>
- Interne
-
Dans ce cas le CSS est déclaré entre les balises <head>... </head> de la page XHTML
les différentes règles qui composent la feuilles de style sont quand à elles encapsulées entre les balises <style>... </style>
Cette façon de faire permet d'obtenir un résultat bien plus propre qu'avec une déclaration spécifique.
Voici un exemple d'intégration :
Code-source : XHTML-CSS<head>
<title>Titre du document</title>
...
...
<style type="text/css">
p
{
color:blue;
font-weight:bold;
}
</style>
</head>
- Externe
-
Cela consiste à placer l'ensemble des règles de style dans un fichier leur étant dédié.
Ce fichier porte alors l'extention " .css " (il suffit de créer un fichier .txt et d'en modifier l'extension).
Il faut alors appeler ce fichier CSS dans le code source de chaque page où le style doit être appliqué.
C'est ici la solution la plus propre et de loin la plus pratique de toutes.
Voici ce qu'il faudrait noter dans le fichier .css (par exemple " style.css ") pour reproduire l'exemple précédent :
Code-source : CSSp
{
color:blue;
font-weight:bold;
}
Et pour appeler le fichier sur une page web il faut donc noter le code suivant entre les balises <head>... </head> :
Code-source : XHTML<link href="style.css" rel="stylesheet" type="text/css" />
Toutefois cela ne vous empêche pas d'utiliser sur la même page un style interne afin de redéfinir certains style ou d'en ajouter de nouveaux.
Vous pouvez même utiliser ces 3 types de déclarations dans une même page mais normalement vous ne devriez avoir que très rarement recours à un style spécifique.
Il est possible qu'au cours de ces exemples certaines choses vous aient échappées mais ne vous inquiétez pas vous en découvrirez d'avantage sur la syntaxe dans le chapitre ci-dessous.
2. Les règles
Intéressons nous maintenant à la syntaxe des styles CSS.
Reprenons l'exemple cité ci-dessus pour l'étudier de plus près :
Cette redéfinissions de la balise paragraphe <p>... </p> se nomme : une règle.
Cette règle commence par un sélecteur (qui est ici la balise paragraphe).
Tout ce qui apparait entre accolades après le sélecteur est globalement appelé un bloc.
Ce dernier contient les propriétés (par exemple : color) et les valeurs (par exemple : blue) à appliquer au sélecteur.
Notez que les propriétés sont séparés des valeurs par la ponctuation " : " (deux points).
Également chaque groupe propriété/valeur, appelé déclaration, est achevé par " ; " (point virgule)
Ce dernier n'est pas obligatoire pour la dernière propriété déclarée mais afin d'éviter toute erreur de ce type il est préférable de l'utiliser à chaque fois.
Très bien vous connaissez maintenant les règles de syntaxe à appliquer aux feuilles de style !
Reprenons l'exemple cité ci-dessus pour l'étudier de plus près :
Code-source : CSS
p
{
color:blue;
font-weight:bold;
}
Cette redéfinissions de la balise paragraphe <p>... </p> se nomme : une règle.
Cette règle commence par un sélecteur (qui est ici la balise paragraphe).
Tout ce qui apparait entre accolades après le sélecteur est globalement appelé un bloc.
Ce dernier contient les propriétés (par exemple : color) et les valeurs (par exemple : blue) à appliquer au sélecteur.
Notez que les propriétés sont séparés des valeurs par la ponctuation " : " (deux points).
Également chaque groupe propriété/valeur, appelé déclaration, est achevé par " ; " (point virgule)
Ce dernier n'est pas obligatoire pour la dernière propriété déclarée mais afin d'éviter toute erreur de ce type il est préférable de l'utiliser à chaque fois.
Très bien vous connaissez maintenant les règles de syntaxe à appliquer aux feuilles de style !
3. Les sélecteurs
Voyons maintenant d'un peu plus prés ce que sont exactement les sélecteurs.
Pour le moment nous avons vu un premier type de sélecteur utilisant les balises du code XHTML : c'est le sélecteur de type.
Sachez qu'il vous est possible de définir la même règle pour plusieurs sélecteurs de type en les séparant par une virgule, par exemple :
Il faut aussi savoir que les sélecteurs fonctionnent par ordre hiérarchique.
Ainsi lorsque l'on souhaite par exemple mettre en rouge tous les éléments " span " contenus dans un élément " div " il suffit de noter :
C'est ce qu'on appelle un sélecteur descendant.
Mais il en existe d'autres types de sélecteurs permettant d'être plus précis encore dans la définition des styles.
Voici ces autres types de sélecteurs :
Pour le moment nous avons vu un premier type de sélecteur utilisant les balises du code XHTML : c'est le sélecteur de type.
Sachez qu'il vous est possible de définir la même règle pour plusieurs sélecteurs de type en les séparant par une virgule, par exemple :
Code-source : CSS
h1, h2, h3
{
color:blue;
font-weight:bold;
}
Il faut aussi savoir que les sélecteurs fonctionnent par ordre hiérarchique.
Ainsi lorsque l'on souhaite par exemple mettre en rouge tous les éléments " span " contenus dans un élément " div " il suffit de noter :
Code-source : CSS
div span { color:red; }C'est ce qu'on appelle un sélecteur descendant.
Mais il en existe d'autres types de sélecteurs permettant d'être plus précis encore dans la définition des styles.
Voici ces autres types de sélecteurs :
- Sélecteur universel : * (étoile)
-
Il permet de définir " tous les éléments " et peut-être appliqué à un sélecteur de type.
Nous pouvons par exemple indiquer que tous les éléments du sélecteur de type " div " afficheront un background vert :
Code-source : CSSdiv * { background-color:green; }
- Sélecteur d'enfant : > (chevron fermant)
-
Il permet de donner un style en fonction de l'élément parent.
Par exemple imaginons que vous utilisez l'élement " div " contenant plusieurs éléments " span " et que vous souhaitez faire apparaître le texte de ces éléments " span " en bleu :
Code-source : CSSdiv > span { color:blue; }
- Sélecteur adjacent : + (plus)
-
Il permet d'appliquer un style à un élément qui en suit immédiatement un autre.
Par exemple vous souhaitez écrire en italique le premier paragraphe suivant un titre h3 mais vous souhaitez que les paragraphes suivant ne prennent pas eux aussi ce style :
Code-source : CSSh3 + p { font-style:italic; }
- Sélecteur de classe : . (point)
-
Il permet de définir une classe.
Celles-ci sont très pratique pour définir des élément générique pouvant apparaître plusieurs fois dans une page.
Par exemple vous souhaitez définir une règle pour les citations de message sur un forum en plaçant un cadre noir et un fond blanc :
Code-source : CSS.citation { border:1px dashed #0000FF; }
Il faudra alors appeler cette classe grâce à l'attribut XHTML " class " pour chaque citation.
- Sélecteur d'identifiant : # (dièse)
-
Il s'applique de la même façon que le sélecteur de classe à la différence que les règles du XHTML imposent l'unicité d'un identifiant par page.
La majorité du temps celui-ci est employé pour être manipulé avec Javascript.
Imaginons que vous souhaitez appliquer une règle pour le menu principal de votre site sachant qu'il posséde l'identifiant " menu ".
Le code XHTML se présente donc ainsi :
Code-source : XHTML<div id="menu"> ... éléments du menu ... </div>
La règle CSS sera donc indiquée ainsi :
Code-source : CSS#menu
{
border:1px solid #000000;
background-color:#FFFFFF;
}
4. Première page Web avec CSS
Hé j'en vois qui s'endorment dans le fond... oui vous là-bas !! 
J'imagine qu'un peu de pratique serait le bienvenue non ?
D'accord, je vous propose donc d'utiliser quelques notions vues dans ce cours pour mettre en forme une première page Web avec du CSS.
Certes ça ne sera pas du grand art mais cela vous permettra d'avoir une première approche concrète de l'utilisation des feuilles de style.
Commençons donc par le document XHTML.
Je suppose que vous connaissez déjà sur le bout des doigts les cours de XHTML et que par conséquent vous êtes à même de comprendre le code source suivant :
Ceci étant fait attardons-nous maintenant un peu plus sur le CSS.
Pour cela prenons dès maintenant de bonnes habitude en utilisant une feuille de style externe : créez un nouveau document texte dans le même dossier que votre document XHTML et re-nommez le " style.css "
Afin d'appeler cette feuille de style dans votre document XHTML, placez-y maintenant
le lien suivant (entre les balises <head>... </head>) :
Revenez ensuite à votre document CSS.
Dans un premier temps nous allons nous intéresser à l'alignement de nos titres et de nos texte.
Je pense qu'il serait bien de centrer le titre et le slogan : nous allons donc utiliser le sélecteur de l'identifiant " header " comme ceci :
Très bien, maintenant il serait bien de souligner le titre et de mettre le slogan en italique.
Nous allons pour cela redéfinir les règles des sélecteurs h1 et h2.
Ajoutez ceci dans votre document CSS :
C'est très simple n'est-ce pas ?
Poursuivons en définissant une règle pour le texte du pied de page afin qu'il soit centré, gris et de taille 10 pixels :
Voyons maintenant ce que l'on peut faire ce ces barres horizontales (pas très esthétiques il faut le dire).
Affichons la première de couleur bleu et de taille 1 pixel avec une largeur de 80%. Les deux dernières dernière auront une teinte plus sombre et une taille de 2 pixels pour une largeur de 100% de la page :
Les couleurs sont définies 2 fois car les navigateur n'interprêtent pas tous la balise <hr /> de la même manière...
Vous remarquerez aussi que sous Internet Explorer 6 la déclaration portant sur la première barre horizontal n'est pas appliqué (mauvaise gestion du css...
) ...
Il ne nous reste plus maintenant qu'à nous occuper des 3 paragraphes de notre page et nous aurons terminé.
Mais comme vous semblez avoir compris je vous laisse le soin de remarquer les modifications apportées par l'ajout de ces nouvelles règles :
Si le fonctionnement de certaines propriétés vous échappent ne vous inquiétez pas ce n'est pas grave car vous retrouverez beaucoup de ces notions dans les cours suivants.
J'imagine qu'un peu de pratique serait le bienvenue non ?
D'accord, je vous propose donc d'utiliser quelques notions vues dans ce cours pour mettre en forme une première page Web avec du CSS.
Certes ça ne sera pas du grand art mais cela vous permettra d'avoir une première approche concrète de l'utilisation des feuilles de style.
Commençons donc par le document XHTML.
Je suppose que vous connaissez déjà sur le bout des doigts les cours de XHTML et que par conséquent vous êtes à même de comprendre le code source suivant :
Code-source : XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Premiére page avec CSS</title>
</head>
<body>
<div id="header">
<h1> Titre Principal de la Page </h1>
<h2> Sous-titre ou slogan </h2>
</div>
<hr />
<div id="content">
<h3> Titre de la partie </h3>
<p> Premier paragraphe </p>
<p> Deuxiéme paragraphe </p>
<p class="remarque"> Troisiéme paragraphe </p>
</div>
<hr />
<div id="footer">
Texte du pied de page
</div>
</body>
</html>
Ceci étant fait attardons-nous maintenant un peu plus sur le CSS.
Pour cela prenons dès maintenant de bonnes habitude en utilisant une feuille de style externe : créez un nouveau document texte dans le même dossier que votre document XHTML et re-nommez le " style.css "
Afin d'appeler cette feuille de style dans votre document XHTML, placez-y maintenant
le lien suivant (entre les balises <head>... </head>) :
Code-source : XHTML
...
<title>Premiére page avec CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
...
Revenez ensuite à votre document CSS.
Dans un premier temps nous allons nous intéresser à l'alignement de nos titres et de nos texte.
Je pense qu'il serait bien de centrer le titre et le slogan : nous allons donc utiliser le sélecteur de l'identifiant " header " comme ceci :
Code-source : CSS
#header { text-align:center; }Très bien, maintenant il serait bien de souligner le titre et de mettre le slogan en italique.
Nous allons pour cela redéfinir les règles des sélecteurs h1 et h2.
Ajoutez ceci dans votre document CSS :
Code-source : CSS
h1 { text-decoration:underline; }
h2 { font-style:italic; }C'est très simple n'est-ce pas ?
Poursuivons en définissant une règle pour le texte du pied de page afin qu'il soit centré, gris et de taille 10 pixels :
Code-source : CSS
#footer { text-align:center; font-size:10px; font-style:italic; }Voyons maintenant ce que l'on peut faire ce ces barres horizontales (pas très esthétiques il faut le dire).
Affichons la première de couleur bleu et de taille 1 pixel avec une largeur de 80%. Les deux dernières dernière auront une teinte plus sombre et une taille de 2 pixels pour une largeur de 100% de la page :
Code-source : CSS
div#header + hr { border:0; height:1px; background-color:#0000FF; color:#0000FF; }
hr { border:0; height:2px; background-color:#0000AA; color:#0000AA; }Les couleurs sont définies 2 fois car les navigateur n'interprêtent pas tous la balise <hr /> de la même manière...
Vous remarquerez aussi que sous Internet Explorer 6 la déclaration portant sur la première barre horizontal n'est pas appliqué (mauvaise gestion du css...
) ...Il ne nous reste plus maintenant qu'à nous occuper des 3 paragraphes de notre page et nous aurons terminé.
Mais comme vous semblez avoir compris je vous laisse le soin de remarquer les modifications apportées par l'ajout de ces nouvelles règles :
Code-source : CSS
div#content {
margin:25px;
background-color:#EEEEEE;
}
h3 {
font-size:14px;
color:#000099;
text-decoration:underline;
text-indent:25px;
}
h3 + p {
color:#000000;
font-size:12px;
font-style:italic;
margin-top:0;
margin-left:50px;
margin-right:50px;
padding:5px;
background-color:#FFFFFF;
}
p { color:#0000FF; }
.remarque { color:#FF0000; }Si le fonctionnement de certaines propriétés vous échappent ne vous inquiétez pas ce n'est pas grave car vous retrouverez beaucoup de ces notions dans les cours suivants.
