Apprendre la Programmation HTML et CSS #6 Formatter texte CSS

Est-ce que tu veux apprendre à formater texte CSS ? Le but de cela est de nous permettre d’ajouter à nos paragraphe de la couleur à notre texte, modifier la taille du texte autant que pour l’épaisseur du texte, aussi nous allons modifier l’alignement du texte et bien entendu le type de police et sa grosseur.

Alors, le formatage de texte CSS va nous permettre de toucher tout ce qui est à l’apparence de nos paragraphes et de nos titres. En bref, tout ce qui attrait à du texte. Ce n’est vraiment pas compliqué mais, il y a beaucoup de trucs à apprendre alors prenez le temps de voir un par un et commençons. 

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarde ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Comment définir des propriétés CSS

Avant même de commencer à mettre des propriétés en CSS, nous avons vu comment lire un fichier CSS. Vous pouvez bien sûr ajouter dans un attribut CSS ou dans une balise HTML, mais dans ce tutoriel, nous allons utiliser un fichier CSS externe Si tu ne sais pas comment lier un fichier CSS externe, je t’invite à regarde ce tutoriel que j’ai fait: Lier un fichier CSS externe – Informerick . Alors avant même de pouvoir rajouter des propriétés, nous allons voir comment attribuer les propriétés. 

Les classes et les ancres

La 1re façon d’attribuer des propriétés en CSS sont avec les classes et les ancres. Les ancres permettent d’identifier un objet unique dans une page, on ne peut retrouver qu’une fois le même ancre dans la page. Cela nous va être utile pour définir une partie que l’on veut qu’ils ne soient pas utilisés à plusieurs reprises.

 Voici ce qu’il faut ajouter un autre HTML pour définir un ancre:

<img id=”monancre” />

Comme nous pouvons le voir, nous avons ajouté un ID qui est une ancre. Après avoir ajouté ceci dans le HTML, nous allons pouvoir utiliser l’ancre dans le CSS.

Voici comment sélectionner une ancre en CSS pour y attribuer des attributs:

#monancre{
}

Si vous souhaitez ajouter un attribut qui va sélectionner plusieurs objets, prenons par exemple que je veux que certains paragraphes soient sélectionnés, mais simplement les paragraphes que j’ai choisis, voici comment je ferai et je le ferais avec ce qu’on nomme une classe.

Les classes ça ressemble un peu aux ancres. Mais sa principauté, est le fait qu’elle peut être utilisée à plusieurs reprises dans des page. Alors elle va nous permettre de sélectionner plusieurs trucs et tout leur définir la même propriété.

Voici comment mettre une classe en HTML:

<p class=”mesparagraphes”> Bonjour dans mon paragraphe 1</p>

<p class=”mesparagraphes”> Bonjour dans mon paragraphe 2</p>

<p class=”mesparagraphes”> Bonjour dans mon paragraphe 3</p>

J’ai mis la classe à “mesparagraphes” à tous mes paragraphes. Voici ce que nous devons faire en CSS:

.mesparagraphes{
Color: red;
}

Ici, tous mes paragraphes se retrouveront en rouge!

Les sélecteurs

Ici nous n’aurons pas besoin de choisir comment nommer l’élément à sélectionner. Nous allons utiliser les sélecteurs CSS. Les sélecteurs CSS permettent de sélectionner des éléments et des sous éléments selon la formule que nous avons choisie.

 Voici les sélecteurs de base CSS:

ElementParent elementEnfant{
}

# Ceci sélectionne l’élément enfant qui se trouve dans le parent, par exemple:

Body p{
}

# Ici tous les paragraphes dans le body seront sélectionnés

Element1,element2,element3{
}

# Vous pouvez sélectionner plusieur éléments

Element[attribut]{
}

# Sélectionne les éléments qui ont un attribut, par exemple:

A[href]{
}

# Ceci sélectionne tous les liens qui sont cliquables, car ils ont un attribut href

*{
}

# Permet de tout sélectionner

Unité de mesure en CSS

Unités de mesure pour les tailles

Pour modifier les tailles que nous allons faire dans ce tutoriel plus tard nous avons besoin de savoir comment définir les tailles, quels sont les unités de mesures pour les tailles, il en existe plusieurs mais je vais vous présenter les principaux que vous devrez utiliser.

Pour tout ce qui attrait à la grosseur d’éléments, vous devriez utiliser les pixels. Les pixels sont simplement combien de pixels de largeur et de hauteur d’un élément doit faire.

 Voici un exemple en pixel:

.monelement{
Font-size: 18px;
}

# Monelement va avoir un grosseur de 18 px.

Il existe aussi les rem, ils sont surtout utilisés pour la grosseur du texte. Le REM et unité de mesure qui est basée sur la grosseur d’un M à 16 pixels alors 1 rem = 16 pixels. Cela peut être utile notamment pour la responsive de vos textes.

Par exemple:

p{
font-size: 1.125rem;
}

# Mes paragraphes vont avoir la grosseur de 1.125 rem (18 px)

Il existe d’autres façons de calculer une grosseur, par exemple le pourcentage.  Le pourcentage peut être utile pour définir un unité responsive.  Je pourrais dire que mon paragraphe est 75 % de la taille de mon contenant donc même lorsque je serai sur mobile la grosseur va diminuer.

Aussi si vous ne voulez pas vous compliquer la vie avec des unités de mesures comme 18 pixels ou 2 rem. 

Il existe des tailles d’unités prédéfinis les voici:

• Xx-small

• X-small

• Small

• Medium

• Large

• X-large

• xx-large

Codes de couleur

Et maintenant nous allons parler de la couleur, vous devez savoir qu’il existe plusieurs façons de définir la couleur en CSS et HTML.  Alors voici les 3 principaux pour définir de la couleur :

• L’hexadécimal
• le RGB
• La couleur par son nom anglais

L’hexadécimal est un code de code qui se base sur 6 caractères qui sont en unité de mesure hexadécimal qui vont de 0 à F. Vous devez entrer les 6 caractères pour voir la couleur apparaître.

Par exemple voici le blanc:

#FFFFFF

Et voici le noir:

#000000

Pour choisir votre couleur, il existe plusieurs millions de couleurs, vous pouvez utiliser des outils en ligne pour sélectionner les couleur hexadécimal. Voici l’outils que je vous commande qui vient du W3C, l’organisme qui a développé le HTML et CSS: HTML color picker – W3C.

Ensuite nous avons le RGB, le rouge, le vert et le bleu qui sont les trois couleurs primaires et nous allons pouvoir jouer avec celui-ci pour définir des couleurs, il existe aussi une façon d’ajouter de la transparence avec RGBA. Vous pouvez aussi choisir les couleurs RGB avec l’outils W3C plus haut. Alors on va ajouter le RGB.

Voici comment mettre des couleurs RGB et RGBA:

rgb(255, 255, 255)

#ceci est du blanc

rgb(0, 0, 0)

#ceci est du noir

rgba(0,0,0,0.5)

# du noir qui apparait à moitié (50% transparent)

Les valeurs du transparent vont de 0 à 1 avec des chiffres à virgule. 

Finalement la dernière façon d’ajouter de la couleur et de dire le mot anglais alors nous pouvons ajouter: red, blue etc.

Formatage du texte

Désormais que vous connaissez les règles de base pour définir la grosseur et la couleur, nous allons voir quels sont les propriétés pour chacune des modifications de notre formatage de texte en CSS. 

Modifier la taille de police ( font-size )

Nous allons pouvoir modifier la taille de la police avec la propriété font-size nous pouvons utiliser tous les deux unités de mesures avec fontsize.

Comment utiliser font-size:

p{
font-size: 1.125rem;
}

#Défini la grosseur du texte à 1.125 rem.

Modifier la police ( font-family )

Alors nous autres fois aussi modifie la police. 

Attention!  La police que nous allons utiliser doit être disponible sur l’ordinateur de la personne sinon il va falloir l’importer dans notre site Web. Je ne vais pas m’attarder sur comment importer une police, mais si cela vous intéresse voici un tutoriel comment importer une police dans ton site web: Télécharger et importer une police dans son site web – Pierre Giraud.

Pour modifier la police, voici comment il va falloir faire:

body{
Font-family: “Open Sans”;
}

Modifier la couleur du texte ( color )

Nous allons voir aussi modifier la couleur du texte. Comme dit plus haut nous pouvons utiliser les codes couleurs soit hexadécimal, soit le RGB ou, soit son nom de couleur en anglais. 

P{
Color: red;
}

P{
Color: #00000;
}

P{
Color: rgb(255,255,255);
}

Épaisseur du texte ( font-weight ) 

Vous pouvez modifier l’épaisseur, la graisseur de votre texte.

Pour cela vous avez des possibilités:

• Chiffres par bond de 100 (0 à 900)

P{
Font-weight: 400;
}

• Par nom:

P{
Font-weight: bold; 
}

Hauteur de ligne ( line-height )

Vous pouvez aussi modifier la hauteur de ligne de vos paragraphes. Alors ça changera l’espacement entre chacune des lignes de celui-ci. Vous pouvez le faire avec toutes les unités de mesures pour la grandeur.

P{
Line-height: 50px;
}

Alignement du texte ( text-align )

Comme dans Microsoft Word, vous allez pouvoir modifier l’alignement à votre texte. Soit à gauche, soit au centre, soit à droite ou justifié. 

Voici comment faire:

P{
Text-align: left; /* À gauche */
}

P{
Text-align: center; /* Au centre */
}

P{
Text-align: right; /* À droite */
}

P{
Text-align: justify; /* Justifier */
}

Style de police ( font-style et text-decoration )

Vous pouvez aussi ajouter des styles à votre police. Je parle par ici principalement de souligner votre texte, de la barrer et de la mettre en italique. Voici comment le faire pour chacun:

Pour souligner du texte CSS:

P{
Text-decoration: underline;
}

Pour barrer du texte CSS:

P{
Text-decoration: line-through;
}

Mettre en italique:

P{
Font-style: italic;
}

Aller plus loin

Je vous ai présenté les éléments de base pour formater votre texte. Cela va être les propriétés que vous allez utiliser vraiment le plus souvent mais, il existe beaucoup d’autres façons de formater du CSS alors je vous invite à regarder cet endroit qui montre les toutes les propriétés de formatage CSS: Propriétés CSS – W3schools.

FAQ

Ce tutoriel se trouve dans la catégorie: Programmation