Syntaxe de base des feuilles de styles

les règle de style  CSS ?

Une feuille de style est composée de règles CSS. Ces règles nous permettront au final de donner un style à un ou plusieurs éléments du document ou de site en globalité.

Une règle est divisée en 2 parties : le sélecteur et le bloc de déclaration.
c'est quoi un sélecteur ?  
Un sélecteur détermine les parties de votre document qui seront affectées par un style.
Le sélecteur "sélectionne", par définition, un élément dont on a envie de changer l'aspect
H1,body,p...........etc ==========>ce sont des sélecteurs ==> Body{ }

et c'est quoi un bloc ?
Un bloc de déclaration est tout simplement composé d’une ou plusieurs déclarations, et il est délimité par une paire d'accolades { }le contenu de sélecteurs appelé bloc
Body{

text-align: center;
  color: red;

    }

Qu'est-ce qu'une déclaration ?

Une déclaration est composé d’une propriété et d’une valeur qui sont séparées par deux points.
Grâce à une propriété et une valeur, nous pouvons définir le style qui sera affecté à un élément, c'est-à-dire que nous définirons la couleur, la taille, la typographie, l'aspect général d'un élément.

En résumé

Pour faire un très simple résumé de ce que nous avons vu ci-dessus, le sélecteur sélectionne un élément, tandis que la propriété et la valeur définiront le style de cet élément : ils définiront la couleur, la taille, l'aspect général de l'élément choisi.
Une propriété et une valeur forme une déclaration. Bien évidemment, vous pouvez avoir plusieurs déclarations dans votre feuille de style, et nous aurons donc un bloc de déclaration.
Pour terminer, le "Tout", c'est-à dire le bloc de déclaration et le sélecteur, constitue une règle CSS.

Ecrire une règle CSS

Pour mieux comprendre, voici la syntaxe que nous utilisons pour écrire une règle dans notre feuille de style :

sélecteur {propriété : valeur ;}

Nous pouvons donc constater que notre règle est bien composé :

• d’un sélecteur
• et d’un bloc de déclaration.
• Dans notre exemple, le bloc de déclaration ne contient qu'une seule déclaration.
• Pour terminer, la déclaration est bien composée d’une propriété et de sa valeur.

Exemple d’une règle CSS

Je pense qu'il est nécessaire de voir un exemple pour parfaitement comprendre la structure d'une règle.

J'ai donc choisi une règle CSS que vous pouvez réutiliser, et je vais la décomposer.

Voici notre règle qui servira d’exemple :

h1 {color : red ;} 

Dans notre exemple :

• h1 est le sélecteur.
• color est une propriété
• red est une valeur

Cette règle nous permet donc de définir le style des éléments h1. Ainsi, tout ce qui sera contenu entre la paire de balises <h1> </h1> sera de couleur rouge.

Pourquoi de couleur rouge ?
Parce que nous avons utilisé la propriété color, nous permettant de changer la couleur d’un élément, et nous avons attribué à cette propriété la valeur red.
Pour les non-anglophones, je précise que color signifie "couleur" et que red signifie "rouge".
Pour simplifier, nous pouvons donc traduire notre règle CSS par "Tous les éléments h1 seront de couleur rouge".

Et maintenant ?

Maintenant, vous devez apprendre à lier une feuille de style externe à un document HTML. Si vous ne liez pas votre feuille de style à votre page web, alors aucun style ne sera appliqué à votre page HTML.