Accueil / Glossaire / Qu’est ce que : LES FEUILLES DE STYLE (CSS)

Qu’est ce que : LES FEUILLES DE STYLE (CSS)

CSS ou Cascading Style Sheets est une langue de feuille de style utilisée pour définir l’apparence visuelle et le formatage des documents HTML. Les thèmes WordPress utilisent CSS et HTML pour produire les données générées par WordPress. Chaque thème WordPress contient un fichier style.css qui a des règles de style pour définir le formatage des pages générées par WordPress.

CSS est très simple à utiliser et facile à apprendre. Il existe de nombreux sites Web qui publient des didacticiels CSS pour les débutants qui peuvent aider un nouvel utilisateur de WordPress à démarrer. Cependant, étant donné qu’il est très simple à utiliser, beaucoup d’utilisateurs de WordPress peuvent comprendre les bases en regardant simplement le fichier style.css de leur thème WordPress.

Exemple:

body {
font-size:14px;
color: #444;
background-color:#FFFFFF;
}

h1 {
font-size:18px;
text-transform:uppercase;
}

.post-title {
font-size: 16px;
color: #4C0000;
font-weight:normal;
}

Les éléments HTML peuvent être stylisés directement dans CSS. Les concepteurs utilisent également des identificateurs et des classes pour définir différentes sections qui peuvent être stylisées dans CSS. Cela les aide à utiliser différents styles pour les mêmes éléments HTML sur une page Web, mais dans différentes sections. Par exemple, un élément h1 pour le titre du blog dans la section d’en-tête d’une page peut être différent d’un autre élément h1 dans la zone de publication de la même page.

Exemple:


<div id="header">


<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>


</div>

Le HTML montré ci-dessus contient un identifiant nommé ‘en-tête’ et une classe appelée ‘blog-title’. Ces sections peuvent être dessinées dans CSS.

Exemple:

#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 

h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
}