HOME

Introduction CSS

Les css est un langage de description des comportements visuels. De la même manière que h1 dit "ceci est un titre", les css vont permettre de dire au navigateur "le fond est beige clair" ou "ce titre est en 18 pixels de hauteur" par exemple.

Structure sémantique et mise en forme visuelle Le W3C recommande de séparer les différents codes en usage dans une page web. Le HTML s’occupe de structurer l’information de la page dans un but essentiellement sémantique : un h1 est le titre principal de votre page, un p est un paragraphe, etc. A vous d’utiliser judicieusement les tags pour rendre la page la plus juste du point de vue de son contenu. Maintenant lorsqu’il s’agit de couleur, de taille de police, de structuration visuelle de votre page, ce n’est plus du ressort du html, ça concerne les css. On verra qu’on peut mettre du code css directement dans les balises, ou les concentrer dans le head de la page, mais le w3c recommande (et moi avec eux) de mettre toutes ces informations dans un fichier séparé. La première spécification du langage CSS est publiée en 1996 et contient une cinquantaine de propriétés. L’idée est par la suite d’ajouter des "niveaux" : CSS 2 ajoute des propriétés en plus de la version 1, sans modifier celle-ci. CSS3, est donc un troisième niveau qui élargit les possibilités offertes par CSS 1 et 2.

La séparation des codes permet :

Définitions Voici un exemple de code css :

h2 {
color:green;
font-size:22px;
}

est appelée règle css.

h2 est un sélecteur color et font-size sont des propriétés green et 22px sont des valeurs.

Enfin, font-size:22px; est une déclaration css.

Placer le code css : 3 endroits possibles Déclarer un comportement css dans une balise Il est possible de changer la couleur d’un texte comme ceci :

<p style="color:red;">ceci est un texte en rouge</p>

l’attribut "style" permet en effet de déclarer le comportement css de la balise dans laquelle il est codé. Cette méthode, la plus "facile", est aussi laborieuse : les autres paragraphes de la page ne changeront pas de comportement, et si il y en a 10 que l’on désire modifier, il faudra écrire 10 fois l’attribut. De plus, ce n’est pas très "w3c" (on mélange html et css dans le même code et alourdit la page à force de définir chaque élément individuellement).

Déclarer un comportement css dans le head La deuxième méthode est d’écrire dans le head de la page une série de déclaration css, comme ceci :

<style type='text/css'>
 h1 { font-size:18px; }
 p { font-size:10px; color: red; } 
 </style>

On commence par les balises ouvrantes et fermantes qui permettent d’indiquer au navigateur que l’on va insérer des sélecteurs css. Ensuite on fait une première déclaration, "h1", et entre deux accolades, on déclare un attribut (font-size ou color, on en verra d’autres) et lui donne une valeur après les deux points (18px et red). On termine par le point virgule, qui sert de séparateur entre deux attributs.

On peut écrire aussi les déclaration comme ceci :

<style type='text/css'>
 h1 { 
 font-size:18px; 
 }

 p { 
 font-size:10px; 
 color: red; 
 } 
 </style>

Les retours à la ligne et les espaces ne sont pas pris en compte, on arrange le code à sa sauce. Les deux points, cependant, doivent rester collés à la déclaration ( "color : red" mais pas "color : red").

Cette méthode fait gagner du temps : le sélecteur "p" indique que l’on veut que tous les paragraphes vont recevoir le comportement visuel déclaré (une taille de 10px de haut et une couleur rouge, dans notre exemple). Et cela, où qu’ils setrouve dans la page, et quelle qu’en soit le nombre. En outre, on l’a écrit à un seul endroit, facile à retrouver, l’entête de la page. Mais à chaque page du site on devra replacer ce code dans le head.

Créer une feuille de style séparée Enfin, on peut lier un fichier séparé, portant l’extension .css, à la page css. On le fait dans le head de la page, comme ceci :

<link type="text/css" rel="stylesheet" href="lien_de_la_page.css" media="screen"/>

Dans la page liée, on déclare les comportements css comme vu précédemment :

h2 { color: red; }

L’avantage est multiple : on sépare css et html, on peut utiliser une même page de déclaration pour tout le site. Bref on gagne du temps.

Ajoutons que les 3 solutions (dans la balise, dans le head, dans une page séparée) peuvent coexister, et on peut associer plusieurs pages de déclarations css externes.

Quels sélecteurs employer ? On peut utiliser principalement 3 types de sélecteurs :

La devise à se rappeler en toutes circonstances Une phrase dont vous avez à vous souvenir en toutes circonstances : "tous les éléments à l’exception de span et div ont un comportement par défaut" Les liens (la balise a), par exemple, sont par défaut bleus et soulignés. Si vous ne redéfinissez que leur couleur, ils seront toujours soulignés.