/ Accueil / 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

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

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

css

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.e 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
2024-07-23

Créer une charte graphique efficace pour votre entreprise

Érika Poissant / Graphiste et intégratrice Web

Découvrez comment créer une charte graphique efficace qui renforce l’identité et la cohérence visuelle de votre marque.

Lire la suite
2023-01-12

Utilisateurs WordPress : la gestion et les rôles

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Sur votre site WordPress il est possible de créer plusieurs utilisateurs, d’en modifier et d’en supprimer. Apprenez en plus sur la gestion et les rôles des utilisateurs WordPress.

Lire la suite
2024-02-29

ChatGPT et conseils juridiques : comment l’utiliser pour le droit ?

Davyd Quintal / Directeur des solutions novatrices

Cette semaine je vous présente une vidéo tutoriel innovante qui vous montre comment utiliser ChatGPT pour obtenir des conseils juridiques.

Lire la suite

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.