fbpx
/ English
CSS : ce qui rends votre site Web sexy !

CSS : ce qui rends votre site Web sexy !

Le CSS est venu après le HTML

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 : c’est quoi ?

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.

Comment utiliser le CSS ?

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.

Créer un fichier 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.

La syntaxe du CSS

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 :

CSS : ce qui rends votre site Web sexy !

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;
}

Un peu de concret !

Voici une page où il y a seulement du HTML et aucun CSS :

CSS : ce qui rends votre site Web sexy !

Voici maintenant la même page, mais avec du CSS :

CSS : ce qui rends votre site Web sexy !

Finalement, le CSS rends votre site moins ennuyant et plus joli

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.

Auteur de l'article

Marie-Michel Tremblay

Intégratrice Web, Graphiste
Dotée d’une fibre artistique certaine, Marie-Michel détient un DEC en techniques d’intégration multimédia, une AEC en graphisme et d’un DEC en musique. Après ses études, elle travaille durant six ans comme conceptrice Web et graphiste au sein de diverses entreprises du Saguenay, et réalise des mandats à son propre compte. Elle enseigne également le chant pendant un an et demi. En 2016, Marie-Michel rejoint Wenovio et évolue avec l’équipe pendant deux ans. Elle quitte ensuite l’équipe pour prêter main-forte à une entreprise de sa région, et revient finalement chez Wenovio en 2021. Son but : mettre au service des clients son appétit pour les nouveaux défis et sa soif d’apprendre.

À découvrir sur notre blogue

2022-04-12

HTML : la structure de votre site Web !

Marie-Michel Tremblay / Intégratrice Web, Graphiste

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

Lire la suite
2021-03-28

Noms de fichiers pour le Web : les bonnes pratiques

Vincent Gaudreau / Programmeur Web

Les bonnes pratiques J’ai récemment remarqué que plusieurs font l’erreur de mettre des noms de fichier non conformes aux bonnes pratiques et exigences techniques du Web. Évidemment ce n’est pas tout le monde qui les connait. C’est ce que je vous explique aujourd’hui. Le plus important à se souvenirIl ne faut pas mettre de caractères […]

Lire la suite
2020-11-08

Erreur 404 : comment corriger sur un site WordPress ?

Vincent Gaudreau / Programmeur Web

L’erreur 404 signifie que la page est introuvable. C’est important de corriger une erreur 404 dès que possible.

Lire la suite
2020-03-03

Sucuri Security : comment configurer l’extension sur un site WordPress ?

Davyd Quintal / Directeur des solutions novatrices

Sucuri Security est une extension gratuite pour les sites Web créés avec WordPress. Elle permet de faire une veille continue de votre site.

Lire la suite

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.