CSS

introduction

CSS est l'acronyme de Cascading Style Sheets. Il permet de définir la présentation des éléments HTML sous la forme d'un fichier séparé appelé fichier CSS ayant .css extension.

CSS aide à modifier la mise en forme de n'importe quel élément HTML en apportant simplement des modifications à un seul endroit. Toutes les modifications apportées seraient automatiquement répercutées sur toutes les pages Web du site Web dans lesquelles cet élément apparaît.

Règles CSS

Les règles CSS sont les styles que nous devons créer pour créer des feuilles de style. Ces règles définissent l'apparence de l'élément HTML associé. La forme générale de la syntaxe CSS est la suivante:

Selector {property: value;}

Key Points

  • Le sélecteur est un élément HTML auquel la règle CSS est appliquée.

  • Propriété spécifie l'attribut que vous souhaitez modifier en fonction du sélecteur.

  • La propriété peut prendre une valeur spécifiée.

  • La propriété et la valeur sont séparées par deux points (:).

  • Chaque déclaration est séparée par des points-virgules (;).

Voici des exemples de règles CSS:

P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

Incorporer CSS dans HTML

Voici les quatre méthodes pour ajouter du CSS aux documents HTML.

  1. Feuilles de style en ligne

  2. Feuilles de style intégrées

  3. Feuilles de style externes

  4. Feuilles de style importées

Feuilles de style en ligne

Inline Style Sheetssont inclus avec l'élément HTML, c'est-à-dire qu'ils sont placés en ligne avec l'élément. Pour ajouter du CSS en ligne, nous devons déclarer un attribut de style qui peut contenir n'importe quelle propriété CSS.

Syntax:

<Tagname STYLE = “ Declaration1 ; Declaration2 “>  …. </Tagname>

Prenons l'exemple suivant utilisant des feuilles de style en ligne:

<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>

Output −

Feuilles de style intégrées

Embedded StyleLes feuilles sont utilisées pour appliquer la même apparence à toutes les occurrences d'un élément spécifique. Ceux-ci sont définis dans l'élément <head> en utilisant le<style> élément.

le <style> l'élément doit inclure typeattribut. La valeur de type L'attribut spécifie le type de syntaxe qu'il inclut lors du rendu par le navigateur.

Syntax

<head> <title> …. </title>
   <style type =”text/css”>
      …….CSS Rules/Styles….
   </style>		
</head>

Prenons l'exemple suivant en utilisant des feuilles de style incorporées:

<style type="text/css">
   p {color:green; text-align: left; font-size: 10pt}
   h1 { color: red; font-weight: bold}
</style>

Feuilles de style externes

External Style Sheets sont les séparés .cssfichiers contenant les règles CSS. Ces fichiers peuvent être liés à n'importe quel document HTML à l'aide de la balise <link> avec l'attribut rel.

Syntax:

<head> <link rel= “stylesheet”  type=”text/css” href= “url of css file”>
</head>

Afin de créer un css externe et de le lier à un document HTML, procédez comme suit:

  • Tout d'abord, créez un fichier CSS et définissez toutes les règles CSS pour plusieurs éléments HTML. Appelons ce fichier external.css.

p{ 
   Color: orange;     text-align:  left;        font-size: 10pt;
}
h1{ 
   Color: orange;      font-weight: bold;
}

  • Maintenant, créez un document HTML et nommez-le comme externaldemo.html.

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <link rel="stylesheet"  type="text/css" href="external.css">
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>

Feuilles de style importées

Imported Style Sheetsnous permettent d'importer des règles de style à partir d'autres feuilles de style. Pour importer des règles CSS, nous devons utiliser @import avant toutes les règles dans une feuille de style.

Syntax:

<head><title> Title Information </title>
   <style type=”text/css”>
      @import URL (cssfilepath)
      … CSS rules…
   </style>
</head>

Prenons l'exemple suivant utilisant des feuilles de style en ligne:

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <style>
         @import url(external.css);
      </style>
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>