Objectif

• Connaitre le CSS

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 :
– un sélecteur
– une propriété
– une valeur
• 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}

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