Comment appliquer un style CSS aux balises une feuille de style css pour mettre en forme une pge

Ce cours CSS est destiné en priorité aux débutants, a pour but de vous présenter les feuilles de style CSS et de vous guider dans la réalisation de vos propres CSS.
Apprendre le CSS rapidement et facilement en quelques leçons avec des exemples clairs.

Somaire

Appliquer un style aux balises

Dans un CSS, on trouve 3 éléments différents :
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, pour modifier l'apparence de tous les titres <h1>, je dois écrire h1
voir notre tableau des sélecteurs CSS
2 - Des propriétés CSS : 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, comme je vous l'ai dit au début, je n'est pas oblige de les connaître toutes par cœur.
Pour avoir une aidée sur toutes les propriété CSS voir notre référence des propriétés CSS, et mettez la dans vos favoris pour l’utiliser à chaque fois que vous en avez besoin
3 - Les accolades. On écrit le nom de la balise (par exemple h1), et on ouvre des accolades pour mettre les propriétés et les valeurs que l'on veut à l'intérieur. 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 :

Sélectionner 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
feuille de style en cascade
Il faudrait maintenant déclarer notre feuille de style CSS. On ajoute donc la balise <link /> pour indiquer où se trouve notre fichier CSS.
Pour ouvrir le code du fichier essai html click droit puis edit with notepad++
Code : HTML

Sélectionner le code

<!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" xml:lang="fr">
   <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"  title="Essai" 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

Sélectionner 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 XHTML, 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

Sélectionner le code

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

chapitre précédent chapitre suivant