Si vous travaillez sur un site web, vous avez probablement entendu parler de CSS. Il s’agit de l’acronyme anglais Cascading Style Sheets (feuilles de style en cascade). Plus concrètement, le CSS est la technologie utilisée pour mettre en forme les pages Web. Cependant, il convient de comprendre comment le CSS peut vous aider à obtenir l’apparence que vous souhaitez sans avoir à utiliser un codage HTML compliqué.
Plan de l'article
Gras/italique/souligné
Vous pouvez mettre du texte en gras, en italique ou le souligné en lui appliquant le style que vous auriez choisi. Les propriétés CSS correspondantes à ces modifications sont les suivantes : « font-weight », « font-style », et « text-decoration ». Vous pouvez attribuer à chacune de ces propriétés une valeur comprise entre 0 (aucun effet) et 1 000 (effet maximal) pour définir l’intensité de la modification.
A lire en complément : Les avancées dans l'informatique quantique et leur influence sur le futur technologique
Voici un exemple de l’aspect de chaque propriété :
- Gras : « font-weight : bold ;»
- Italique : « font-style : italic ;»
- Souligné : « text-decoration : underline ;»
Lire également : Quelles sont les failles de sécurité WordPress les plus courantes ?
Couleur d’arrière-plan
La propriété « background-color » est utilisée pour spécifier une couleur pour l’arrière-plan d’un élément. Elle peut être définie par toute valeur de couleur CSS valide, y compris les valeurs hexadécimales et RGB (Red-Green-Blue).
Lorsque vous utilisez la propriété raccourcie, vous pouvez soit spécifier une seule valeur, soit utiliser la première lettre de chaque valeur afin de définir plusieurs propriétés à la fois (ex : « background-color : rgb(0, 255, 0) ; »). Cela peut être utile lorsque vous souhaitez définir plus d’une couleur pour les éléments de votre page.
Couleur de police
La propriété « text-color » est utilisée pour définir la couleur de votre texte sur la page web. Il s’agit d’une propriété abrégée qui accepte les valeurs « background-color » et « foreground-color ». La propriété background-color accepte une valeur RGB ou HSL (teinte-saturation-valeur), en fonction de ce que vous essayez d’accomplir avec celle-ci.
Si vous souhaitez modifier la teinte de l’image en arrière-plan de votre page, utilisez les valeurs RGB. Par contre, s’il s’agit d’une modification des niveaux de saturation ou de luminosité, utilisez plutôt les valeurs HSL. Ces paramètres permettent de rendre votre page web plus dynamique et plus agréable à regarder pour le lecteur.
Taille de police
La taille de la police est une propriété très importante en CSS. Elle détermine la taille de votre texte, qui peut être différente d’une police à l’autre. La propriété « font-size » a une valeur qui se situe généralement entre 1 et 799 pixels.
La manière standard de spécifier la taille d’une police en CSS est avec des unités px (pixels), pt (points) ou em. L’unité par défaut pour le dimensionnement des polices est le « em ». Par ailleurs, la taille des polices par défaut sur les navigateurs est de 16 pixels.
Style de police
Lorsque vous souhaitez modifier la police elle-même, trois options s’offrent à vous. La première consiste à modifier la famille de polices. Cela peut être fait à l’aide de CSS ou de JavaScript (ou de tout autre langage permettant de définir des styles CSS).
La deuxième option consiste à modifier la taille de votre texte à l’aide de CSS ou de JavaScript. Cette option est assez simple, mais elle est importante. Si vous ne spécifiez pas de taille de police pour votre contenu, celui-ci s’affichera à 100 % par défaut.
La troisième option est le poids. Vous pouvez rendre votre texte plus gras en augmentant son poids et vice-versa. Cela peut être fait avec CSS seul ou en combinaison avec JavaScript si nécessaire.
Choix du texte en CSS : ce qu’il faut retenir
Il existe de nombreuses façons de mettre en forme un texte en CSS. Vous pouvez utiliser des balises pour mettre les mots en italique ou pour mettre en gras certaines phrases. Vous pouvez également créer un bloc de texte plus petit que la taille normale ou le rendre plus grand.
Ce ne sont là que quelques-unes des options disponibles pour créer un contenu lisible sur votre site web ou tout autre projet web. Toutefois, il convient de prendre en compte les spécificités de votre projet avant tout formatage CSS de votre texte. Dans certains cas, le formatage HTML par défaut pourrait vous convenir.
Utilisation de la propriété ‘text-decoration’
Parmi les options de formatage du texte en CSS, la propriété ‘text-decoration’ est souvent négligée. Pourtant, elle peut ajouter une touche subtile mais efficace à votre contenu.
Vous pouvez utiliser cette propriété pour souligner le texte ou barrer un mot, par exemple pour indiquer qu’il s’agit d’un terme obsolète, sans avoir besoin de mettre tout le mot en gras.
Vous ne devez pas abuser des effets trop voyants avec cette propriété. Utiliser l’effet blink sur un bloc entier de texte n’est sûrement pas une bonne idée !
Il existe plusieurs valeurs que vous pouvez attribuer à la propriété ‘text-decoration’, notamment : underline (souligné), overline (surligné), line-through (barré) et none (pas d’effet). Vous pouvez aussi combiner ces valeurs si nécessaire.
N’hésitez pas à jouer avec les couleurs lorsque vous utilisez la propriété ‘text-decoration’. Cela peut être utile pour distinguer différents types de liens dans votre contenu et aider vos lecteurs à naviguer plus facilement sur votre site web.
Personnalisation des liens hypertextes grâce au CSS
En parlant de liens, saviez-vous que vous pouvez personnaliser la façon dont les liens hypertexte apparaissent sur votre site grâce au CSS ?
Au lieu d’utiliser le style par défaut des navigateurs web pour les liens (généralement bleu et souligné), vous pouvez créer une apparence unique qui correspond à l’esthétique globale de votre site web.
Pour cela, utilisez la propriété ‘a’ en CSS. Cette propriété s’applique aux liens hypertexte, c’est-à-dire tout élément HTML balisé avec ‘‘. Vous pouvez ainsi styliser tous vos liens ou seulement certains types.
La première chose à faire est de définir comment les liens non visités doivent être affichés. Cela peut inclure la couleur du texte, la couleur d’arrière-plan ou même l’utilisation d’une image comme fond.
Vous pouvez aussi personnaliser l’apparence des liens visités, afin que vos utilisateurs sachent facilement où ils ont déjà navigué sur votre site. Vous devez utiliser deux états.
N’hésitez pas à ajouter un peu plus de flair en fonction du comportement de survol des utilisateurs. Par exemple, lorsque quelqu’un passe sa souris sur un lien hypertexte sans cliquer dessus, il peut être utile qu’il change légèrement visuellement (par exemple en augmentant sa taille).
