CSS pour débutant
Lier le CSS au HTML
Un fichier CSS porte l'extension ".css". Le fichier CSS, qui contient toutes les règles CSS que l'on souhaite attribuer aux balises HTML, doit être lié à toutes les pages HTML contenant les balises en question, pour en modifier l'affichage.
La liaison entre le fichier CSS et le ou les fichier HTML se fait grâce à la balise <link>, placée dans la balise <head>
La syntaxe utilisée est la suivante:
<link rel="stylesheet" type="text/css" href="nomdufichiercss.css">
La valeur de l'attribut "rel" indique le type de relation, qui sera toujours "stylesheet" lors de la liaison entre un fichier CSS et un fichier HTML. La valeur de l'attribut "type" définit le type de document lié, qui sera donc toujours "text/css" lors de la liaison entre un fichier CSS et un fichier HTML. La valeur de l'attribut "href" détermine l'adresse de destination du lien, qui est donc ici l'adresse du fichier CSS.
Structure d'un fichier CSS
Un fichier CSS est composé de plusieurs règles. Chaque règle permet de changer l'affichage de plusieurs balises HTML.
Chaque règle est composée de trois parties indiquées dans l’ordre suivant :
-Un sélecteur, qui indique la ou les balises affectées par la règle.
-Une propriété, qui spécifie quel aspect de l’affichage de la ou les balises est affecté par la règle.
-Une valeur, qui indique la valeur, la caractéristique de la propriété.
La propriété et la valeur constituent ce qu’on appelle une déclaration. La valeur est indiquée après la propriété et est précédée du signe deux points (:). Un sélecteur peut comporter plusieurs déclarations. La liste de déclarations est délimitée par les signes { et }, et les différentes déclarations sont séparés par des points-virgules (;).
On a donc :
sélecteur {
propriété1: valeur1;
propriété2: valeur2;
}
Ex:
body {
font-family: tahoma;
font-size: medium;
color: grey;
}
Dans l'exemple, "body" correspond au sélecteur, c'est donc le body qui est affecté par la règle, modifiant ainsi son affichage. "font-family" correspond à la première propriété du body que l'on souhaite modifier; il indique que l'aspect modifié est la police d'écriture. "tahoma" correspond à la valeur attribuée à la première propriété modifiée; il indique donc que la police d'écriture du body sera "tahoma". "font-size" correspond à la deuxième propriété, qui indique que l'on souhaite modifier la taille de l'écriture, et "color" correspond à la troisième propriété, qui indique que l'on souhaite modifier la couleur de l'écriture. Les trois propriétés sont bien séparées par des ";".
Oui, MAIS...
... J'aimerais en savoir plus sur les sélecteurs !
... J'aimerais en savoir plus sur les valeurs !
