Où placer son code CSS ?

Où placer son code CSS ? est la première question qui tombe sur la tête de n’importe quel débutant, dans cette technologie ou ce langage, vous avez 3 possibilité d’écrire de CSS :
  • Dans un fichier qui porte l’extension « .css »
  • Entre les deux balises du document HTML
  • Directement à l’intérieur d’une balise comme un attribut
Vous vous rappeler pas des attribues et des balises, revenez a cette partie de mon tutoriel HTML.
La forme générale d’une balise avec un attribut est comme suit :
<balise attribut= "value"></balise> // en cas de balise paire
<balise attribut= "value" /> // en cas de balise seul

Notez que pour une balise donnée, on peut lui attribuer plusieurs attributs, chacun avec un sens différent.
La méthode que je recommande fortement est celle d’un fichier autre que le fichier HTML, et qui porte l’extension « .css ». Nous allons vois ces trois cas.

A l’intérieur d’une balise

Voici un exemple d’utilisation :
	<!DOCTYPE html>
	<html>
	<head>
		<title>Premier TP CSS</title>
	</head>
	<body style="background-color: #FF0000;">
		<p>ceci est une page verte</p>
	</body>
	</html>
Voici un exemple d’utilisation :
Remarquez la balise ouvrante de , l’attribut style design le style qui sera attribuer a la balise body, à l’intérieur de style on trouve des propriétés CSS, ces propriété sert à définir le l’apparence de la balise body sur le navigateur, testez le code et remarquez que sa donne ça :

	<!DOCTYPE html>
	<html>
	<head>
		<title>Premier TP CSS</title>
	</head>
	<body>
		<p style="background-color: #FF0000;">ceci est une page verte</p>
	</body>
	</html>
Avec ce deuxième code, vous aurez une fenêtre comme cella :

Sur ce deuxième code, vous avez le background de la balise « p » seulement qui en vert. La propriété background-color attribut une couleur a l’arrière plan de la balise à laquelle est appliquée cette propriété.

Entre les deux balises head du document HTML

Pour attribuer un style avec cette méthode, on déclare plus les propriétés CSS à l’intérieur d’une balise HTML, mais cette fois ci on écrit seulement le nom de la balise à laquel on veut lui attribuer un style CSS, puis entre accolades on déclare les propriétés qu’on attribuera, y’a pas mieux qu’un petit code de teste :
<!DOCTYPE html>
<html>
	<head>
		<title>Premier TP CSS</title>
	<style>
		p{
			background-color: #00FF00;
		}
	</style>
</head>
<body>
	<p>ceci est une page verte</p>
</body>
</html>
Testez ce code, et vérifiez que vous allez avoir quelque chose qui ressemble à ceci

Ah oui, mais sa donne le même résultat que le code d’avant !!
Oui, évidement, on a utilisé la même propriété CSS qu’avant, mais avec une autre écriture. Avec cette méthode de définition de propriété CSS, il vous suffit juste de déclarer le nom de la balise, puis ouvrez une accolade ouvrante, définissez vos propriété CSS pour cette balise, puis fermez l’accolade, c’est simple et c’est très facile, ce qui peut être vous posera un petit problème au temps que débutant, c’est le nombre de propriété CSS existante, sachez qu’il existe beaucoup, mais rassurez vous, à force de travailler dessus, vous allez vous rappeler, sinon on appelle Google, des milliers du tutoriel et des mémento existe sur ça.
Résumons ce que nous avons vu
Nous avons vu jusqu’ici deux des trois méthodes d’écriture de propriété CSS que je vous ai annoncé au début de ce cour, il reste celle que je vous recommande, et que j’expliquerai dans le prochaine cour. Ces deux méthode s’écrivent directement au sein d’un document HTML, une c’est en déclarant l’attribut style directement dans une balise, puis vous définissez autant de propriété que vous voulez,
La deuxième consiste a isolé les propriétés CSS des balise HTML, en déclarant ses dernières dans la balise head du document HTML.
Maintenant attaquons la troisième méthode que je vous recommande.