Donner du style à une page grâce au CSS

Le CSS, indispensable pour le style d’une page HTML

Avec le langage Html, nous avons vu comment créer et donner du sens au contenu d’une page Web. Afin de donner du style à votre site, il est temps de passer au CSS. Il existe 3 façon d’implémenter du CSS à une page Web :

• directement dans les balises de votre fichier Html, en utilisant l’attribut style. C’est la méthode que je vous recommande le moins. Elle rend en effet rapidement votre fichier html trop complexe pour bien vous repérer et engendre facilement des erreurs;
• dans l’en-tête de votre fichier html, en ajoutant l’élément style dans le head, cette méthode est moins sujet aux erreurs que la précédente, mais sur une page avec beaucoup de contenu ça devient aussi très complexe à gérer ;
• dans un fichier .css relié au fichier html de votre page par la balise link dans votre head de cette façon : <link rel= »stylesheet » href= »Styles.css »>.
  L’attribut rel prend la valeur stylesheet pour indiquer au navigateur que le fichier Style.css, défini par l’attribut href est le fichier de mise en forme de la page qu’il charge. C’est la méthode la plus utilisée et je vous la recommande. Son seul inconvénient est de devoir jongler entre les deux fichiers. Cependant, son gros avantage est qu’avec un seul fichier CSS, vous pouvez mettre en page plusieurs fichiers html. Ce qui au final peut vous apporter un gain de temps considérable.

Syntaxe du CSS

Pour écrire du code CSS il faut connaître les 3 éléments qui le composent :

1. le sélecteur, c’est la référence de l’élément html que vous allez mettre en forme.
2. La ou les propriétés CSS que vous voulez appliquer. Par exemple color pour la couleur ou font-size pour la taille du texte. Il en existe beaucoup et il est inutile de les connaître par cœur.
3. Les valeurs : pour chaque propriété (comme pour chaque attribut en html) on doit indiquer une valeur. Pour color donc on donnera le nom ou le code d’une couleur comme blue. Pour font-size, on donnera une taille…

De manière schématique, voici à quoi ressemble une feuille de style CSS :

Nous verrons plus tard de quelle manière optimiser une feuille de style pour mieux se repérer, mais retenez bien la forme que prendra toujours du code CSS.

 

Les différents sélecteurs en CSS

1-Le sélecteur universel

La façon pour sélectionner tout le contenu de votre page sans exception est *. En effet ce sélecteur contient toutes les autres. Personnellement, je m’en sers dès le début pour enlever les propriétés qui ont des valeurs par défaut sur les autres sélecteurs. C’est une sorte de remise à 0 qui n’est pas forcément nécessaire, mais qui peut vous servir.

2-Les balises Html

Première manière d’appliquer une mise en forme, les balises que vous avez utilisées pour créer votre page Web sont aussi des sélecteurs en CSS. Cependant, lorsque vous utilisez une balise en tant que sélecteur, vous appliquez des propriétés à toutes les balises de ce type que vous avez dans votre page Web. Par exemple, si vous appliquez la propriété color avec pour valeur red au sélecteur p, tous les paragraphes de votre page seront rouges.

3-Appliquer un style à des éléments spécifiques : class et id

Précédemment, nous avons vu comment mettre un style à tous les paragraphes d’une page. Maintenant, on décide de ne mettre qu’un paragraphe en rouge, c’est là qu’intervient les attributs class et id.Tout d’abord donnons une classe au paragraphe concerné dans notre fichier html :
<p class= »c1″>…</p>
Ensuite, rendons nous dans notre fichier .css et pour sélectionner notre classe nous écrirons :
.c1
{
color: red;
}
Retenez qu’il faut écrire le nom de la classe précédée du point. Pour l’id, c’est presque la même chose, deux points sont différents :

• il est unique, on ne peut pas donner à deux éléments le même id;
• il est précédé du # à la place du point en tant que sélecteur.

4-Donner du style avec les balises html génériques

Je vous recommande d’avoir bien en tête le cours sur les balises de type block et inline afin de mieux comprendre cette partie. Cliquez-ICI pour y accéder.
Si nous souhaitons maintenant donner du style à un mot ou groupe de mots au sein d’un paragraphe ou autre, il va falloir alors en faire un élément. Pour ça utilisons la balise span et plaçons ces mots dedans. Si vous l’avez déjà utilisé vous pouvez lui donner un id ou une class.
Mais si cette fois nous avons besoin d’appliquer un style particulier à un ensemble qui regroupe plusieurs balises et éléments, on va utiliser la balise générique div et placer tous les autres éléments dedans.

 

Écrire un commentaire en CSS

Pour finir, il existe (comme en html), une balise en CSS pour écrire des indications ou des repères qui n’auront pas d’influence sur le reste du code. Ce code ne s’applique que pour un fichier .css .Il s’agit de :
/* écrivez vos commentaires ici */

J’espère que ce premier cours sur le CSS vous a plu, n’hésitez pas à laisser un commentaire ou à partager, JB.