Lors de l’arrivée du Web en 1989, le CSS n’existait pas. Les développeurs de sites étaient limité au HTML pour créer leurs pages Web. Ils devaient se débrouiller comme ils le pouvaient pour réaliser une belle mise en page en ajoutant des balises HTML. Visuellement, les sites étaient très simple et n’avaient rien à voir avec les sites actuels.
CSS est l’acronyme de Cascading Style Sheets ou en français « feuilles de style en cascade ». C’est un langage de programmation Web utilisé pour formater le design de votre site. Par exemple, il permet de changer la taille et la couleur des polices de caractères, changer la couleur de fond d’une page, ajouter des bordures, ajouter des marges, modifier l’alignement et beaucoup plus encore. Comme pour le HTML, il y a eu plusieurs version de CSS et celle utilisée actuellement est le CSS3.
Pour utiliser le CSS, vous devez tout d’abord connaître le HTML. Ces deux langages de programmation Web sont très liés. Sans HTML, il est impossible d’utiliser le CSS.
Avant de commencer à écrire le CSS, il est nécessaire de créer un fichier qui aura .css comme extension. Exemple: style.css. Une fois le fichier créé, nous devons le lier à la page HTML. Pour cela nous devons ajouter entre la balise <head></head> de notre fichier la ligne de code suivante :
<head>
<link rel="stylesheet" href="style.css">
</head>L’attribut « href » correspond au chemin pour atteindre le fichier CSS. Si votre fichier se trouve dans un répertoire nommé css par exemple, l’href sera plutôt comme ceci:
<head>
<link rel="stylesheet" href="css/styles.css">
</head>Il est aussi possible de mettre les styles directement dans le fichier HTML à l’aide de la balise <style></style>, mais cette méthode n’est pas recommandée et est utilisée seulement pour des cas particuliers.
Le CSS fonctionne avec des règles. Comme sur l’exemple ci-dessous, je peux demander à afficher le titre de page en vert, qu’il soit en lettre majuscule et changer la police de caractère pour du Arial :
Voici le code CSS nécessaire :
h1{
color:#3aaa35;
text-transform:uppercase;
font-family:Arial;
}La syntaxe du CSS commence toujours par le sélecteur suivi d’une accolade d’ouverture, ensuite les styles désirés et une accolade de fermeture. Les styles sont toujours écrit de la manière suivante :
propriété: valeur;
Chaque style doit avoir un point virgule à la fin.
Dans l’exemple ci-dessus, le sélecteur est le titre de page <h1>. On lui applique une couleur à l’aide de la propriété color, on met en majuscule avec la propriété » et on change la police avec la propriété font-family.
Le sélecteur peut aussi être un attribut class. Si par exemple j’ai ceci comme code HTML :
<p class="paragraphe">Un paragraphe de texte</p>Je pourrais appliquer les mêmes styles que pour le titre <h1> de l’exemple plus haut, mais changer le sélecteur h1 par la class ci-dessus. Lorsque l’on utilise une classe comme sélecteur, on doit toujours mettre un point avant :
.paragraphe{
color:#3aaa35;
text-transform:uppercase;
font-family:Arial;
}Voici une page où il y a seulement du HTML et aucun CSS :
Voici maintenant la même page, mais avec du CSS :
Vous savez maintenant que le CSS permet de styliser votre site Web. Sans feuilles de styles, le Web serait beaucoup plus triste et ennuyant! Si vous avez des questions ou besoin d’aide, n’hésitez pas à nous contacter.
Obtenez nos six guides WordPress gratuitement en vous inscrivant à notre infolettre!
Le HTML est venu au monde vers les années 1990. Il a été inventé afin d’afficher des documents hypertextes sur les navigateurs Web
L’extension Stripe pour WooCommerce permet de recevoir des paiements via Google Pay sur un site WordPress.
La fonction Canvas de ChatGPT est un outil innovant qui vous permet de rédiger des documents distincts tout en continuant la conversation.
Savez-vous comment créer un mot de passe sécuritaire qui sera difficile à décoder? Découvrez ici nos 5 conseils pour générer un mot de passe fort.
