Présentation du CSS3

Objectif

Comprendre les bases du CSS3.
Savoir comment intégrer le CSS3 dans une page HTML.
Maîtriser les sélecteurs CSS3.
Explorer les fonctionnalités avancées de CSS3.

Introduction

Cascading Style Sheets ou CSS est un langage de feuille de style utilisé pour décrire la présentation d’un document écrit en HTML ou en XML
CSS vous permet de définir l’apparence des textes (comme la police, la couleur, la taille, etc…), ainsi que l’agencement de la page (comme les marges, l’arrière-plan, etc…). CSS définit donc la présentation du document.
CSS décrit la façon dont les éléments doivent être affichés à l’écran, sur du papier, ou sur d’autres supports.
CSS est initialement conçues pour être utilisées avec des documents HTML.
fournir un mécanisme pour associer différents styles à un même document
Une feuille de style contient la définition de différentes règles CSS. C’est en appliquant ces règles qu’on peut mettre en forme les éléments, ou plus concrètement leur donner du style.
Un style définit la façon dont un élément HTML (par exemple <h1>) sera affiché.

Principes

Une Feuille de style est un ensemble de règles Chaque règle spécifie les valeurs que prendre les propriétés associées aux éléments du document.
Une règle CSS est divisée en 2 parties :

Le sélecteur: Détermine ou identifie les parties du document auxquelles sera appliqué le style.
Le bloc de déclaration: Dans un bloc de déclaration, on liste tous les styles que l’on veut utiliser pour l’élément sélectionné

La syntaxe

La syntaxe de base de CSS est composée de 3 parties :

Ces trois parties sont écrites de la façon suivante :
sélecteur {propriété:valeur}
Un sélecteur correspond à une balise HTML (<p>, <h1>, etc…) et la propriété est un attribut dont on veut changer la valeur.

Exemple :

h1 {font-size:100px}
Dans cet exemple, tous les titres principaux (<h1>) du document auront une taille de 100 pixels.

Si la valeur d’un attribut contient un espace, alors la valeur de l’attribut s’écrit en guillemets :
h2 {font-family: »sans serif »}

Il est possible de définir plusieurs attributs pour un même sélecteur. Dans ce cas, chaque propriété sera séparée par un point-virgule :

p {font-family:"sans serif"; font-size: 90%; color: blue}

p{ font-family:"sans serif"; font-size: 90%; color: blue; }

Comment intégrer du CSS3 dans une page HTML

Il existe plusieurs façons d’intégrer du CSS3 dans une page HTML. Voici trois méthodes courantes avec des exemples et des cas pratiques :
1- Intégration interne (Inline) :

Dans cette méthode, vous intégrez le CSS directement dans la balise HTML à l’aide de l’attribut style. Cela permet de définir des styles spécifiques à un élément.
Exemple :

<p style="color: blue; font-size: 16px;">Ce texte est en bleu et de taille 16px.</p>

Cas pratique : Utilisez cette méthode lorsque vous souhaitez appliquer des styles spécifiques à un seul élément.

2- Intégration interne (Internal) :

Cette méthode consiste à inclure le code CSS dans la balise <style> dans l’en-tête de votre document HTML. Cela vous permet de définir des styles pour toute la page.
Exemple :

<!DOCTYPE html> <html> <head> <style> p { color: red; font-size: 18px; } </style> </head> <body> <p>Ce texte est en rouge et de taille 18px.</p> </body> </html>

Cas pratique : Utilisez cette méthode lorsque vous souhaitez appliquer des styles à l’ensemble de la page.

3- Intégration externe (External) :

L’intégration externe implique de créer un fichier CSS séparé et de l’inclure dans votre page HTML à l’aide de la balise .
Exemple :

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Ce texte utilise des styles définis dans le fichier CSS externe.</p> </body> </html>

Contenu du fichier styles.css :

p { color: green; font-size: 20px; }

Cas pratique : Utilisez cette méthode lorsque vous souhaitez réutiliser les mêmes styles sur plusieurs pages HTML.

En général, l’intégration externe est la méthode recommandée pour gérer les styles CSS car elle permet de séparer la structure HTML du design CSS, ce qui facilite la maintenance et la réutilisation des styles. Cependant, les méthodes internes peuvent être utiles pour des ajustements rapides ou pour des styles spécifiques à un seul élément.

Cours CSS

Structure et règles CSS

CSS

Présentation du CSS3