Appliquer un style CSS aux balises

Hébergement de sites Internet


Recevez 1000 visiteurs par jour en provenance de Google
Téléchargez gratuitement notre guide explicatifgagner argent

Appliquer un style CSS aux balises




Formation Affiliation Flash

Ce cours, destiné en priorité aux débutants, a pour but de vous présenter les feuilles de style 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.

Appliquer un style aux balises

Dans un CSS, on trouve 3 éléments différents :
- Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, pour modifier l'apparence de tous les titres <h1>, je dois écrire h1
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 ne vous oblige pas à les connaître toutes par cœur.
- Les accolades. On écrit le nom de la balise (par exemple h1), et on ouvre des accolades pour mettre les propriétés et valeurs que l'on veut à l'intérieur.
balise1(exemple : h1)
{
propriete: valeur ;
propriete: valeur ;
propriete: 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 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>, je vais donc écrire le code CSS suivant :
Code CSS : 

	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 "essai.css" par exemple, 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 

	<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>
	   <body>

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).
ajoutez le code CSS suivant à votre feuille de style essai.css :
Code : CSS 

	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 nous indique des informations, pour nous y retrouver dans un long fichier CSS.
Pour faire un commentaire: 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 

	/*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 !!! */
	}


Cours precedent:
cours precedent  Introduction où mettre du CSS ?


Accueil du site

 Cours suivant:
Utiliser les class et id    cours suivant



location serveurs hébergeur de sites internet en France










purchase text links



    Active Search Results     Référencé dans l'Annuaire Mirti          Image     annuaire de france