Qu’est-ce que le CSS et comment l’utiliser pour personnaliser votre

Peut-être savez-vous que le CSS est un outil utile pour concevoir et personnaliser un site Web, mais savez-vous de quoi il s’agit exactement ?

Le CSS, ou feuilles de style en cascade, est un moyen d’ajouter des instructions stylistiques au code back-end de votre site Web. Avant d’aller plus loin, définissons le mot code et expliquons ce à quoi il sert.

Le code d’un site Web est le langage qui indique à votre navigateur Web à quoi doit ressembler un site Web et ce qu’il doit faire. Le langage de balisage le plus courant est le langage HTML (HyperText Mark-Up Language), un type de code qui indique la façon dont doivent être présentés les éléments d’une page Web. Le HTML précise, par exemple, la place d’un en-tête, les sauts de paragraphe et la taille d’une image.

Le CSS est une extension du HTML qui contient des instructions stylistiques spécifiques. Le CSS permet de définir la couleur d’un en-tête ou la police de contenu. Si l’on peut comparer le HTML à la charpente d’une maison, le CSS en représente les principaux éléments architecturaux (couleur de la peinture, dimensions des fenêtres, largeur des couloirs, etc.). Le CSS permet de personnaliser l’aspect de votre site Web et de styler chaque page de façon harmonieuse et cohérente. Grâce à lui, vous pouvez veiller à ce que l’apparence de votre site soit conforme à l’image de votre marque.

Les éléments du CSS

Avant de vous expliquer comment ajouter un langage CSS personnalisé à votre site Web, penchons-nous sur quelques termes importants. Le CSS consiste en trois éléments majeurs qu’il est important de comprendre : les sélecteurs, les propriétés et les valeurs.

Un sélecteur utilise le code HTML pour cibler la partie du site Web à styler. Par exemple, le code HTML pour un paragraphe est « p ». Si vous souhaitez utiliser le CSS pour modifier le style d’un paragraphe, « p » devient votre sélecteur.

Les propriétés et les valeurs sont ensuite utilisées pour appliquer des instructions stylistiques aux sélecteurs. Si vous souhaitez écrire vos paragraphes en rouge, la propriété vient en premier et précise l’attribut à modifier (la couleur dans ce cas précis). La valeur représente ce en quoi vous changez l’attribut (le rouge dans notre exemple).

Voici ce à quoi ressemble un code CSS utilisé pour écrire un paragraphe en rouge (remarquez la ponctuation particulière utilisée) :

p {

color: red;

}

Chaque fois qu’un « p » est utilisé dans le code de votre site, le texte apparaîtra en rouge. Si vous souhaitez découvrir davantage les bases du CSS, WordPress.com dispose de plusieurs ressources et guides utiles.

Utiliser CSS avec WordPress.com

Il existe deux manières de personnaliser le CSS de votre site WordPress.com. La première méthode consiste à insérer le langage CSS directement dans votre code HTML. Pour ce faire, naviguez jusqu’à la vue HTML dans l’éditeur WordPress.com. Puis, insérez le fragment de code désiré à l’endroit où vous souhaitez que le style CSS apparaisse. Si vous adoptez cette méthode, sachez que vous devrez insérer le fragment de code CSS dans chaque page et article où vous voulez que le style apparaisse.

Si vous souhaitez personnaliser l’ensemble du site, vous devrez utiliser la fonctionnalité Design sur mesure. Elle est accessible aux abonnés des plans Premium et Business de WordPress.com. Pour y accéder, ouvrez Apparence > Outil de personnalisation > CSS.

Les exemples suivants vous expliquent comment utiliser le CSS pour personnaliser votre site Web.

Modifier la couleur du texte

Si votre thème utilise des sous-en-têtes jaunes par défaut alors que vous souhaiteriez qu’ils s’affichent en vert, vous pouvez en changer la couleur à l’aide du CSS. Le code HTML pour un sous-en-tête est « h2 » (il s’agit du sélecteur). La couleur est la propriété que vous devez modifier et la valeur en laquelle vous voulez la changer est le vert. Vous devez donc insérer le code suivant dans le panneau CSS situé à l’intérieur de l’Outil de personnalisation :

h2 {

color: green;

}

Vous pouvez également utiliser cette propriété pour changer la couleur du corps du texte :

body {

color: blue;

}

Modifier la police et la taille de police

Si votre thème a pour défaut une police que vous n’aimez pas, vous pouvez la changer en utilisant la propriété « font-family » (famille de polices) :

h2 {

font-family: Helvetica;

}

L’utilisation du code ci-dessus changera la police de vos sous-en-têtes en Helvetica. Toutefois, vous pouvez choisir parmi de nombreuses autres polices.

Le changement de la taille de la police est une autre option. Dans le langage CSS, la taille de la police est gérée par des pourcentages. Le code ci-dessous représente une modification de 250 % du sous-en-tête.

h2 {

font-size: 250%;

}

Le texte suivant vous permet de modifier la police et la taille de police en même temps :

h2 {

font-family: Helvetica; font-size: 250%;

}

Autres propriétés de texte qu’il est important de connaître : « font-weight » (la graisse d’une police permettant de déterminer l’épaisseur du trait) ; « font-style » (le style de police permettant de sélectionner un style italique ou oblique) ; et « text-decoration » (utilisé pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte).

Modifier l’espacement

Parfois, l’aspect de la police choisie est parfait, mais les lettres semblent être trop proches les unes des autres. Pour résoudre les problèmes d’espacement, reportez-vous à HTMLdog qui donne des conseils sur la manière de changer l’espacement du texte à l’aide du CSS. Si les lettres semblent trop serrées, utilisez l’option suivante :

p {

letter-spacing: 0.5em;

}

Modifiez ensuite le nombre jusqu’à ce que l’espacement entre les lettres vous semble satisfaisant.

Jetez-vous à l’eau

Qu’est-ce-que le CSS ? Vous connaissez désormais la réponse à cette question et êtes fin prêt à commencer à débuter en la matière. N’oubliez pas, vous pouvez toujours publier vos questions supplémentaires sur les forums WordPress.com.