Les sélecteurs et les propriétés

Maintenant que vous êtes un cador du HTML, nous allons voir comment styliser tout ça.
Alors que le HTML sert à structurer notre contenu au moyen de balises, le CSS sert lui à mettre en forme ce contenu.

Où coder en CSS

Nous allons maintenant quitter nos fichiers .html pour ouvrir style.css.
En effet, le CSS est à coder de préférence dans les fichiers type .css.

Avant toute chose, il va falloir dire à notre fichier .html où se trouve notre feuille de style .css. Pour cela, nous allons ajouter une ligne de code dans la balise <head> :

				
					<link rel="stylesheet" type="text/css" href="style.css" />
				
			

Cette balise <link> est autofermante. Elle contient 3 attributs :

Les sélecteurs

La première chose à définir en CSS est le sélecteur. Il s'agit de l'élément auquel nous allons appliquer un style :

				
					p{}
				
			

Ici, je choisis de cibler les balises de type paragraphe. J'utilise donc le même sélecteur qu'en HTML : p.
Notez les crochets { et } qui suivent notre sélecteur. Ils définissent l'endroit où nous allons entrer les propriétés de style.

Les propriétés

Les propriétés permettent de choisir quels aspects nous allons styliser. Par exemple, il est possible de changer la couleur, la police de caractère, la taille, le fond, …
Ici, nous allons modifier la couleur de notre texte avec color:

				
					p{
						color: ;
					}
				
			

Les propriétés se mettent entre les crochets { et }, à la ligne avec une tabulation d'indentation.
La propriété est suivie de : qui permet de lui attribuer une valeur.

Les attributs ne peuvent être inventés. Vous ne pouvez pas taper un mot en anglais en espérant que ça marchera. Nous verrons dans les cours suivants les propriétés les plus utilisées.

Les valeurs

Nous allons maintenant changer la couleur de notre paragraphe. pour cela, nous allons entrer une couleur (ici red) à notre propriété :

				
					p{
						color: red;
					}
				
			

Et voilà le résultat :

Exemple de texte en rouge.

La valeur doit se mettre après les :. Aussi, il faut un ; pour fermer la ligne et pouvoir passer une autre propriété.

Plusieurs propriétés et sélecteurs

Il est possible de définir plusieurs propriétés à un sélecteur. Pour cela, il faut les emplier, les uns à la suite des autres. Par exemple, nous allons changer la taille et la couleur de nos balises p :

				
					p{
						color: red;
						font-size: 16px;
					}
				
			

Si vous devez styliser différents sélecteurs, vous pouvez les mettre les uns après les autres :

				
					p{
						color: red;
						font-size: 16px;
					}
					li{
						color: green;
						font-size: 14px;
					}
				
			

Récapitulatif

Voilà un schéma récaptitulatif du fonctionnement du CSS :

Schéma de fonctionnement du CSS