Comment appliquer un style CSS aux balises
en utilisant une feuille de style css pour mettre en forme une page web

En quoi CSS est-il différent de HTML ?

La première chose à comprendre lorsqu'on aborde le sujet des feuilles de style en cascade est de savoir quand utiliser un langage de style comme les feuilles de style en cascade et quand utiliser un langage de balisage comme le langage HTML.

Tout le contenu essentiel d'un site Web doit être ajouté au site à l'aide d'un langage de balisage tel que le HTML. La présentation du contenu du site Web doit être définie par un langage de style tel que le CSS.
Les billets de blog, les titres de page, les vidéos, les fichiers audio et les images qui ne font pas partie de la présentation de la page Web doivent tous être ajoutés à la page Web à l'aide du langage HTML. Les images et les couleurs d'arrière-plan, les bordures, la taille de la police, la typographie et la position des éléments sur une page Web doivent être définies par CSS.

Il est important de faire cette distinction, car si l'on n'utilise pas le bon langage, il peut être difficile d'apporter des modifications au site Web à l'avenir et de créer des problèmes d'accessibilité et de convivialité pour les visiteurs du site qui utilisent un navigateur en mode texte uniquement ou un lecteur d'écran.

Syntaxe CSS

La syntaxe CSS comprend les sélecteurs, les propriétés, les valeurs, les déclarations, les blocs de déclaration, les ensembles de règles, les at-rules et les instructions.

1 - Des sélecteurs : un selecteur peut être un nom de balise, on écrit les noms des balises dont on veut modifier l'apparence.
Soit par exemple, pour modifier l'apparence de tous les titres <h1>, je dois écrire h1, ou de touts les paragraphe je doit écrire p
En d'autre termes un sélecteur est un extrait de code utilisé pour identifier le ou les éléments de la page Web qui doivent être affectés par les styles.
voir notre tableau des sélecteurs CSS

2 - Des propriétés CSS : Une propriété est l'aspect de l'élément qui doit être affecté. Par exemple, la couleur, le remplissage, la marge, l'arrière-plan ,la tail et la posision sont quelques-unes des propriétés CSS les plus couramment utilisées.
C'est à dire que les "effets de style" de la page sont rangés dans des propriétés:
Il y a par exemple:
la propriété color qui permet d'indiquer la couleur du texte
la propriété font-size qui permet d'indiquer la taille du texte etc .
.. Il y a beaucoup de propriétés CSS et, mais je ne suis pas oblige de les connaître toutes par cœur.
Pour avoir une aidée sur toutes les propriété CSS voir notre guide des propriétés CSS, et mettez la dans vos favoris pour l’utiliser à chaque fois que vous en avez besoin

3 - Une valeur est utilisée pour définir une propriété. Par exemple, la valeur rouge peut être attribuée à la propriété color et on écrit color : red ;.
La combinaison d'une propriété et d'une valeur s'appelle une déclaration.
une ou plusieurs déclarations sont appliquées à un seul sélecteur. Un bloc de déclaration est le terme utilisé pour désigner l'ensemble des déclarations appliquées à un seul sélecteur.
Un bloc de declarations doit toujours etre mis entre accolade
Un sélecteur unique et le bloc de déclaration qui le suit, combinés, constituent une règle. Les accolades. On écrit le nom du selecteur (par exemple h1), et on ouvre une accolade pour mettre les propriétés et les valeurs que l'on veut à l'intérieur et on ferme l'accolade.
Ce qui donne la syntaxe suivante:

sélecteur{
propriete1: valeur ;
propriete2: valeur ;
propriete3: valeur ;
}

Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un "point-virgule" (;) . Le point-virgule n'est pas obligatoire s'il n'y a qu'une seule propriété,mai ne les oubliez pas s'il y a plus qu'une propriété.

Si vous oubliez le point virgule l’explorateur ne pourra pas comprendre le code CSS et donc ne l’exécutera pas tout simplement comme si ce code CSS n’existe pas.

Si par exemple nous voulons modifier tous les paragraphes pour qu'ils soient écrits en bleu, avec une taille de 18 pixels.
Comme tous les textes de mes paragraphes sont entre des balises <p> </p>, p sera donc mon sélecteur, je vais donc écrire le code CSS suivant :
Code CSS :

Exemple :      Copier le code

p{
color: blue; 
font-size: 18px; 
}

Ouvrez le notepad++, faites Nouveau fichier puis dans le menu langage choisissez CSS .
Taper le code ci-dessus.
Enregistrez ce code CSS dans un fichier par exemple "essai.css", dans le même dossier que notre fichier essai.html .
Vous obtiendrez ça

Il faudrait maintenant déclarer notre feuille de style CSS. Et comme nous vu dans le chapitre precedent. Nous devons declarer la feuille de style css avec la balise link dans le head de la page html que nous voulons affecter par le css. On ajoute donc la balise <link /> pour indiquer où se trouve notre fichier CSS.
Pour ouvrir le code du fichier essai.html que nous avons créé lors du chapitre précédent, click droit puis edit with notepad++ et ajouter la blise link comme indiqué dans le code qui suit
Code : HTML

Exemple :      Copier le code

<!DOCTYPE html>
<html>
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />       
<link rel="stylesheet" media="screen" type="text/css" href="essai.css"/>
</head>
<h1>Grand titre</h1>
<p>Ceci est un paragraphe!</p>
<h2>Un titre</h2>
<p>Ceci est un second  paragraphe!</p>
<p>Ceci est un troisiéme paragraphe!</p>
<body>
</body>
</html>

On n'ouvre jamais directement un fichier .css
Modifiez le fichier CSS, en mettant une autre couleur ("red" pour rouge par exemple, et "20px" pour avoir un texte écrit plus gros).
Pour savoir plus sur les noms de couleurs reglementaires que vous pouvez utiliser voir: Noms de couleurs
Ajoutez le code CSS suivant à votre feuille de style essai.css :
Code : CSS

Exemple :      Copier le code

h1
{
color: red;
}
h2
{
color: green;
}

Cela signifie : "Je veux que le texte de mes titres <h1> soient écrits en rouge" Et <h2> en vert
Votre page Web commence à prendre de la couleur ?

Les commentaires dans le CSS

Comme en HTML, on peut mettre des commentaires. Qui les commentaires nous indiquent des informations, pour nous y retrouver dans un long fichier CSS aussi.
Pour faire un commentaire en CSS: vous tapez pour commencer le commentaire /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être sur une ou plusieurs lignes. Par exemple :
Code : CSS

Exemple :      Copier le code

/*essai. css---------Par Mr xxxxxx Fichier créé le 1/11/2008*/
p
{
color: blue; /* Les paragraphes seront bleus */
font-size: 18px; /* Le texte des paragraphes aura la taille de 18 pixels exact !!! */
}

Jusque à ce moment si on utilise les feuilles de style en cascade, le style est appliqué à toutes les balises dont le nom est utilisé comme sélecteur, mais que faire si on veut appliqué un style à une balise ou un nombre bien défini et non pas à toutes les balises ?
On utilise ce que nous appelons les classes et les id !
Et c’est l’objet du chapitre suivant.

chapitre précédent     chapitre suivant