Français

Tutoriel CSS

Tutoriel CSS3

CSS Avancé

Références CSS

CSS Réactif

CSS - Guide Rapide

Bienvenue, aspirants développeurs web ! Aujourd'hui, nous plongeons dans le monde coloré du CSS. Attachez vos ceintures, car nous allons entreprendre un voyage qui transformera à jamais la way vous regardez les sites web !

CSS - Quick Guide

Qu'est-ce que le CSS ?

Le CSS, ou Feuilles de Style en Cascade, est comme le styliste de la mode du monde web. Si HTML est l'ossature d'un site web, le CSS est la peau, les vêtements et le maquillage. C'est ce qui rend les sites web beaux et uniques.

Imaginez que vous construisez une maison. HTML serait les briques et le mortier, tandis que CSS serait la peinture, le papier peint et le mobilier. C'est ce qui transforme une structure ordinaire en une maison.

Commençons par un exemple simple :

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

Ce petit bout de CSS indique au navigateur de peindre toute la page d'une couleur gris clair (#f0f0f0) et d'utiliser Arial comme police par défaut. Si Arial n'est pas disponible, il utilisera n'importe quelle police sans serif.

CSS - Syntaxe

La syntaxe CSS est comme une recette. Elle a deux parties principales : le sélecteur et le bloc de déclaration.

selector {
property: value;
}

Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Chaque déclaration inclut un nom de propriété CSS et une valeur, séparés par un deux-points.

Regardons un exemple plus complexe :

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

Ici, nous visons tous les éléments <h1>. Nous rendons le texte bleu, définissons sa taille à 24 pixels et le centrons sur la page.

CSS - Inclusion

Il y a trois manières d'inclure du CSS dans votre HTML :

  1. CSS Inline
  2. CSS Interne
  3. CSS Externe

CSS Inline

Le CSS inline est appliqué directement à un élément HTML en utilisant l'attribut style. C'est comme donner des conseils de mode à une seule personne.

<p style="color: red; font-size: 16px;">Ceci est un paragraphe rouge.</p>

CSS Interne

Le CSS interne est placé dans la section <head> d'une page HTML, à l'intérieur des balises <style>. C'est comme fixer les règles de tenue pour tout le monde à une fête.

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

CSS Externe

Le CSS externe est stocké dans un fichier séparé avec une extension .css. Il est lié au fichier HTML en utilisant la balise <link>. C'est comme créer un magazine de mode que tout le monde peut consulter.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - Unités de Mesure

Le CSS a plusieurs unités pour exprimer la longueur. Jetons un coup d'œil aux plus courantes :

Unité Description
px Pixels (1px = 1/96e d'1in)
% Pourcentage
em Relatif à la taille de la police de l'élément (2em signifie 2 fois la taille de la police actuelle)
rem Relatif à la taille de la police de l'élément racine
vw Relatif à 1% de la largeur de la fenêtre
vh Relatif à 1% de la hauteur de la fenêtre

Voici un exemple utilisant différentes unités :

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - Couleurs

Les couleurs en CSS peuvent être spécifiées de plusieurs manières :

  1. Par nom : red, blue, green, etc.
  2. Par valeurs RGB : rgb(255, 0, 0) pour le rouge
  3. Par codes Hex : #FF0000 pour le rouge

Voyons cela en action :

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - Arrière-plans

Les arrière-plans peuvent vraiment faire ressortir votre site web. Vous pouvez définir une couleur d'arrière-plan, une image, ou les deux !

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

Ce CSS définit une couleur d'arrière-plan gris clair, ajoute une image centrée sur la page, assure que l'image ne se répète pas, et la fait couvrir tout le viewport.

CSS - Polices

Les polices sont cruciales pour la lisibilité et le style. Voici comment vous pouvez les définir :

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

Cela définit Helvetica comme police préférée, avec Arial et n'importe quelle police sans serif comme alternatives. Il définit également la taille à 16 pixels, le poids à normal, et le style en italique.

CSS - Texte

Les propriétés de texte contrôlent la way le texte est affiché :

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

Ce CSS rend le texte gris foncé, justifié, souligné, tout en majuscules, avec une hauteur de ligne 1,5 fois la normale.

CSS - Utilisation des Images

Les images peuvent être stylisées comme n'importe quel autre élément :

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

Cela rend l'image responsive (largeur 100% jusqu'à 500px), maintient son rapport hauteur/largeur, et lui donne une forme circulaire.

CSS - Liens

Les liens peuvent être stylisés différemment selon leur état :

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

Cela change la couleur des liens en bleu, enlève le soulignement, les rend rouges et soulignés lors du survol, et met les liens visités en violet.

N'oubliez pas, le CSS est tout à fait une question de créativité et d'expérimentation. N'ayez pas peur de jouer avec différentes propriétés et valeurs. Plus vous pratiquez, mieux vous deviendrez à créer de beaux designs web réactifs. Bon codage !

Credits: Image by storyset

Tutoriel précédent:
CSS - Questions et réponses
Tutoriel suivant:
CSS - Références