Qu'est-ce que CSS ?

Publié: 2019-03-08

Dernière mise à jour le 22 avril 2020

Cascading Style Sheets for the web Sur le World Wide Web (www), CSS est l'acronyme de Cascading Style Sheets. CSS est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit dans un langage de balisage, généralement HTML. Le CSS régit la manière dont la mise en page et le contenu d'une page Web doivent être affichés sur un écran, sur papier ou sur d'autres supports. CSS permet d'économiser beaucoup de travail car il contrôle la mise en page de plusieurs pages Web à la fois.

Un document est généralement un fichier texte structuré à l'aide d'un langage de balisage comme HTML. Présenter un document signifie le convertir en une forme utilisable présentée visuellement sur un écran d'ordinateur via un navigateur Web comme Chrome, Firefox, Opera, Microsoft Edge et autres. Les navigateurs Web appliquent des règles CSS à un document pour affecter son affichage.

Ce blog est une introduction générale aux feuilles de style en cascade (CSS), définissant ce qu'elles sont et à quoi elles servent sur le Web. Il s'agit d'une introduction qui répond aux questions de base à ce sujet sans entrer profondément dans le monde merveilleux et intéressant de CSS.

Ce! La société fournit des services de conception Web captivants et efficaces pour les agences du monde entier. En savoir plus sur nos services de conception Web en marque blanche et sur la manière dont nous pouvons vous aider, vous et vos clients, à créer ou à améliorer leur présence sur le Web. Commencer aujourd'hui!

CSS lancé en 1994. Il a été créé et est maintenu par le W3C. Le groupe de travail CSS du W3C crée des documents appelés spécifications. Une fois que les spécifications ont été discutées et officiellement ratifiées par les membres du W3C, elles deviennent une recommandation.

Les feuilles de style en cascade niveau 1 (CSS1) sont sorties du W3C en tant que recommandation en décembre 1996. CSS2 est devenue une recommandation du W3C en mai 1998. CSS niveau 3, qui a été lancé en 1998, est toujours en cours de développement. CSS3 est une combinaison de spécifications CSS2 et de nouvelles spécifications appelées modules. Une spécification CSS est formée à partir d'un ensemble de propriétés, qui ont des valeurs définies pour mettre à jour la façon dont le contenu HTML est affiché.

CSS est venu simplifier le processus de présentation de nos documents en langage de balisage. Vous pouvez contrôler une variété de propriétés telles que :

  • couleur du texte,
  • style de polices,
  • espacement entre les paragraphes,
  • comment les colonnes sont dimensionnées et disposées,
  • images ou couleurs de fond,
  • conceptions de mise en page,
  • variations d'affichage selon la taille des écrans (Media Queries).

Comment appliquons-nous CSS ?

Cascading Style Sheets for the web Il existe quatre façons d'appliquer des styles à nos documents HTML. Les méthodes les plus couramment utilisées sont les fichiers CSS externes qui sont intégrés dans un élément <style> à l'intérieur de notre document HTML. Si différents styles de feuille sont spécifiés, les styles se décomposeront en nouveaux styles avec la priorité suivante (plus le nombre est élevé moins il est important) :

Priorité 4 : Navigateur par défaut

Les navigateurs incluent certains styles pré-écrits pour nous. Parfois, nous ne voulons pas de ces styles préchargés, nous pouvons donc les remplacer. Certains navigateurs ne prennent pas en charge les spécifications CSS modernes ou ont leur propre forme d'utilisation des propriétés CSS. Pour cette raison, nous devons faire attention lors de l'écriture de notre CSS dans un document HTML.

That! Company White Label Services

Priorité 3 : fichier de feuille de style externe

L'élément <link> peut être utilisé pour inclure un fichier de feuille de style externe dans votre document HTML. Une feuille de style externe est un fichier texte séparé avec l'extension ".css". Nous définissons toutes les règles de style dans ce fichier texte, puis nous incluons ce fichier dans n'importe quel document HTML à l'intérieur des balises <head>…</head> en utilisant l'élément <link>.

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

Priorité 2 : Intégré dans le document HTML

Nous pouvons mettre nos règles CSS dans un document HTML en utilisant l'élément <style> pour contenir les règles. Les balises <style>…</style> sont placées à l'intérieur des balises <head>…</head>.

 <style>
 sélecteur {
 valeur de la propriété;
 }
 </style>

Priorité 1 : Inline dans nos éléments HTML

Nous pouvons utiliser l'attribut style de n'importe quel élément HTML pour définir des règles de style. Ces règles ne s'appliqueront qu'à cet élément.

 <p>Bonjour le monde !</p>

Remplacement des règles CSS

Nous avons décrit quatre façons d'appliquer des règles de feuille de style à notre document HTML. Voici la règle pour remplacer n'importe quelle règle de feuille de style :

Toute feuille de style en ligne a la priorité la plus élevée. Ainsi, il remplacera toute règle définie dans les balises <style>…</style> ou les règles définies dans n'importe quel fichier de feuille de style externe.

Toute règle définie dans les balises <style>…</style> remplacera les règles définies dans n'importe quel fichier de feuille de style externe.

Toute règle définie dans le fichier de feuille de style externe a la priorité la plus basse et les règles définies dans ce fichier ne seront appliquées que lorsque les deux règles ci-dessus ne sont pas applicables.

Sélecteurs CSS

Une règle CSS est interprétée par le navigateur puis appliquée aux éléments correspondants dans notre document HTML. Une règle de style est composée de trois parties :

  • Sélecteur - est utilisé pour "trouver" (ou sélectionner) des éléments HTML en fonction de leur nom d'élément, de leur identifiant, de leur classe, de leur attribut, etc.
  • Property − est un type de style du CSS. Il peut s'agir de la couleur, de la bordure, de l'arrière-plan, de la police, de l'affichage, de l'alignement du texte, des marges, de l'espacement des lignes, etc.
  • La valeur - est affectée aux propriétés. Par exemple, la propriété background-color peut avoir une valeur rouge ou verte.

Syntaxe des règles CSS

La syntaxe d'une règle CSS se compose d'un sélecteur et d'une déclaration de propriété et de valeur :

 sélecteur { propriété : valeur ; }

Le sélecteur pointe sur l'élément HTML à styliser.

Le bloc de déclaration (entre accolades) contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.

Nous pouvons écrire une règle CSS puis réutiliser la même règle dans plusieurs éléments et documents HTML. En utilisant CSS, nous n'avons pas besoin d'écrire des attributs de balise HTML en ligne à chaque fois, ce qui ne s'applique qu'à l'élément stylé. Nous écrivons simplement une règle CSS et l'appliquons à toutes les occurrences de cet élément de balise. Ainsi, moins de code signifie des pages plus rapides.

Les modifications et la maintenance de notre document HTML sont simples lorsque nous utilisons des règles de style externes ou intégrées. Nous changeons simplement la règle de style et tous les éléments de nos documents HTML seront automatiquement mis à jour. Avec CSS, nous avons accès à plusieurs tailles d'écran d'appareil via Media Queries. Les requêtes média nous permettent d'optimiser notre document HTML pour plus d'un type d'appareil. En utilisant le même document HTML, nous pouvons présenter différentes versions de nos pages Web.

Lire la suite

Encore une fois, cet article ouvre à peine l'intérêt du lecteur pour en savoir plus sur CSS et la variété des éléments disponibles pour contrôler nos documents HTML. C'est une partie super puissante et très importante du Web. Certaines ressources principales où vous pouvez approfondir sont les suivantes :

École W3C

MDN

Tutoriel CSS