DEVENIR-WEBMASTER.COM Log In
 2
Faire le quizz download close

Débuter en CSS. Coder votre première page en CSS

Visiter ma chaine Youtube

# Styler le titre avec CSS close

On va commencer par la couleur. Pour appliquer une couleur magenta à ce texte il faut écrire une règle CSS. Le mieux est d'écrire l'ensemble des règles dans un fichier séparé avec une extension css.

Première règle CSS

Il faut ensuite lié ce fichier CSS au code HTML auquel il s'applique. On va intervenir ici sur le code HTML. On va ajouter cet élément

Element link CSS
Fichier CSS séparé

On va maintenant regarder précisément la syntaxe des règles CSS.

Sur la partie gauche on a le sélecteur. Sur la partie droite on a un bloc de déclaration. Le bloc de déclaration est délimité par une paire d'accolades.

Syntaxe d'une règle CSS

Au niveau du sélecteur, il s'agit de sélectionner les éléments HTML du document sur lesquels va s'appliquer le bloc de déclarations.

Le bloc de déclarations peut quant à lui contenir une ou plusieurs déclarations.

Je vais continuer à styler le titre en ajoutant deux autres déclarations. Ici on voit bien apparaître le bloc de déclarations.

Première déclaration CSS

# Styler l'image avec CSS close

Je veux centrer l'image dans son paragraphe. Ici je ne peux pas utiliser le nom de l'élément c'est à dire p dans le sélecteur car je sélectionnerais tous les paragraphes et tous les paragraphes seraient centrés. J'utilise pour sélectionner le paragraphe un identificateur. Les webmasters disent qu'ils ciblent le paragraphe.

Je cible le paragraphe de manière à centrer l'image dans le paragraphe. Noter bien que je n'interviens pas sur l'image mais sur le contenu du paragraphe qui se trouve être l'image.

Ici je dois d'abord intervenir sur le code du HTML pour placer l'identificateur.

Placer un identificateur en HTML

Puis sur le CSS. Notez bien les aller-retour que l'on sera amené à faire entre le code HTML et le code CSS.

Cibler un identificateur en CSS

Attention, l'identificateur est utilisé pour repérer le paragraphe et à ce titre il ne peut qu'être unique dans le document. On ne pourrait pas repérer deux éléments différents avec le même nom d'identificateur. Il y aurait ambiguïté.

# Styler le tableau avec CSS close

Je vais mettre des bordures noires. Je centre le tableau dans la page. Puis je vais centrer le contenu des cellules. Ce n'est pas la même méthode pour centrer. On verra les méthodes de centrage dans une vidéo dédiée au centrage en CSS.

Un identificateur en CSS

# Utilisation d'une classe en CSS close

J'ai rajouté une rubrique Résumé avec deux où trois paragraphes qui ont les mêmes caractéristiques de rendu.

L'objectif c'est de montrer comment on va pouvoir appliquer ces caractéristiques de rendu à ces paragraphes. Je vais prendre un style italique et une taille de police de 18 pixels et je vais regrouper ces caractéristiques dans une classe. Je vais maintenant me servir de cette classe pour appliquer ces styles à tous les paragraphes. En CSS je sélectionne tous les paragraphes qui ont cette classe et je leur applique ces caractéristiques de rendu.

Si je change une caractéristique dans la classe elle est appliquée à tous les paragraphes de cette page et éventuellement des toutes les pages qui pourraient partager cette feuille de style. On peut imaginer que je fasse d'autres fiches concernant d'autres jeu vidéo. On voit tout l'intérêt de ce regroupement dans une seule et même classe.

Une Classe en CSS
Une Classe en HTML

# Bilan en ce qui concerne la sélection CSS close

On a vu trois types de sélection avec trois sélecteurs différents

  1. La sélection d'un seul élément au moyen d'un identificateur.
  2. La sélection de plusieurs éléments choisis au moyen d'une classe.
  3. La sélection de tous les éléments qui ont les mêmes balises avec le sélecteur d'éléments.