menu X

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets), en français "feuilles de style en cascade", est un langage utilisé pour décrire la présentation visuelle d'une page web écrite en HTML ou XML (et ses dérivés, comme SVG ou XHTML). Il permet de contrôler l'apparence des éléments d'une page, comme les couleurs, les polices, les marges, les espacements, les dispositions, et plus encore.



Origine et rôle


CSS a été développé par le W3C (World Wide Web Consortium) en 1996 pour séparer le contenu (HTML) de la présentation. Cela rend les pages web plus faciles à maintenir et améliore l'expérience utilisateur en permettant une personnalisation plus riche et flexible.



Fonctionnement


CSS fonctionne en appliquant des règles de style aux éléments HTML. Une règle CSS est composée de deux parties principales :

1. Sélecteur : Identifie l'élément HTML à styliser (par exemple, un paragraphe `<p>` ou une classe `.bouton`).

2. Déclarations : Contient des propriétés (comme `color`, `font-size`, etc.) et leurs valeurs.



Exemple de règle CSS :




p {
color: blue; Le texte des paragraphes sera bleu
font-size: 16px; La taille de police des paragraphes sera de 16 pixels
}


Dans cet exemple :

- `p` est le sélecteur qui cible les éléments `<p>`.
- `color` et `font-size` sont des propriétés CSS.
- `blue` et `16px` sont les valeurs attribuées à ces propriétés.



Caractéristiques principales


1. Séparation du style et du contenu : Permet de modifier l'apparence d'un site sans toucher à sa structure HTML.

2. Cascade : Les styles appliqués aux éléments HTML suivent un ordre de priorité défini (styles par défaut, styles externes, styles intégrés, etc.).

3. Réutilisation : Une feuille de style peut être utilisée pour plusieurs pages web, facilitant leur gestion.



Types de CSS


Il existe trois façons d'intégrer CSS dans un projet web :

1. CSS externe : La meilleure pratique. Les styles sont définis dans un fichier `.css` séparé, lié à la page HTML avec une balise `<link>`.



<link rel="stylesheet" href="styles.css">

2. CSS interne : Les styles sont définis dans une balise `<style>` placée dans le `<head>` de la page HTML.



<style>
h1 {
color: green;
}
</style>


3. CSS en ligne : Les styles sont appliqués directement aux éléments HTML via l’attribut `style`.



<h1 style="color: red;">Titre rouge</h1>

Versions


CSS a évolué en plusieurs versions :

- CSS1 (1996) : Première version standardisée.

- CSS2 (1998) : Ajout de fonctionnalités comme les médias et les positionnements.

- CSS3 (2001+) : Introduction des modules (animations, transitions, flexbox, etc.) et d'une grande flexibilité pour le design moderne.



Utilisation


CSS est utilisé pour :

- Modifier les couleurs, polices, marges, bordures, arrière-plans, etc.

- Créer des mises en page adaptatives (responsive design) avec des outils comme Flexbox et Grid.

- Ajouter des animations et des transitions pour une meilleure interactivité.
- Améliorer l'accessibilité et la compatibilité des sites web.



Exemple complet


Fichier HTML :




<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>


Fichier CSS (`styles.css`) :


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

h1 {
color: blue;
text-align: center;
}

p {
font-size: 18px;
line-height: 1.5;
}



Limites


- CSS ne permet pas de gérer la logique ou le comportement d’un site (ce rôle est réservé à JavaScript).

- La compatibilité entre navigateurs peut parfois poser problème, bien que cela soit de moins en moins fréquent.



Conclusion


CSS est un outil essentiel pour styliser et personnaliser les pages web. En combinaison avec HTML et JavaScript, il permet de créer des sites modernes, interactifs et esthétiques.




Infos sup :

Proposer par : Henry Fiti
Date du : 21/12/2024

Henry Fiti

Auteur

Commentaires

News Mots

News Tutoriels

News Annonces

Plus des Mots

• Java : Java est un langage de programmation de haut niveau, orienté obj ... • Internet : Internet est un réseau mondial de communication qui interconnect ... • Open Source : Le terme *open source* désigne un modèle de développement logi ... • Internet Corporation for Assigned Names and Numbers (ICANN) : L' Internet Corporation for Assigned Names and Numbers (ICANN) ... • Système binaire : Le système binaire est un système de numération basé sur deux ... • API (Interface de Programmation d'Application) : Le terme "API" est l'acronyme de "Application Programming Interfa ... • HTTPS (HyperText Transfer Protocol Secure) : HTTPS, ou HyperText Transfer Protocol Secure (en français : Prot ... • Langage informatique (langage de programmation) : Un langage informatique (ou langage de programmation) est un syst ...

Plus des Tutoriels

• Comment Installer et jouer à des jeux PSP sur Android avec PPSSPP • Xender : L'application que vous sous-estimez ! 🚀 • Comment Créer une clé USB d'installation bootable • Comment afficher les mots de passe enregistrés sur Google Chrome • Comment Supprimez facilement des objets sur vos photos avec Magic Eraser ? • 🛡️ Vérifier l'existence d'une adresse email avec KnockMail sur Kali Linux • Comment Naviguer sur le Web en toute confidentialité avec Tor • 📍 Traquer une adresse IP en temps réel sur Termux : découvrez l’outil IpHack

Plus d'Annonces

• Comment extraire du texte à partir d'une image | Les 3 meilleurs outils OCR en ligne • les 10 générateurs d’images les plus performants en avril 2025 • Découvrez comment monétiser avec l'application d'intelligence artificielle POE IA • Une liste impressionnante d’outils IA pour booster votre efficacité ! • 📑 Traduis facilement tes documents avec l’intelligence artificielle avec 9 outils 100 % gratuits • Top Astuces et Secrets de iOS • SaveFrom.net : Téléchargez Facilement Vidéos et Musique en Quelques Clics ! • Que deviennent les fichiers supprimés ?