Tutoriel CSS

CSS ACCUEIL Présentation CSS Syntaxe CSS Sélecteurs CSS CSS Comment faire Commentaires CSS Couleurs CSS Arrière-plans CSS Bordures CSS Marges CSS Rembourrage CSS CSS Hauteur/Largeur Modèle de boîte CSS Aperçu CSS Texte CSS Polices CSS Icônes CSS Liens CSS Listes CSS CSS Tables Affichage CSS CSS Max-width Poste CSS Index Z CSS Débordement CSS Flottant CSS Bloc en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation CSS Listes déroulantes CSS Galerie d'images CSS Sprites d'image CSS Sélecteurs d'attributs CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS CSS !important Fonctions mathématiques CSS

CSS avancé

Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots-clés de couleur CSS Dégradés CSS Ombres CSS Effets de texte CSS Polices Web CSS Transformations CSS 2D Transformations 3D CSS Transitions CSS Animation CSS Info-bulles CSS CSS Style Images Réflexion d'image CSS Ajustement d'objet CSS Position d'objet CSS Masquage CSS Boutons CSS Pagination CSS CSS plusieurs colonnes Interface utilisateur CSS Variables CSS Dimensionnement des boîtes CSS Requêtes média CSS Exemples CSS MQ Boîte flexible CSS

CSS réactif

RWD Introduction Fenêtre RWD Affichage de la grille RWD Requêtes multimédia RWD Images RWD Vidéos RWD Cadres RWD Modèles RWD

Grille CSS

Grille d'introduction Conteneur de grille Élément de grille

CSS SASS

Tutoriel SASS

Exemples CSS

Modèles CSS Exemples CSS CSS Quiz Exercices CSS Certificat CSS

Références CSS

Référence CSS Sélecteurs CSS Fonctions CSS Audit de référence CSS Polices sécurisées pour le Web CSS CSS animable Unités CSS Convertisseur CSS PX-EM Couleurs CSS Valeurs de couleur CSS Valeurs CSS par défaut Prise en charge du navigateur CSS

Présentation CSS


CSS est le langage que nous utilisons pour styliser une page Web.


Qu'est-ce que CSS ?

  • CSS signifie feuilles de style en cascade
  • CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur d'autres supports
  • CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois
  • Les feuilles de style externes sont stockées dans des fichiers CSS

Démo CSS - Une page HTML - Plusieurs styles !

Ici, nous allons montrer une page HTML affichée avec quatre feuilles de style différentes. Cliquez sur les liens "Feuille de style 1", "Feuille de style 2", "Feuille de style 3", "Feuille de style 4" ci-dessous pour voir les différents styles :



Pourquoi utiliser CSS ?

CSS est utilisé pour définir les styles de vos pages Web, y compris la conception, la mise en page et les variations d'affichage pour différents appareils et tailles d'écran.

Exemple CSS

body {
  background-color: lightblue;
}

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

p {
  font-family: verdana;
  font-size: 20px;
}

CSS a résolu un gros problème

Le HTML n'a JAMAIS été destiné à contenir des balises pour formater une page Web !

HTML a été créé pour décrire le contenu d'une page Web, comme :

<h1>Ceci est un titre</h1>

<p>Ceci est un paragraphe.</p>

Lorsque des balises telles que <font> et des attributs de couleur ont été ajoutés à la spécification HTML 3.2, cela a déclenché un cauchemar pour les développeurs Web. Le développement de grands sites Web, où les polices et les informations de couleur étaient ajoutées à chaque page, devenait un processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

CSS a supprimé le formatage de style de la page HTML !

Si vous ne savez pas ce qu'est le HTML, nous vous suggérons de lire notre Tutoriel HTML .


CSS économise beaucoup de travail !

Les définitions de style sont normalement enregistrées dans des fichiers .css externes.

Avec un fichier de feuille de style externe, vous pouvez modifier l'apparence de tout un site Web en modifiant un seul fichier !