Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant la mise en page du texte. Dans ce tuto , nous allons voir  La liste à puces avec CSS qui peut être réalisée en utilisant diverses propriétés et techniques.

• Liste à puces simple
• Liste à puces avec des carrés vides
• Liste à puces avec des cercles vides
• Liste à puces avec des images personnalisées
• Liste ordonnée avec des chiffres
• Liste ordonnée avec des lettres minuscules
• Liste ordonnée avec des lettres majuscules

Liste à puces simple

Si vous souhaitez créer une liste à puces simple en CSS, voici un exemple de code que vous pouvez utiliser :

<ul class="liste-a-puces-simple">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-simple {
    list-style-type: disc; /* Style de puce par défaut - disque plein */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-simple est appliquée à la liste à puces (<ul>), et la propriété list-style-type est utilisée pour définir le style de la puce sur un disque plein. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des carrés vides

Si vous souhaitez créer une liste à puces avec des carrés vides en CSS, vous pouvez utiliser la propriété list-style-type et définir sa valeur sur « square ». Voici un exemple de code :

<ul class="liste-a-puces-carrés-vides">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-carrés-vides {
    list-style-type: square; /* Utilisation de carrés vides comme style de puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-carrés-vides est appliquée à la liste à puces (<ul>), et la propriété list-style-type est définie sur « square », ce qui utilise des carrés vides comme style de puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des cercles vides

Si vous souhaitez créer une liste à puces avec des cercles vides en CSS, vous pouvez utiliser la propriété list-style-type et définir sa valeur sur « circle ». Voici un exemple de code :

 <ul class="liste-a-puces-cercles-vides">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-cercles-vides {
    list-style-type: circle; /* Utilisation de cercles vides comme style de puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-cercles-vides est appliquée à la liste à puces (<ul>), et la propriété list-style-type est définie sur « circle », ce qui utilise des cercles vides comme style de puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Liste à puces avec des images personnalisées

Si vous souhaitez créer une liste à puces avec des images personnalisées en CSS, vous pouvez utiliser la propriété list-style-image et spécifier l’URL de l’image que vous souhaitez utiliser comme puce. Voici un exemple de code :

<ul class="liste-a-puces-images-personnalisees">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

.liste-a-puces-images-personnalisees {
    list-style-image: url('ico_liensexterne.png'); /* URL de l'image à utiliser comme puce */
    padding-left: 20px; /* Espacement à gauche pour les puces */
}

Dans cet exemple, la classe liste-a-puces-images-personnalisees est appliquée à la liste à puces (<ul>), et la propriété list-style-image est définie sur l’URL de l’image que vous souhaitez utiliser comme puce. De plus, padding-left est utilisé pour ajouter un espacement à gauche pour les puces, améliorant ainsi la mise en page visuelle.

Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant la mise en forme du texte. Dans ce tuto , nous allons voir  La mise en page du texte avec CSS qui peut être réalisée en utilisant diverses propriétés et techniques.

• Alignement horizontal du texte
• Décoration du texte
• Transformer les lettres en majuscules ou minuscules
• Retrait de la première ligne de texte
• Espacement des Lignes
• Espacement des Caractères
• Espacement des mots
• Soulignement personnalisé
• Ombre de Texte

Alignement du Texte (text-align):

La propriété CSS text-align est utilisée pour définir l’alignement horizontal du texte à l’intérieur d’un élément. Voici comment utiliser text-align avec différentes valeurs :

• text-align: left
• text-align: right
• text-align: center
• text-align: justify
• text-align: initial
• text-align: inherit

 <h1>Alignement du Texte</h1>
   <p>La propriété CSS text-align est utilisée pour définir l'alignement horizontal du texte à l'intérieur d'un élément. </p>
   <p id="gauche">Voici comment utiliser text-align avec différentes valeurs :</p>

h1 {
    text-align: center;
}
p {
    text-align: justify;
}
#gauche{
    text-align: right;
}

La propriété text-align est particulièrement utile pour le placement du texte à l’intérieur des blocs, comme les paragraphes, les divs, les titres, etc. Vous pouvez choisir la valeur qui convient le mieux à votre conception en fonction de l’alignement souhaité.

Décoration du texte

La propriété CSS text-decoration est utilisée pour spécifier la décoration du texte, telle que le soulignement, la ligne médiane, la ligne supérieure, etc. Voici comment utiliser text-decoration avec différentes valeurs :

• Soulignement : text-decoration: underline;
• Ligne au Milieu (Barré) : text-decoration: line-through;
• Soulignement et Ligne au Milieu : text-decoration: underline line-through;
• Aucune Décoration : text-decoration: none;
• Une ligne au-dessus du texte : text-decoration: overline;
• Une ligne au milieu du texte : text-decoration: line-through;
• Une ligne sous le texte : text-decoration: underline ;
• Un texte clignotant : text-decoration:blink :(note : cette valeur n’est généralement pas recommandée car elle peut être gênante et n’est pas bien supportée).

 <h1>Décoration du texte</h1>
    <p>La propriété CSS text-decoration est utilisée pour spécifier la décoration du texte, telle que le soulignement, la ligne médiane, la ligne supérieure, etc. Voici comment utiliser text-decoration avec différentes valeurs</p>
    <h2>text-decoration: line-through;</h2>
    <h3>text-decoration: underline line-through;</h3>
    <h4>text-decoration: overline;</h4>

h1{
    text-decoration: underline;
}
h2{
    text-decoration: line-through;
}
h3{
    text-decoration: underline line-through;
}
h4{
    text-decoration: overline;
}
p{
    text-decoration:none ;
}

Transformer les lettres en majuscules ou minuscules

En CSS, vous pouvez utiliser les propriétés text-transform pour transformer le texte en majuscules, minuscules ou d’autres styles de casse. Voici comment vous pouvez l’utiliser :

Pour transformer le texte en majuscules :

text-transform: uppercase;

Pour transformer le texte en minuscules :

text-transform: lowercase;

Pour transformer uniquement la première lettre de chaque mot en majuscule :

text-transform: capitalize;

Pour ne pas appliquer de transformation de casse au texte (valeur par défaut) :

text-transform: none;

 <h1> text-transform: uppercase;</h1>
    <h2>text-transform: lowercase;</h2>
    <h3>text-transform: capitalize;</h3>

h1{
    text-transform: uppercase;
}
h2{
    text-transform: lowercase;
}
h3{
    text-transform: capitalize;
}

Retrait de la première ligne de texte

Pour effectuer un retrait de la première ligne de texte en CSS, vous pouvez utiliser la propriété text-indent. Cependant, il est important de noter que cette propriété spécifie l’indentation de la première ligne d’un élément de bloc, et non la première ligne d’un paragraphe spécifique.

Voici un exemple d’utilisation de text-indent pour rétracter la première ligne de tous les paragraphes <p> dans votre document :

<body>
    <p>Pour effectuer un retrait de la première ligne de texte en CSS, vous pouvez utiliser la propriété text-indent.</p>
    <p>Cependant, il est important de noter que cette propriété spécifie l'indentation de la première ligne d'un élément de bloc, et non la première ligne d'un paragraphe spécifique.</p>
</body>

p {
    text-indent: 20px; 
}

Cela signifie que chaque paragraphe <p> aura une indentation de 20 pixels à partir de la marge gauche.

Si vous souhaitez appliquer le retrait uniquement à certains paragraphes et non à tous, vous pouvez utiliser une classe ou un sélecteur plus spécifique. Par exemple :

.retrait-premiere-ligne {
    text-indent: 20px;
}

Espacement des Lignes

L’espacement entre les lignes en CSS peut être contrôlé à l’aide de la propriété line-height. Cette propriété définit la hauteur de ligne, c’est-à-dire l’espace vertical entre les lignes de texte à l’intérieur d’un élément.

Voici comment vous pouvez l’utiliser :

<h1>Espacement des Lignes</h1>
<p>L'espacement entre les lignes en CSS peut être contrôlé à l'aide de la propriété line-height. Cette propriété définit la hauteur de ligne, c'est-à-dire l'espace vertical entre les lignes de texte à l'intérieur d'un élément.</p>

h1 {
    line-height: 50px; 
}
p {
    line-height: 2; 
}

Dans le premier exemple, la propriété line-height est définie à 50 pixels pour l’en-tête <h1>.

Dans le deuxième exemple, la propriété line-height est définie à 2, ce qui signifie que la hauteur de ligne sera égale à 2 fois la taille de la police actuelle pour le paragraphe <p>.

Vous pouvez également utiliser des unités sans dimension pour spécifier la hauteur de ligne. Par exemple, line-height: 2; et line-height: 200%; produiraient le même résultat.

L’espacement des lignes peut également être hérité des éléments parent. Par défaut, la plupart des navigateurs définissent une hauteur de ligne automatique qui s’adapte à la taille du texte.

Il est important de choisir une valeur appropriée pour la line-height en fonction de la conception et de la lisibilité de votre site web. Un espacement des lignes adéquat peut améliorer la lisibilité du texte.

Espacement des Caractères

La propriété CSS letter-spacing est utilisée pour ajuster l’espacement entre les caractères d’un texte. Elle permet de spécifier la distance supplémentaire ou réduite entre chaque paire de caractères dans une chaîne de texte.

Voici comment vous pouvez utiliser letter-spacing :

<h1>Espacement des Caractères</h1>
<p>La propriété CSS letter-spacing est utilisée pour ajuster l'espacement entre les caractères d'un texte. Elle permet de spécifier la distance supplémentaire ou réduite entre chaque paire de caractères dans une chaîne de texte.</p>

/* Espacement des caractères avec une valeur fixe en pixels */
p {
    letter-spacing: 2px; /* Vous pouvez ajuster la valeur selon vos besoins */
}

/* Espacement des caractères avec une valeur en unités em */
h1 {
    letter-spacing: 0.1em; /* Vous pouvez ajuster la valeur selon vos besoins */
}

Dans le premier exemple, la propriété letter-spacing est définie à 2 pixel pour le paragraphe <p>, ce qui augmentera l’espacement entre les caractères de deux pixel.

Dans le deuxième exemple, la propriété letter-spacing est définie à 0.1 em pour l’en-tête <h1>, ce qui ajustera l’espacement en fonction de la taille de la police.

Vous pouvez également utiliser des valeurs négatives pour rapprocher les caractères :

p {
    letter-spacing: -1.5px; 
}

Espacement des mots

L’espacement entre les mots en CSS peut être contrôlé à l’aide de la propriété word-spacing. Cette propriété définit l’espacement additionnel entre les mots dans un texte.

Voici comment vous pouvez utiliser word-spacing :

 <h1>Espacement des mots</h1>
 <p>L'espacement entre les mots en CSS peut être contrôlé à l'aide de la propriété word-spacing. Cette propriété définit l'espacement additionnel entre les mots dans un texte.</p>

p {
    word-spacing: 7px; /* Vous pouvez ajuster la valeur selon vos besoins */
}

/* Espacement des mots avec une valeur en unités em */
h1 {
    word-spacing: 1em; /* Vous pouvez ajuster la valeur selon vos besoins */
}

Dans le premier exemple, la propriété word-spacing est définie à 7 pixels pour le paragraphe <p>, ce qui augmentera l’espacement entre les mots de 7 pixels.

Dans le deuxième exemple, la propriété word-spacing est définie à 1em pour l’en-tête <h1>, ce qui ajustera l’espacement en fonction de la taille de la police.

Vous pouvez également utiliser des valeurs négatives pour rapprocher les mots

Soulignement personnalisé

Si vous souhaitez créer un soulignement personnalisé en CSS, vous pouvez utiliser la propriété border-bottom pour créer une bordure en bas de l’élément que vous souhaitez souligner. Ensuite, vous pouvez styliser cette bordure pour obtenir un effet de soulignement personnalisé.

Voici un exemple simple de soulignement personnalisé en utilisant la propriété border-bottom :

.souligne-personnalisee {
    border-bottom: 2px solid #3498db; /* Couleur et épaisseur de la bordure */
    padding-bottom: 3px; /* Espace entre le texte et la bordure */
   
}

Dans cet exemple, la classe .souligne-personnalisee crée une bordure en bas de l’élément avec une couleur bleue (#3498db) et une épaisseur de 2 pixels. La propriété padding-bottom est utilisée pour ajouter de l’espace entre le texte et la bordure.

Vous pouvez appliquer cette classe à n’importe quel élément HTML que vous souhaitez souligner de manière personnalisée :

 <p class="souligne-personnalisee">Texte avec soulignement personnalisé.</p>

Vous pouvez personnaliser davantage l’aspect du soulignement en ajustant les valeurs dans la classe CSS en fonction de vos besoins spécifiques. Vous pouvez également utiliser des propriétés supplémentaires telles que border-radius pour arrondir les coins de la bordure si nécessaire.

Ombre de Texte

Pour ajouter une ombre au texte en CSS, vous pouvez utiliser la propriété text-shadow. Cette propriété permet de spécifier une ou plusieurs ombres qui seront appliquées au texte.

Voici un exemple simple :

<p class="texte-ombre">Une ombre au texte </p>

.texte-ombre {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Dans cet exemple, la classe .texte-ombre ajoute une ombre au texte avec les caractéristiques suivantes :

• Déplacement horizontal de l’ombre : 2px.
• Déplacement vertical de l’ombre : 2px.
• Flou de l’ombre : 4px.
• Couleur de l’ombre : rgba(0, 0, 0, 0.5) (noir avec une opacité de 0.5).

Vous pouvez ajuster ces valeurs en fonction de vos besoins spécifiques. Par exemple, vous pouvez modifier la couleur, l’opacité, la taille du déplacement horizontal et vertical, ainsi que la taille du flou.

.texte-ombre-personnalisee {
    text-shadow: 3px 3px 2px rgba(255, 0, 0, 0.8);
}

Dans cet exemple, la classe .texte-ombre-personnalisee applique une ombre rouge avec un déplacement horizontal et vertical de 3 pixels, une taille de flou de 2 pixels, et une opacité de 0.8.

Il est également possible d’appliquer plusieurs ombres en les séparant par des virgules. Chaque ombre est spécifiée par trois valeurs pour le déplacement horizontal, vertical et le flou, suivies de la couleur.

.texte-multiple-ombres {
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

Cet exemple applique deux ombres au texte : une ombre noire en bas à droite et une ombre blanche en haut à gauche.

Le CSS a été conçu pour mettre en forme les sites web tandis que le HTML a été pensé pour créer les structures des sites web. Parmi les possibles mises en forme du CSS nous retrouvons celle du texte.

• Familles de polices génériques
• Famille de police du texte
• Comment ajouter des polices d’écriture en CSS
• Taille du texte
• Mettre du texte en italique
• Mettre du texte en gras
• Convertir les lettres minuscules en « petites » majuscules
• Combiner toutes les propriétés

Familles de polices génériques

CSS défini 3 familles de polices génériques (ensemble de polices ayant un look similaire), connues de tous les navigateurs :

• La famille de police Serif dont certains caractères se terminent par de petites barres, telles que Times New Roman ou Georgia
   
• La famille de police Sans-serif, c’est à dire « sans » terminaisons, telles que Verdana ou Arial
   
• La famille de police Monospace, dont toutes les lettres ont la même largeur, telle que Courier New
   

Remarque : les polices sans-serifs sont généralement plus faciles à lire sur un écran d’ordinateur

Famille de police du texte

Défini une liste de polices à utiliser pour l’affichage d’un texte. Le navigateur utilisera la première police qu’il connait.

Il est conseillé de commencer par la police voulue, puis par les polices à utiliser si celle demandée n’est pas connue par le navigateur, et enfin de terminer avec une famille générique.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>font-family: "Times New Roman", Times, serif;</h1>
   <h2>font-family: Georgia, serif;</h2>
   <h3>font-family: Arial, Helvetica, sans-serif;</h3>
   <h4>font-family: "Comic Sans MS", cursive, sans-serif;</h4>
   <p>font-family: "Courier New", Courier, monospace;</p>
   <b>font-family: "Lucida Console", Monaco, monospace;</b>
   
</body>
</html>

h1{
    font-family: "Times New Roman", Times, serif;
}
h2{
    font-family: Georgia, serif;
}
h3{
    font-family: Arial, Helvetica, sans-serif;
}
h4{
    font-family: "Comic Sans MS", cursive, sans-serif;
}
p{
    font-family: "Courier New", Courier, monospace;
}
b{
    font-family: "Lucida Console", Monaco, monospace;
}

Comment ajouter des polices d’écriture en CSS

Tout comme choisir une police d’écriture (ou “typographie”), en ajouter une grâce au CSS est un art. Nous allons voir comment faire cela à travers deux méthodes simples et efficaces.

Première méthode : depuis un service externe

Pour commencer, rendez-vous sur le site  google font. Vous pouvez vous balader sur le site jusqu’à trouver la police d’écriture qui vous tape dans l’œil ou utiliser le formulaire de recherche présent en haut du site.

Cliquer sur la police que vous avez choisie vous enverra sur sa page. Là, il vous est présenté tous les styles disponibles : le poids (épaisseur) et l’italique. Pour chaque style que vous allez utiliser sur le site, cliquer sur “+ Select this style”, ce qui va l’ajouter dans la fenêtre à droite du site.
Attention, ne prenez que les polices et les styles dont vous avez besoin ; en choisir trop alourdira le temps de chargement, ce qui peut nuire considérablement au référencement.

Une fois la sélection terminée, concentrons-nous sur la fenêtre latérale droite. De haut en bas, vous y trouverez :

• La liste des polices d’écriture et des styles choisis. Vous pouvez les retirer en cliquant sur le bouton “-” ou “Remove all”.
• La balise style pour ajouter ces polices d’écriture à votre CSS.
• Le code CSS pour utiliser les polices d’écriture.

Il vous suffit à présent de copier la balise <link> et la coller dans votre html, entre les balises <head>. Attention, vous devez appeler les polices d’écriture avant le CSS qui les utilise.

À présent, il ne vous reste plus qu’à utiliser ces polices d’écriture dans votre CSS comme indiqué sur le site de google fonts.

<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

body {
	font-family: 'Roboto', sans-serif;
}
h2 {
	font-family: 'Oswald', sans-serif;
}

Deuxième méthode : Ajout manuel en CSS

Pour importer une police de caractères externe dans votre feuille de style CSS, vous pouvez utiliser la règle @font-face. Voici un exemple de comment vous pourriez le faire :

1. Tout d’abord, téléchargez la police de caractères que vous souhaitez utiliser et placez les fichiers de police dans votre projet.
2. Ajoutez le bloc @font-face à votre fichier CSS pour importer la police. Assurez-vous de spécifier le chemin correct vers les fichiers de police :

@font-face {
    font-family: 'NomDeVotrePolice'; /* Choisissez un nom pour votre police */
    src: url('chemin/vers/le/fichier-de-police.woff2') format('woff2'),
         url('chemin/vers/le/fichier-de-police.woff') format('woff');
    /* Ajoutez des formats supplémentaires si nécessaire (comme ttf, eot) */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'NomDeVotrePolice', sans-serif; /* Utilisez le nom spécifié dans @font-face */
}

Assurez-vous de remplacer 'NomDeVotrePolice', 'chemin/vers/le/fichier-de-police.woff2', et 'chemin/vers/le/fichier-de-police.woff' par les valeurs appropriées pour votre police de caractères.

N’oubliez pas que le téléchargement et l’utilisation de polices peuvent être soumis à des droits d’auteur, veillez donc à respecter les licences de la police que vous utilisez.

Taille du texte : font-size

Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités.

vous pouvez définir une taille par une valeur numérique personnalisée et une unité choisie. Il existe de multiples unités pour définir une taille de texte, en voici quelques-unes :

Unités de Mesure :

Pixels (px) : Une unité de mesure fixe. Un pixel équivaut à un point sur l’écran, mais la taille réelle d’un pixel peut varier en fonction de la résolution de l’écran.

<body>
   <b>Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. </b>
   <p>Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités</p>
   </body>

body {
    font-size: 16px; /* Taille du texte de base en pixels */
}
p{
    font-size: 18px;
}

Points (pt) : Une unité de mesure utilisée principalement pour les imprimeurs. Un point est équivalent à 1/72 pouce.

body {
    font-size: 16px; /* Taille du texte en pixels */
}
p{
    font-size: 18pt; /* Taille du texte de base en points */
}

Pourcentage (%) : La taille du texte est définie en pourcentage de la taille du texte de base de l’élément parent. Par exemple, si la taille de police de base du parent est de 16px, font-size: 150%; signifiera une taille de 24px.

body {
    font-size: 100%; /* Taille du texte de base à 100% */
}

p {
    font-size: 80%; /* Taille du texte réduite pour les éléments 'small' */
}

Ems (em) : La taille du texte est définie en multiples de la taille du texte de base de l’élément parent. Un em est égal à la taille de la police de l’élément.

body {
    font-size: 1em; /* Taille du texte de base à 1em */
}

p{
    font-size: 1.5em; /* Taille du texte pour les titres p à 1.5em */
}

L’unité « rem » est quant à elle relative à la taille de la racine HTML, l’élément « <html> ». Ainsi, si la taille définie pour l’élément <html> a été définie à 16px, un élément du site ayant une taille de « 1rem » aura une taille équivalente à celle de l’élément <html> soit « 16px ». Un élément qui aura une taille de « 0.75rem » aura au final une taille de « 12px » avec la taille définie précédemment pour l’élément <html>.

Les mots-clés définis se décomposent en 2 familles : les tailles absolues et les tailles relatives.

Une taille absolue

Une taille absolue est un mot-clé désignant une valeur absolue basée sur la taille par défaut de l’utilisateur (à savoir medium). Il existe au total 7 mots-clés pour les tailles absolues qui sont :

• xx-small;
• x-small;
• small;
• medium;
• large;
• x-large;
• xx-large;

<body>
   <b>Avec la propriété CSS font-size vous allez pouvoir influencer la taille de vos textes. </b>
   <p>Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs personnalisées dans différentes unités</p>   
</body>

body {
    font-size: medium; /* Taille du texte de base à la valeur 'medium' */
}

p {
    font-size: x-large; /* Taille du texte pour les titres p à 'x-large' */
}

body {
    font-size: x-large; /* Taille du texte de base à la valeur 'large' */
}
p {
    font-size: xx-large; /* Taille du texte pour les titres p à 'xx-large' */
}

Une taille relative se définie par rapport à la taille de son élément parent. Ainsi avec le mot-clé « larger » le texte aura une taille agrandie par rapport à celle de son parent et à l’inverse avec le mot-clé « smaller » la taille sera réduite.

Mettre du texte en italique : font-style

La propriété CSS font-style permet de donner à un texte la forme « italique » ou « oblique ».
Elle ne fonctionne qu’avec des mots-clés prédéfinis qui sont :

• « normal » pour une forme normale
• « italic » pour une forme italique
• « oblique » pour une forme oblique

Voici comment utiliser la propriété avec chaque valeur :

   <p id="normal">font-style: normal</p>
   <p id="italic">font-style: italic</p>
   <p id="oblique">font-style: oblique</p>

#normal{
    font-style: normal;
}
#italic{
    font-style: italic;
}
#oblique{
    font-style: oblique;
}

La valeur « oblique » peut prendre un second paramètre qui est l’inclinaison du texte. Ainsi si vous souhaitez écrire un texte en oblique avec une inclinaison de 30 degrés, vous définirez sa propriété « font-style » de cette manière :

font-style: oblique 30deg;

Mettre du texte en gras

Pour mettre du texte en gras en CSS, vous utilisez la propriété font-weight. Vous pouvez définir la valeur de font-weight sur bold, ou utiliser des valeurs numériques telles que 700. Voici comment le faire :

<body>
   <h1>Mettre du texte en gras </h1>
   <p>Pour mettre du texte en gras en CSS, vous utilisez la propriété font-weight. Vous pouvez définir la valeur de font-weight sur bold, ou utiliser des valeurs numériques telles que 700. Voici comment le faire </p> 
</body>

p {
    font-weight: bold; /* Utilisation de la valeur "bold"  */
}
h1 {
    font-weight: 700; /* Utilisation de la valeur numérique "700"  */
}

Astuce pour les valeurs numériques :

Les valeurs numériques pour font-weight vont généralement de 100 à 900 par incréments de 100, où 400 est considéré comme normal et 700 est généralement utilisé pour le gras. Vous pouvez expérimenter avec ces valeurs pour ajuster la gravité du gras.

Voici un exemple avec différentes valeurs numériques :

p.normal {
    font-weight: normal; /* Équivalent à 400 */
}
p.semi-bold {
    font-weight: 600;
}
p.bold {
    font-weight: bold; /* Équivalent à 700 */
}
p.extra-bold {
    font-weight: 800;
}

Utilisez ces règles CSS dans votre feuille de style pour appliquer le style gras aux éléments souhaités. N’oubliez pas que tous les éléments HTML ne peuvent pas être mis en gras (par exemple, les éléments de formulaire ne supportent pas forcément cette propriété).

Convertir les lettres minuscules en « petites » majuscules

La propriété CSS font-variant est utilisée pour contrôler l’affichage des variantes de police. Elle peut être utilisée pour activer ou désactiver la présentation en petites majuscules pour les caractères de texte.

Voici comment utiliser font-variant en CSS :

font-variant: normal;

font-variant: small-caps;

<body>
   <h1>La propriété CSS font-variant</h1>
   <p >La propriété CSS font-variant est utilisée pour contrôler l'affichage des variantes de police.</p>
</body>

h1 {
    font-variant: small-caps;
}
p {
    font-variant: normal;
}

Cela désactive toutes les variantes de police.

• La propriété font-variant peut être utile pour donner un aspect esthétique particulier au texte.
• Toutes les polices prennent en charge font-variant: small-caps, mais il est possible que certaines polices ne fournissent pas de variantes visuellement distinctes.
• L’utilisation de font-variant dépend également de la prise en charge par les navigateurs, donc il est toujours bon de vérifier la compatibilité avec les navigateurs cibles.

Combiner toutes les propriétés

La propriété CSS font est une propriété raccourcie qui permet de définir plusieurs propriétés de police en une seule déclaration. Elle peut inclure plusieurs valeurs telles que la taille de la police, le style de la police, le poids de la police, la famille de polices, etc.

Voici la syntaxe générale de la propriété font :

sélecteur {
    font: style de police taille/police famille;
}

• Style de police (obligatoire) : Peut être normal, italic, ou oblique.
• Taille de police (obligatoire) : Peut être définie en pixels (px), points (pt), ems (em), pourcentage (%), ou mots-clés (small, medium, large, etc.).
• Poids de police (optionnel) : Peut être un nombre, ou les mots-clés normal ou bold.
• Famille de polices (optionnel) : Peut être une liste de noms de polices, séparés par des virgules, ou le mot-clé serif, sans-serif, monospace, etc.

Exemples d’utilisation de la propriété font :

p {
    font: italic bold 16px/1.5 "Times New Roman", serif;
}

Cela peut simplifier le code CSS en regroupant plusieurs propriétés de police en une seule déclaration, facilitant ainsi la gestion et la lecture du code. La propriété font est souvent utilisée lorsque plusieurs propriétés de police doivent être spécifiées pour un même élément.

Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant Différents types de sélecteurs. Dans ce tuto , nous allons voir Les couleurs et les Unités CSS .

Les couleurs HTML et CSS

Dans cette nouvelle leçon, nous allons apprendre à modifier la couleur et l’opacité de nos textes grâce à la propriété color que nous avons déjà rencontré précédemment.

Cette propriété est à la fois très simple à utiliser et relativement complexe à parfaitement maîtriser car nous allons lui passer des valeurs de couleurs très différentes les unes des autres.

Les navigateurs admettent 3 méthodes possibles pour la déclaration d’une couleur :

• Couleurs nommées : « background-color: grey » La couleur est désignée par son nom. Il n’y a que 16 noms de couleurs normalisés par le W3C, mais tous les navigateurs actuels reconnaissent les couleurs définies par la norme X11
• Couleurs en hexadecimal : « background-color: #808080 » La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.
• Couleurs décomposées : « background-color: RGB( 128,128,128 ) »La couleur est définie par trois nombres décimaux de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.

Voyons en pratique comment utiliser ces noms de couleurs en CSS avec différents exemples utilisant color en CSS :

<h1>Un titre de niveau 1</h1>
        
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>

h1{
    color: orange;
}

.p1{
    color: red;
}

.p2{
    color: blue;
}

Illustrons immédiatement avec quelques exemples le fonctionnement des notations RGB en CSS.

<h1>Les notations RGB en CSS</h1>

<p>On va pouvoir <strong>créer une couleur RGB en CSS</strong> en mixant différentes intensités de Rouge, de Vert, et de Bleu.</p>

<p><em>L'intensité</em> de chacune de ces couleurs de base doit être comprise entre <em>0 (intensité minimale)</em> et <em>255 (intensité maximale)</em>.</p>

h1{
  color : RGB(255, 180, 0);
}

p{
  color : RGB(50, 50, 50);
}

strong{
  color : RGB(0, 0, 200);
}

em{
  color : RGB(0, 200, 50);
}

Nous allons en effet pouvoir utiliser les notations hexadécimales pour créer une couleur avec la propriété CSS color. Les valeurs hexadécimales sont même les plus utilisées en CSS pour créer des couleurs !

Nous allons ici utiliser exactement le même principe qu’avec les valeurs RGB en précisant trois intensités de Rouge, Vert et Bleu pour créer une couleur. Là encore, chacune des trois intensités des couleurs de base va pouvoir être comprise entre 0 et 255 ou plus exactement entre 00 et FF en notation hexadécimale (FF en hexadécimal est équivalent à 255 en décimal).

Pour créer une couleur en utilisant les notations hexadécimales en CSS, nous allons donc devoir préciser trois intensités de Rouge, Vert et de Bleu entre 00 et FF à la suite. De plus, nous devrons faire précéder cette notation par un dièse (symbole #).

Prenons immédiatement quelques exemples pour illustrer cela :

<h1>Les notations hexadécimales en CSS</h1>

<p>La propriété <strong>CSS color</strong> accepte également des valeurs hexadécimales.</p>

<p>Le système hexadécimal signifie "qui fonctionne en base 16". C'est simplement une autre façon de compter <span>(de 16 en 16)</span> par rapport au système décimal <span>(qui compte de 10 en 10)</span>.</p>

/*Intensité max de rouge, médiane de vert, et pas de bleu*/
h1{
  color : #FF8800;
}

/* Rouge pur : intensité max de rouge, pas de vert ni de bleu*/
strong{
  color : #FF0000;
}

/*Grande intensité de rouge et de bleu, petite intensité de vert*/
span{
  color : #B904B9;
}

On applique une color : #FF8800 à notre titre h1 en CSS. On utilise ici une intensité maximale de rouge (FF = 255 en décimal), moyenne de vert (88 = 136 en décimal) et minimale (00) de bleu pour créer notre couleur finale. Comme on mélange beaucoup de rouge avec un peu de vert, on obtient naturellement du orange.

Les 16 premières couleurs normalisées

Il y a des années de cela, les langages de programmation ne disposaient pas de toutes les fonctionnalités d’aujourd’hui tout simplement car les infrastructures étaient beaucoup moins puissantes que de nos jours.

Ainsi, au départ, seules 16 couleurs ont été normalisées en CSS. C’était déjà un grand pas en avant pour les utilisateurs : ils n’avaient plus qu’à passer le nom (en anglais) de la couleur normalisée en valeur de la propriété CSS color afin de changer la couleur d’un élément.

Ces seize couleurs CSS sont les suivantes. Notez que j’ai déjà renseigné l’équivalent de chaque nom de couleur en notation hexadécimale dans le tableau ci-dessous. Nous reparlerons de ces notations plus tard dans cette leçon.

Gérer l’opacité des éléments avec la propriété opacity

Tout d’abord, on va pouvoir rendre un élément HTML plus ou moins transparent grâce à la propriété CSS opacity.

Cette propriété va accepter une valeur comprise entre 0 et 1 et qui va déterminer le niveau d’opacité d’un élément : la valeur 0 va rendre l’élément totalement transparent tandis que la valeur 1 (valeur par défaut) le rend totalement opaque.

<h1>Un titre de niveau 1</h1>
        
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>

<div class="conteneur">
  <p>Un paragraphe dans un div</p>
  <ul>
    <li>Rouge</li>
    <li>Vert</li>
    <li>Bleu</li>
  </ul>
</div>

h1, p, li{
  font-size: 1.2em;
  font-weight: normal;
}

h1{
  background-color: lightBlue;
  color: purple;
  border: 5px solid purple;
}

.p1{
  color: purple;
  opacity: 0.6;
}

.p2{
  background-color: lightBlue;
  color: purple;
  opacity: 0.6;
}

.conteneur{
  background-color: lightBlue;
  color: purple;
  opacity: 0.6;
  border: 5px solid purple;
}

Propriétés CSS pour les couleurs

Il existe plusieurs types d’unité, et chacun influence à sa manière le design de votre site. Si vous ne savez pas comment choisir entre le “px”, le “em”, ou encore le “vw”, alors vous tombez bien. Nous allons faire un point sur les unités de mesure en CSS pour que vous puissiez les utiliser correctement.

• Les unités absolues
• Les unités relatives au texte
• Les unités relatives au viewport
• Les unités en pourcentage

Les unités absolues

Il existe des unités en CSS qui ne sont influencées par aucune autre dimension. Appelées unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.

Les unités absolues sont les suivantes :

• Les pixels (px)
• Les pouces (in)
• Les centimètres (cm)
• Les millimètres (mm)
• Les picas (pc)
• Les points (pt)

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.box {
width : 150px ;
height : 150 px ;
}

Cela signifie que l’élément box aura la même dimension (150 x 150 pixels), quelle que soit la taille de l’écran.

Les unités relatives au texte

À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments d’un design. On retrouve :

• Em : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
• Rem : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
• Ex : très rarement utilisée, cette unité est relative à la hauteur de la police actuelle en minuscule.
• Ch : cette unité est elle aussi peu utilisée, elle est relative à la largeur du caractère “0”.

Les unités relatives au viewport

D’autres unités permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.

Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive, et on retrouve :

• La hauteur du viewport (vh)
• La largeur du viewport (vw)
• Le viewport minimum (vmin)
• Le viewport maximum (vmax)

Les unités vh et vw

Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.

Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.

L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :

.box {
height :100vh ;
background : red ;
}

Dans cet exemple ci-dessus, l’élément box a une hauteur de 100 % par rapport à la hauteur de la fenêtre de navigation.

Prenons un autre exemple :

h1{
font-size : 6 vw ;
}

Ici la taille du titre H1 correspond à 6% de la largeur de la fenêtre. Par conséquent, si cette dernière est de 1000 px, la taille de la police sera de 60 px.

Les unités vmin et vmax

Ces deux unités de mesure en CSS fonctionnent selon le même principe.

Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte. Par exemple, si ce dernier est de 1000 px de haut par 800 px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.

Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.

Les unités en pourcentage

Le pourcentage fait partie des unités relatives de façon générale puisqu’il s’adapte en fonction de son élément parent.

La plupart du temps, cette unité est utilisée pour définir la hauteur et la largeur d’un élément. Vous la retrouverez notamment dans le framework Bootstrap.

Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant syntaxe de base. Dans ce tuto , nous allons voir Les sélecteurs définissent les éléments sur lesquelles s’applique un ensemble de règles CSS..

• Sélecteur multiple
• Sélecteur universel
• Sélecteur d’éléments imbriqués
• Sélectionner des éléments HTML en CSS grâce à leurs attributs id et class
• Sélecteurs CSS avancés avec les pseudo-classes

Sélecteur multiple

Il est également possible d’appliquer le style à plusieurs balises en séparant le nom de ces balises par une virgule (,). La syntaxe d’un tel sélecteur, appelé sélecteur multiple, est la suivante :

Sélecteur universel

Grâce au sélecteur universel (« * ») il est possible de définir un style s’appliquant à tous les éléments HTML. La syntaxe du sélecteur universel est la suivante :

*{color:blue;
font-family:Arial;
}

Sélecteur d’éléments imbriqués

Il est possible de sélectionner une balise dans un contexte donné, c’est-à-dire en fonction des éléments qui l’entourent, grâce aux sélecteurs sélecteurs contextuels.

Il existe plusieurs type de sélecteurs contextuels :

• Le sélecteur d’éléments imbriqués permet de créer une règle ne s’appliquant que lorsque un élément Y est imbriqué dans un élément X. Sa syntaxe est la suivante : selecteur_X selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes imbriquées dans une balise) :

P B { font-weight: bold; color: red; }

• Le sélecteur d’éléments consécutifs permet de créer une règle ne s’appliquant que lorsque un élément Y suit immédiatement un élément X. Sa syntaxe est la suivante :selecteur_X + selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises <B>, elles-mêmes suivant une balise <I>) :

I + B { font-weight: bold; color: red; }

• Le sélecteur d’éléments père-fils permet de créer une règle ne s’appliquant que lorsque un élément Y est fils direct d’un élément X. La règle ne s’applique pas si Y est encapsulé dans une ou plusieurs autres balises intermédiaires. Sa syntaxe est la suivante :selecteur_X > selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <b><i> Attention </i></b>
, ceci est un <i><b> avertissement </b></i> </p> 
<b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que l’élément « <i> Attention </i> » (le seul entouré de balises <B>, elles-mêmes directement imbriquées dans une balise <P>) :

P > B { font-weight: bold; color: red; }

Sélectionner des éléments HTML en CSS grâce à leurs attributs id et class

Souvent, nous ne pourrons pas nous contenter d’utiliser des sélecteurs CSS simples éléments pour mettre en forme nos pages. En effet, nous voudrons appliquer des styles particuliers à certains éléments d’un type (certains paragraphes par exemple) et pas à tous.

Pour appliquer des styles particuliers à un élément en particulier ou à une groupe d’éléments personnalisés, on peut s’appuyer sur des attributs id et class données à nos éléments en HTML

Pour cibler un élément portant un id en particulier en CSS, il va suffire d’indiquer le nom de l’id précédé par un # comme ceci : #nom_id.

Pour appliquer des styles à une classe, il va suffire en CSS d’indiquer le nom de l’attribut class précédé cette fois-ci par un . comme ceci : .nom_class.

<h1>Utilisation de ID et de CLASS</h1>
        
<p>Un premier paragraphe sans attribut</p>
<p class="gras">Un paragraphe avec un attribut class</p>
<p id="fond-orange">Un paragraphe avec un attribut id</p>
<p class="gras" id="bleu">Un paragraphe avec une classe et un id</p>

p{
    width: 80%; /*80% de leur élément parent en largeur*/
    border: 5px double #bbb; /*Bordure double*/
    padding: 10px /*Marges intérieures de 10px*/
}

.gras{
    font-weight: bold; /*Texte en gras*/
}

#fond-orange{
    background-color: orange; /*Fond en orange*/
}

#bleu{
    color: blue; /*Texte de couleur bleue*/
}

Pour rappel, la différence entre les attributs id et class en HTML est que chaque id doit être unique dans une page (chaque id doit posséder une valeur unique) tandis qu’on peut tout à fait attribuer la même valeur à différents attributs class pour différents éléments.

De plus, notez qu’il est tout à fait possible d’ajouter un id et un ou plusieurs attributs class à un même élément HTML.

<h1 class="orange">Utilisation de ID et de CLASS</h1>
        
<p>Un premier paragraphe sans attribut</p>
<p class="orange">Un paragraphe avec un attribut class</p>
<p class="orange gras">Un paragraphe avec deux attributs class</p>
<p class="orange bordure">Un autre paragraphe avec deux attributs class</p>
<p class="orange gras bordure">Un paragraphe avec trois attributs class</p>

p{
    width: 80%; /*80% de leur élément parent en largeur*/
    padding: 10px /*Marges intérieures de 10px*/
}


.orange{
    color: orange; /*Texte de couleur orange*/
}

.gras{
    font-weight: bold;
}

.bordure{
    border: 5px double #bbb; /*Bordures doubles*/
    border-radius: 5px; /*Bordures légèrement arrondies*/
}

Sélecteurs CSS avancés avec les pseudo-classes

Les pseudo-classes en CSS permettent de sélectionner des éléments pour une règle CSS en fonction d’un état précis qui peut leur être attribué, mais qui n’est pas inscrit dans le document HTML.

Il existe une multitude de pseudo-classes que vous pouvez utiliser pour affecter un élément donné selon l’état dans lequel il se trouve.

Une pseudo-classe est composée d’un mot-clé précédé par le caractère « : » et qui s’ajoute à la suite d’un autre sélecteur CSS sans espace.

Parmi les pseudo-classe les plus couramment utilisés ont retrouvera :

• :hover : Permet d’affecter des déclarations CSS à un élément lorsque l’utilisateur le survole avec un pointeur (exemple : pointeur de souris d’ordinateur)
• :visited : Permet de changer l’apparence d’un lien après que celui-ci ait été visité par l’utilisateur.
• :checked : Peut être appliqué à une entrée (input) de type bouton radio, case à cocher ou option pour modifier son aspect lorsque celle-ci est cochée ou active.
• :active : Permet de sélectionner un élément qui a été activé par l’utilisateur
• :focus : Permet de cibler un élément uniquement lorsqu’il reçoit le focus.
• :not() : C’est une pseudo-classe de négation qui prend un sélecteur en argument à ajouter entre les « ( ) » de la pseudo-classe et qui permet de ne pas prendre en compte le sélecteur donné en argument dans le sélecteur général de la règle CSS. Le sélecteur donné en argument ne peut pas être suivi d’une pseudo-classe de négation ou cibler de pseudo-élément.
• :nth-child(an+b) : Permet de cibler les « an+b » éléments du sélecteur donné dans l’arbre du document.

Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment ajouter du CSS interne dans l’entête HTML. Dans ce tuto , nous allons voir comment ajouter des feuilles de style externes.

Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css ». C’est la méthode recommandée, qui sera utilisée autant que possible.

Cette méthode comporte de nombreux avantages, notamment une meilleure maintenabilité du code grâce à la séparation des différents langages, ainsi qu’une meilleure lisibilité.

Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à plusieurs pages HTML en même temps, d’un seul coup.

Exemple

En effet, en utilisant l’une des deux premières méthodes, nous aurions été obligés de réécrire tout notre code CSS pour chaque page HTML (ou même pour chaque élément !) composant notre site puisque les codes CSS étaient déclarés dans une page ou dans un élément spécifique et ne pouvaient donc s’appliquer qu’à la page ou qu’à l’élément dans lesquels ils étaient déclarés.

De plus, en cas de modification, il aurait également fallu modifier chacune de nos pages à la main, ce qui n’est pas viable pour un site de taille moyenne qui va être composé de quelques centaines de pages.

En déclarant notre code CSS dans un fichier séparé, au contraire, nous allons pouvoir utiliser le code de ce fichier CSS dans autant de fichiers HTML qu’on le souhaite, en indiquant aux différents fichiers HTML qu’ils doivent appliquer les styles contenus dans ce fichier CSS. Ainsi, lorsque nous voudrons modifier par exemple la couleur de tous les paragraphes de nos pages HTML nous n’aurons qu’à modifier la déclaration relative dans le fichier CSS.

démo

Voyons immédiatement comment mettre cela en place en pratique. Pour cela, nous allons commencer par créer un nouveau fichier dans notre éditeur qu’on va appeler style.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que notre page HTML pour plus de simplicité.

Nous travaillons donc dorénavant avec deux fichiers : un fichier appelé index.html et un fichier style.css.

Il va donc maintenant falloir « lier » notre fichier HTML à notre fichier CSS pour indiquer au navigateur qu’il doit appliquer les styles contenus dans le fichier style.css à notre fichier index.html.

Pour cela, nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français). On va placer l’élément link au sein de l’élément headde notre fichier HTML. Cet élément se présente sous la forme d’une balise orpheline et va avoir besoin de deux attributs pour fonctionner correctement :

• Un attribut rel qui va nous servir à préciser le type de ressource que l’on souhaite lier à notre fichier HTML. Dans notre cas, nous indiquerons la valeur stylesheet pour « feuille de style » ;
• Un attribut href qui va indiquer l’adresse relative de la ressource que l’on souhaite lier par rapport à l’emplacement de notre fichier HTML. Ici, comme nous avons enregistré nos deux fichiers dans le même dossier, il suffira d’indiquer le nom de notre fichier CSS en valeur de href.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>integrer css</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>CSS : feuille de style en cascade</h2>
    <p>
      Permettent de générer la présentation d’une page HTML : séparer  la structure (HTML) de sa présentation (CSS)
      </p>
</body>
</html>

Nos deux fichiers sont maintenant liés et les styles déclarés dans notre fichier CSS vont bien être appliqués aux éléments de notre page HTML.

body{
    background-color: green;}
  p{
    color: white ;
    font-size: 20px; }

Avantages :

–Séparation totale de la structure  et de la présentation : possibilité  d’avoir des présentations  alternatives

–Possibilité d’appliquer la même  feuille de style sur plusieurs  pages (donc le site en entier)  sans devoir la dupliquer

–Cohérence de la présentation sur  tout le site et les pages futures.

Dans cette partie , nous avons appris comment ajouter des feuilles de style externes.

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter des feuilles de style externes.

Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment ajouter du CSS dans la balise HTML. Dans ce tuto , nous allons voir comment ajouter du CSS interne dans l’entête HTML.

La deuxième façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément style.

En plaçant le CSS de cette façon, le code CSS ne s’appliquera qu’aux éléments de la page HTML dans laquelle il a été écrit.

Cette méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code en général. Cependant, elle peut s’avérer utile pour modifier rapidement les styles d’une page HTML ou si vous n’avez pas facilement accès aux fichiers de style de votre site.
Nous voyons donc cette méthode à titre d’exemple, afin que vous sachiez l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un fichier et que vous puissiez l’utiliser si vous n’avez pas d’autre choix.

Nous allons devoir ici placer notre élément style au sein de l’élément head de notre fichier HTML. Voici comment on va écrire cela en pratique :

<!DOCTYPE html>
<html>
  <head>
    <title>integrer CSS </title>
    <style>
    body{
    background-color: green;}
    p{
    color: white ;
    font-size: 20px; }
     </style>
  </head>
  <body>
  <h2>CSS : feuille de style en cascade</h2>
    <p>
      Permettent de générer la présentation d’une page HTML : séparer  la structure (HTML) de sa présentation (CSS)
      </p>
  </body>
</html>

Ici, nous créons un fichier HTML tout à fait classique contenant un titre h1 et une paragraphe.

Nous voulons ensuite rajouter des styles à notre page. Pour cela, nous plaçons un élément style dans l’élément head de notre page. Nous allons déclarer nos styles CSS au sein de cet élément.

Dans mon code CSS, je commence par cibler l’élément body avec le sélecteur élément du même nom et je définis une couleur de fond (background-color) orange pour cet élément. Comme l’élément body représente toute la partie visible de ma page, le fond de la page entière sera orange.

Ensuite, je définis également une couleur blanche pour le texte de mes paragraphes ainsi qu’une taille de police d’écriture de 20px.

Voici le résultat obtenu :

Avantage :

^–  Possibilité d’appliquer une règle sur tous les mêmes éléments d’un  même document

Inconvénient :

–Ne s’applique qu’à ce document, et non au site en entier

–Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages,  modifier les styles sur les 10 fichiers)

MAIS certains plugins de CMS (WordPress par exemple) mal conçus  l’utilisent encore. Vous le verrez aussi dans le code de newsletters.

Dans cette partie , nous avons appris comment ajouter du CSS interne dans l’entête HTML.

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter des feuilles de style externes.

Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment préparer notre environnement de travail. Il faut noter tout d’abord qu’il en a plusieurs méthodes pour appliquer un style CSS à un document HTML. Dans ce tuto , nous allons voir comment ajouter du CSS dans la balise HTML.

Nous pouvons écrire notre code CSS au sein de l’attribut style qu’on va ajouter à l’intérieur de la balise ouvrante des éléments HTML pour lesquels nous souhaitons modifier les styles.

Nous allons passer en valeurs des attributs « style » des déclarations CSS pour modifier certains styles précis de l’élément HTML en question. En effet, en utilisant cette méthode, les styles déclarés dans un attribut « style » ne vont s’appliquer qu’à l’élément dans lequel ils sont écrits, et c’est la raison pour laquelle nous n’allons pas avoir besoin de préciser de sélecteur ici.

Dans l’exemple ci-dessous, nous allons appliquer une couleur de fond verte à notre élément body ainsi qu’une couleur blanche , une taille de 20px au texte de notre premier paragraphe uniquement :

<!DOCTYPE html>
<html>
  <head>
    <title>integrer CSS </title>
  </head>
  <body style="background-color: green">
  <h2>CSS : feuille de style en cascade</h2>
    <p style="color: white ; font-size: 20px;">
      Permettent de générer la présentation d’une page HTML : séparer  la structure (HTML) de sa présentation (CSS)
      </p>
  </body>
</html>

Cette méthode d’écriture du CSS, bien qu’elle puisse sembler pratique à priori puisqu’elle permet de n’appliquer des styles qu’à un élément en particulier plutôt qu’à tous les éléments d’un même type n’est également pas recommandée et est à éviter tant que possible pour des raisons de maintenabilité et de performance du code.

Dans cette partie , nous avons appris comment ajouter du CSS dans la balise HTML

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter du CSS interne dans l’entête HTML.

Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant quelques notions théorique de CSS. Dans ce tuto , nous allons voir comment préparer notre environnement de travail CSS pour qu’on puisse commencer à coder.

Pour coder en CSS, nous avoir besoin seulement d’un éditeur de texte. Il existe de plusieurs éditeurs de texte sur le web et la majorité d’entre eux sont gratuits.

Normalement, si vous suivez ce cours, donc vous avez les bases de développements en HTML et vous avez déjà votre éditeur de texte qui est prêt pour commencer le travail 🙂 🙂

Si jamais ce n’est pas le cas, je vous conseille vivement de suivre nos cours HTML avant de commencer ce cours.

accès rapide

• la démo
• Qu’est-ce qu’un éditeur de texte ?
• Quelques exemples d’éditeur de texte
• Installer Visual Studio Code

Qu’est-ce qu’un éditeur de texte ?

Un éditeur de texte est un programme qui va nous simplifier l’écriture des lignes de code d’un langage comme HTML,CSS ,JavaScript.

Quelques exemples d’éditeur de texte

Il en a un grand nombre d’éditeur de texte et ci-dessous quelques exemples reconnus d’éditeur :

• NotePad++ : Certainement l’éditeur de texte le plus connu de tous les temps, NotePad++ est également l’un des plus anciens. Il contient pas mal de fonctionnalités intéressante à savoir : le surlignage des erreurs de syntaxe dans le code , l’auto-complétion des balises, etc.
• Brackets : Brackets est un éditeur destiné aux les langages de développement front-end (HTML, CSS et JavaScript).. et il est caractérisé par son interface utilisateur ergonomique.
• Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Cet éditeur incluent plusieurs fonctionnalités comme le débogage, la complétion intelligente du code (IntelliSense), les snippets, la refactorisation du code et Git intégré.

Pour cette série de tuto, je vais utiliser Visual Studio Code et vous avez le choix d’installer n’importe quel éditeur de texte que vous voulez l’essentiel qu’on a un éditeur bien installé dans nos poste afin de commencer à écrire nos premiers ligne de code JavaScript.

Installer Visual Studio Code

Pour installer visual code dans notre poste il suffit juste de suivre les étapes suivantes :

• Étape 1 : aller sur google et saisir le texte suivant : installer visual code

• Étape 2 : cliquer sur le premier lien :

• Étape 3 : Choisir la version compatible avec votre système d’exploitation ( dans mon cas c’est Windows)

• Étape 4 : une fois téléchargé, Ouvrez le fichier d’installation .exe dans votre dossier Téléchargements :

• Étape 5 : Lisez et acceptez le contrat de licence et cliquez sur Next.

• Étape 6 : Vous avez le choix que ce soit modifier l’emplacement du dossier d’installation ou bien conserver les paramètres par défaut. Cliquez sur Next pour continuer.

• Étape 7 : Choisissez de renommer le dossier des raccourcis dans le menu Démarrer ou de ne pas installer de raccourcis du tout. Cliquez sur Next.

• Étape 8 : Sélectionnez les tâches supplémentaires à votre choix , par exemple ‘Create a desktop icon’ (créer une icône sur le bureau) . Cliquez sur Next.

• Étape 9 : Cliquez sur Install pour démarrer l’installation du visual code.

• Étape 10 : Le logiciel est installé et prêt à être utilisé. Cliquez sur Finish

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir où exactement on peux mettre notre code CSS pour faire la mise en forme des pages HTML.