Introduction

Le langage de feuilles de style en cascade (CSS) est un outil puissant et intuitif pour donner vie à un site Web et le rendre plus attrayant et intéressant. Dans cet article, nous vous montrerons comment ajouter de la couleur, de la structure et de l'interactivité à votre site Web à l'aide de CSS.

L’histoire de CSS

CSS a été créé en 1996 par le mathématicien et développeur informatique Håkon Wium Lie pour faciliter la mise en page des documents web. Au fil des ans, il est devenu le langage de style web le plus populaire et le plus utilisé. Il est pris en charge par tous les principaux navigateurs web et peut être utilisé pour créer des sites web riches et attrayants.

Installation

Afin de styliser notre fichier, il faudra d’abord créer un fichier utilisant l’extension “.css”, par convention nous allons le nomme “style.css”.

Il faudra ensuite l’inclure dans la balise “head” de notre précédent fichier HTML, afin qu’il soit pris en compte et que les styles renseignés dedans puissent être pris en compte.

<head>
...
	<link rel="stylesheet" href="style.css">
...
</head>

Reset CSS

Afin d’éviter des comportements inattendus des différents navigateurs, il est conseillé d'utiliser un reset CSS. Un reset CSS est un ensemble de règles qui vont mettre tous les éléments à zéro afin qu'ils soient tous traités de la même manière. Une fois que le reset CSS est appliqué, vous pourrez ensuite commencer à appliquer vos propres règles CSS pour donner à votre site Web l'apparence et le comportement souhaités.

/* Reset CSS */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

Polices d’écritures

Vous pouvez également ajouter des polices d'écriture externes pour personnaliser votre site Web. Google Fonts est une excellente ressource pour trouver des polices de qualité qui sont faciles à installer et à utiliser. Une fois que vous avez trouvé une police que vous aimez, vous pouvez l'ajouter à votre site Web en la téléchargeant et en l'incluant dans votre fichier CSS. Vous pouvez ensuite appliquer la police à des éléments spécifiques ou à l'ensemble du site en utilisant des sélecteurs et des règles CSS.

/* Police d'écriture Inter */
@import url('<https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap>');

html, body {
    font-family: 'Inter', sans-serif;
}

Structurer le contenu

Le langage CSS peut également être utilisé pour structurer le contenu de votre site Web. Vous pouvez utiliser des sélecteurs CSS pour sélectionner des éléments spécifiques et les organiser de manière à ce que le contenu soit facilement lisible et navigable. Vous pouvez également utiliser des règles CSS pour ajouter des marges, des bordures et des arrière-plans à des éléments spécifiques afin de les mettre en valeur et de donner à votre page une structure visuelle claire.

Les unités en CSS

Pour appliquer des règles et des styles à vos éléments, vous devrez utiliser des unités de mesure. En CSS, les unités les plus couramment utilisées sont les pixels (px), les ems (em), les pourcentages (%), et les points (pt). Les pixels sont les plus utilisés et sont très précis, tandis que les autres unités sont utiles pour des applications plus flexibles. Vous pouvez également utiliser des unités relatives comme le rem (root em) et le vw (viewport width) pour créer des mises en page réactives.

Classes d’utilité

Le langage CSS permet également de faciliter le développement de sites web réactifs en offrant des classes d'utilité. Ces classes peuvent être utilisées pour cibler des éléments spécifiques et leur appliquer des règles pour répondre aux différentes tailles d'écran et configurations d'affichage. Vous pouvez également utiliser des classes d'utilité pour masquer et afficher des éléments spécifiques selon les besoins.

Flexbox

CSS est également puissant pour créer des mises en page complexes. Une des meilleures façons de le faire est à l'aide de Flexbox. Flexbox est un module CSS qui vous permet de créer des mises en page flexibles et de positionner facilement les éléments sur votre page. Vous pouvez utiliser des sélecteurs et des règles Flexbox pour organiser et aligner vos éléments de manière cohérente, en fonction des besoins de votre site Web.

/* Classes d'utilité */

/* Conteneur prenant 1200px de largeur maximale et centré */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* activation de flex */
.flex {
    display: flex;
}

/* affichage du contenu en rangées */
.row {
    flex-direction: row;
}

/* Centrer verticalement le contenu */
.align-items-center {
    align-items: center;
}

/* Ajout d'espacement entre les éléments */
.gap-1 {
    gap: 1rem;
}

/* Rembourrage de l'élément */
.p-3 {
    padding: 3rem;
}

/* Alignement horizontal des éléments chacun d'un côté de la page */
.justify-between {
    justify-content: space-between;
}

Vous pouvez également utiliser CSS pour créer une navigation cohérente et intuitive pour votre site web. Vous pouvez utiliser des sélecteurs et des règles CSS pour cibler des éléments spécifiques et les organiser de manière à ce que la navigation soit facile à comprendre et à utiliser. Vous pouvez également ajouter des marges, des bordures et des arrière-plans à des éléments spécifiques afin de les mettre en valeur et de donner à votre navigation une structure visuelle claire.

/* Rembourrage du menu */
.navigation {
    padding: 1.5rem 0;
}

/* Mettre le logo en gras, l'aggrandir et lui donner une couleur noire */
.logo{
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.8rem;
    color: #313131;
}

/* Suppression des styles de la liste */
ul {
    list-style: none;
}

/* Alignement vertical des éléments de la liste */
li {
    display: inline-block;
}

/* Suppression des styles des liens et ajout de couleur noire */
a {
    text-decoration: none;
    color: black;
}

Le contenu

/* Aligner le contenu droit en colonnes et ajouter de l'espacement */
.right-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mettre notre titre en gras et de couleur noire */
.main-title {
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.3rem;
    color: #313131;
}

/* Styliser notre description */
.description {
    width: 400px;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #313131;
}

/* Styliser notre bouton en lui ajoutant une bordure arrondie et une couleur de fond */
.cta {
    width: 166px;
    height: 52px;
    border: none;
    border-radius: 0.3125em;
    background: #000;
    font-weight: bold;
    font-size: .9rem;
    color: #fff;
    cursor: pointer;
}

Ajoutez de l'interactivité

Le langage CSS est également un outil puissant pour ajouter de l'interactivité à votre site Web. Vous pouvez utiliser des sélecteurs CSS pour cibler des éléments spécifiques et ajouter des animations, des transitions et des effets visuels qui répondent aux interactions de l'utilisateur. Vous pouvez également utiliser des règles CSS pour ajouter des effets visuels lors du survol des éléments de votre site Web pour donner à votre page une sensation plus vivante et dynamique.

Effet de survol

En utilisant des règles CSS, vous pouvez ajouter des effets visuels lors du survol des éléments de votre site Web. Vous pouvez ajouter des animations pour que les éléments réagissent aux interactions de l'utilisateur et ajoutent une sensation plus vivante à votre site. Vous pouvez également modifier la couleur, la taille et le style des éléments lorsqu'ils sont survolés pour donner à votre site une sensation plus dynamique et interactive.

/* Ajout d'effet de survol qui va changer la couleur et qui prendra .3s à s'executer */
.cta:hover {
    background: #313131;
    transition: background 0.3s ease-in-out;
}

Rendu final


Rendu final

Conclusion

Maintenant que vous savez comment utiliser le langage CSS pour améliorer l'apparence et le comportement de votre site Web, vous pourrez créer des sites Web qui offrent une expérience unique et captivante aux utilisateurs. Vous pouvez créer des mises en page flexibles, ajouter des effets visuels et des animations pour améliorer l'interactivité et personnaliser votre site Web avec des polices et des couleurs attrayantes. Alors, qu'attendez-vous ? Apportez de la vie à votre site Web avec CSS !