Catégories
Apprendre le CSS

Comment utiliser CSS ?

Lorsqu’un navigateur lit une feuille de style, il formate le document HTML en fonction des informations contenues dans la feuille de style.


Trois façons d’insérer du CSS

Il y a trois façons d’insérer une feuille de style:

  • Feuille de style externe
  • Feuille de style interne
  • Style en ligne

Feuille de style externe

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!

Chaque page doit inclure une référence au fichier de feuille de style externe à l’intérieur de l’élément <link>. L’élément <link> va à l’intérieur de la section <head>:

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

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucune balise HTML. Le fichier de feuille de style doit être enregistré avec une extension .css.

Voici à quoi ressemble « style.css »:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Remarque: N’ajoutez pas d’espace entre la valeur de la propriété et l’unité (telle que 
margin-left: 20 px;). 
La manière correcte est:
margin-left: 20px;

Feuille de style interne

Une feuille de style interne peut être utilisée si une seule page a un style unique.

Les styles internes sont définis dans l’élément <style>, dans la section <head> d’une page HTML:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

Styles en ligne

Un style en ligne peut être utilisé pour appliquer un style unique à un seul élément.

Pour utiliser des styles inline, ajoutez l’attribut style à l’élément concerné. L’attribut style peut contenir n’importe quelle propriété CSS.

L’exemple ci-dessous montre comment changer la couleur et la marge gauche d’un élément <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Conseil: Un style en ligne perd beaucoup des avantages d’une feuille de style (en mélangeant le contenu avec la présentation). 
Utilisez cette méthode avec parcimonie.

Plusieurs feuilles de style

Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style lue sera utilisée. 

Exemple

Supposons qu’une feuille de style externe ait le style suivant pour l’élément <h1>:

h1 {
  color: blue;
}

supposons ensuite qu’une feuille de style interne possède également le style suivant pour l’élément <h1>:

h1 {
  color: orange;    
}

Si le style interne est défini après le lien vers la feuille de style externe, les éléments <h1> seront « orange »:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Cependant, si le style interne est défini avant le lien vers la feuille de style externe, les éléments <h1> seront « blue »:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Commande en cascade

Quel style sera utilisé quand il y a plus d’un style spécifié pour un élément HTML?

Tous les styles d’une page seront « mis en cascade » dans une nouvelle feuille de style « virtuelle » selon les règles suivantes, dans lesquelles le numéro un a la priorité la plus élevée:

  1. Style en ligne (à l’intérieur d’un élément HTML)
  2. Feuilles de style externes et internes (dans la section principale)
  3. Navigateur par défaut

Ainsi, un style en ligne a la priorité la plus haute et remplace les styles internes et externes et les valeurs par défaut du navigateur.

Catégories
Apprendre le CSS

Syntaxe et sélecteurs CSS

Syntaxe CSS

Un ensemble de règles CSS se compose d’un sélecteur et d’un bloc de déclaration:

Le sélecteur pointe sur l’élément HTML que vous souhaitez styler.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration inclut un nom de propriété CSS et une valeur, séparés par deux points.

Une déclaration CSS se termine toujours par un point-virgule et les blocs de déclaration sont entourés d’accolades.

Dans l’exemple suivant, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge:

p {
  color: red;
  text-align: center;
}

Sélecteurs CSS

Les sélecteurs CSS permettent de « rechercher » (ou de sélectionner) des éléments HTML en fonction de leur nom, id, classe, attribut, etc.


Le sélecteur d’élément

Le sélecteur d’élément sélectionne les éléments en fonction du nom de l’élément.

Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci (dans ce cas, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge):

p {
  color: red;
  text-align: center;
}

Le sélecteur d’identifiant

Le sélecteur id utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique.

L’identifiant d’un élément doit être unique dans une page, le sélecteur d’identifiant sert donc à sélectionner un élément unique!

Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l’identifiant de l’élément.

La règle de style ci-dessous sera appliquée à l’élément HTML avec id="para1":

#para1 {
  text-align: center;
  color: red;
}

Remarque: un identifiant ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Le sélecteur de classe

Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique.

Pour sélectionner des éléments avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe.

Dans l’exemple ci-dessous, tous les éléments HTML avec class="center" seront en rouge et centrés:

.center {
  text-align: center;
  color: red;
}

Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.

Dans l’exemple ci-dessous, seuls les éléments <p> avec class = « center » seront alignés au centre:

p.center {
  text-align: center;
  color: red;
}

Les éléments HTML peuvent également faire référence à plus d’une classe.

Dans l’exemple ci-dessous, l’élément <p> sera stylé selon la classe center et la classe large:

<p class="center large">Ce paragraphe fait référence à deux classes.</p>

Remarque: Un nom de classe ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Sélecteurs de regroupement

Si vous avez des éléments avec les mêmes définitions de style, comme ceci:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Il sera préférable de regrouper les sélecteurs pour minimiser le code.

Pour regrouper les sélecteurs, séparez chaque sélecteur par une virgule.

Dans l’exemple ci-dessous, nous avons regroupé les sélecteurs à partir du code ci-dessus:

h1, h2, p {
  text-align: center;
  color: red;
}

Commentaires CSS

Les commentaires sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifiez le code source à une date ultérieure.

Les commentaires sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */. Les commentaires peuvent également s’étendre sur plusieurs lignes:

p {
  color: red;
  /* Ceci est un commentaire sur une ligne */
  text-align: center;
}

/* Ceci
est un commentaire
sur plusieurs
lignes */

Catégories
Apprendre le CSS

Introduction au CSS

  • CSS signifie Cascading Style Sheets
  • CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur un autre support.
  • CSS économise beaucoup de travail . Il peut contrôler la mise en page de plusieurs pages Web en même temps
  • Les feuilles de style externes sont stockées dans des fichiers CSS

Pourquoi utiliser CSS?

CSS permet de définir les styles de vos pages Web, notamment la conception, la disposition et les variations d’affichage pour différents appareils et tailles d’écran. 


CSS a résolu un gros problème

Le code HTML n’a JAMAIS été conçu pour contenir des balises permettant de formater une page Web!

HTML a été créé pour décrire le contenu d’une page Web, comme:

<h1> Ceci est un titre de niveau 1 </h1>

<p> Ceci est un paragraphe. </p>

Lorsque des balises telles que <font> et des attributs de couleur ont été ajoutés à la spécification HTML 3.2, cela a créé un cauchemar pour les développeurs Web. Le développement de grands sites Web, où les polices et les informations de couleur étaient ajoutées à chaque page, est devenu un processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

CSS a supprimé la mise en forme du style de la page HTML!

Si vous ne savez pas ce que HTML est, nous vous suggérons de lire notre cours HTML .

CSS économise beaucoup de travail!

Les définitions de style sont normalement enregistrées dans des fichiers .css externes.

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!