Introduction à CSS

Participez au vote ☆☆☆☆☆★★★★★

CSS : Mini tutoriel

Tutoriel à consulter : (en particulier : Premiers pas)

Le site w3schools :

Openclassrooms : Mémento des propriétés CSS :

1.Introduction : qu’est-ce que CSS ?

Cette section présente le langage CSS. 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 est l’abréviation de Cascading Style Sheets. Un style définit la façon dont un élément HTML (par exemple <h1>) sera affiché.

Ces styles peuvent être définis dans une feuille de style externe (un fichier .css). Une feuille de style peut être utilisée pour définir la présentation de plusieurs documents HTML, ce qui permet de gagner beaucoup de temps.

HTML a été conçu pour définir la structure d’un document pas sa présentation. Par conséquent tout ce qui est lié à la présentation d’un document devrait être défini à l’aide de CSS. Typiquement, il faut préférer CSS à l’utilisation de balises HTML permettant de définir la présentation d’un document (comme par exemple <font color=’ ’>)

2. 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}

En écrivant une propriété par ligne, la lisibilité est meilleure :

p {

font-family:"sans serif"; font-size: 90%; color: blue;

}

3. Grouper les sélecteurs

Si certaines propriétés s’appliquent à plusieurs sélecteurs, il est possible de les grouper. Ainsi, plutôt que d’écrire

h1 {

font-family:"sans serif";

color: blue;

} h2 {

font-family:"sans serif"; color: blue;

}

Il est possible, et plus rapide, de grouper les sélecteurs h1 et h2 et d’écrire :

h1,h2 {

font-family:"sans serif"; color: blue;

}

4. Le sélecteur de classe

Avec le sélecteur de classe il est possible d’appliquer des styles différents pour des éléments HTML d’un même type. Par exemple, si nous souhaitons que certains paragraphes (<p>) soient affichés en rouge (disons, pour mettre en évidence des paragraphes importants), et que d’autres paragraphes aient un alignement centré, nous pouvons définir deux classes pour chacun de types de paragraphe :

p.introduction {text-align:center}

p.important {color:red}

Dans le document HTML, l’attribut class permet de choisir la classe qui sera utilisée :

<p class="introduction">Un paragraphe d’introduction</p>

<p class="important">Un paragraphe important</p>

Pour définir une classe qui s’applique à tous les éléments HTML, et pas uniquement à un seul élément HTML (comme <p> dans l’exemple ci-dessus), on utilise la syntaxe suivante : l’élément HTML n’est pas écrit ; on commence directement par un point, suivi du nom de la classe.

Exemple :

.important {color:red}

Ainsi, la classe important pourra être utilisée pour tous les éléments HTML :

<h1 class="important">Un titre important</h1>

<p class="important">Un paragraphe important</p>

Le sélecteur id a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères.

Exemple : construisons une section de page à deux colonnes. L'une des deux colonnes servira pour un menu de 100 pixels de large flottant à gauche, l'autre pour un contenu placé à 110 pixels du bord gauche (pour ne pas empiéter sur le menu bien sûr). Cette fois, ce n'est pas d'un point qu'il faudra faire précéder le nom du sélecteur id, mais d'un #.

#menu { background-color:silver; width:100px;

float:left;

}

#contenu { margin-left:110px;

}

Dans le code html, il faudra donc cette fois indiquer un _id (_id="menu" et _id="contenu") à la place de la syntaxe _class.

<h1 id="haut">Exemple des sélecteurs "class" et "id"</h1>

<ul>

</ul>

</div>

<p>

Lorem ipsum dolor sit amet,

…

</p>

</p>

</div>

Il n'aura pas échappé à votre sagacité qu'un _id non déclaré dans les styles est venu se glisser dans la balise de titre _h1 (_id="haut").

C'est le deuxième effet _id ! En effet, cet attribut peut servir d'ancre. Ainsi, le lien interne de haut de page y est rattaché directement. Cela explique aussi pourquoi on ne peut utiliser qu'un seul nom de _id par page.

S'il y avait deux _id="haut" dans la page, où irait le lien ?! hein ? je vous le demande !

(Extrait du site )

5.Sélecteur de pseudo classe)

6. Lier CSS à un document HTML

Pour intégrer du CSS dans un document HTML, il existe trois possibilités :

– une feuille de style externe

– une feuille de style interne

– un style défini directement dans la balise (inline style)

Les feuilles de style externes

Les feuilles de style externes sont idéales lorsque les mêmes styles sont appliqués sur plusieurs documents HTML. La balise <link>, à écrire dans la partie <head> du document HTML permet de lier une feuille de style à un document HTML :

<head>

Généralement, les fichiers contenant les styles ont l’extension .css

Les feuilles de style internes

Si le style est appliqué à un seul document HTML, il est possible de définir le style, directement dans la partie <head> du document HTML, à l’aide de la balise <style> :

<head>

.avertissement {color:red}

</style>

</head>

Inline Styles

Il est possible ne n’appliquer un style qu’à une seule balise. Cette façon de faire est un peu contraire à l’idée du CSS. En effet, en procédant ainsi, il n’y a plus de séparation entre la structure d’un document et sa présentation. Cette façon de faire est donc à utiliser avec précaution.

7. Héritage des propriétés

Pour un même sélecteur, il est possible de définir plusieurs propriétés, soit de façon inline, soit dans plusieurs feuilles de style, externes ou internes. Cet élément héritera de l’ensemble des propriétés définies dans les différents styles (d’où l’appellation Cascading Style Sheet).

Par exemple, si on trouve, dans un fichier .css externe la propriété suivante

p {font-size:20px;}

et, à l’intérieur d’un style interne (défini à l’aide d’une balise <style>) la propriété suivante

p {color:red;}

alors, l’ensemble des paragraphes du document auront les deux propriétés : les caractères auront une taille de 20 pixels et seront de couleur rouge

8. Texte et police de caractères

Alignement

La propriété text-align permet l’alignement horizontal des textes ; elle peut prendre les valeurs suivantes :

– center : le texte est centré

– left : le texte est aligné à gauche ; il s’agit de la valeur par défaut

– right : le texte est aligné à droite

– justify : le texte est justifié : on modifie donc l’espace entre les caractères pour que le texte soit aligné à la fois à gauche et à droite

Par exemple, pour justifier les paragraphes, on écrira l’instruction CSS suivante :

p {text-align : justify}

Police de caractères

La propriété font-family permet de spécifier la police de caractères : h2 {font-family : Arial,Verdana,Sans-serif}

Plusieurs polices (séparée par des virgules) peuvent être spécifiées. Ainsi, si le navigateur ne parvient pas à afficher la première police (Arial dans l’exemple ci-dessus), alors il tentera d’afficher la seconde police de la liste (Verdana dans notre exemple). S’il ne parvient pas non plus à afficher la police Verdana, alors il affichera une autre police, de la même famille de police (ici : sans-serif). Il existe trois familles de police :

– Serif : police avec de petites extensions (empattement) qui forment la terminaison des caractères

– Sans-serif : police sans empattement

– Monospace : police où tous les caractères ont la même largeur

Les exemples ci-dessous montrent la différence entre une police avec et une police sans serif. La police Helvetica est une police sans serif tandis que la police Times est une police serif :

AaBbCc

Figure 1 – Un exemple d’écriture sans serif

AaBbCc

Figure 2 – Un exemple d’écriture serif

Rq : Le rendu de chaque police peut-être très différent d’un ordinateur à l’autre, et d’un navigateur à l’autre. Pour en savoir plus

Tailles de police

La propriété font-size permet de spécifier la taille d’un texte :

h1 {font-size:40px}

Ainsi, les titres auront une taille de 40 pixels. Au lieu de spécifier la taille d’un texte à l’aide de px, correspondant à un nombre de pixels, on peut également utiliser l’unité em. 1em vaut la taille de police par défaut dans un navigateur (typiquement 1em=16pixels). Par exemple, si nous décidons que les titres principaux valent une fois et demi la taille standard des caractères nous donnerons la valeur 1.5em à la propriété font-size :

h1 {font-size:1.5em}

Il est également possible de spécifier la taille relative des caractères en pourcentage comme h1 {font-size :150%}

Couleur

La propriété color permet de spécifier les couleurs. On peut définir une couleur de plusieurs manières :

– par son nom (par exemple h1{color :red})

– par sa valeur RGB décimale : R indique la quantité de rouge, G indique la quantité de vert (green) et B indique la quantité de bleu. Les valeurs sont comprises entre 0 et 255. Par exemple h1{color :rgb (255,0,0)} correspond à la couleur rouge

– par sa valeur RGB hexadécimale, où les quantités de rouge, vert et bleu prennent des valeurs entre 00 et FF : h1{color :#FF0000}

Rappel : la base du système hexadécimal est 16. Voici les premières valeurs hexadécimales :

0,1,2,3,4,5,6,7,8,9,10,A,B,C,D,E,F,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F,20,21, etc

Rq : Plus de détails dans les compléments

Interlignes

La propriété line-height permet de déterminer la taille de l’espace vertical situé entre deux lignes de texte. Comme les autres propriétés qui s’appliquent aux polices, on peut l’exprimer en pixels, en em ou en pourcentage, ces deux derniers étant relatifs à la taille de la police.

Autres attributs : graisse de caractère, italique, souligné …

• font-style: normal ou italic : normale | italique

• font-weight: normal ou bold : normal ou gras

• text-decoration: none ou underline ou overline ou line-through ou blink : rien | souligné | surligné | rayé | clignotant

9. Fond : background

Lire la page : ésumé des attributs :

• background-color : red ou rgb (255,0,0) ou #FF0000

• background-position : top ou bottom ou left ou right ou center

• background-attachment : scroll ou fixed (défile avec le texte ou pas)

10. Compléments sur CSS

Généralités

On définit les styles dans un ou plusieurs fichiers séparés, stockés dans un répertoire nomme css. Ces fichiers se terminent avec l’extension .css :

Ce fichier doit être inclus dans le fichier html de la manière suivante entre les balises <head></head> :

Vous remarquerez l’attribut media. Il permet de définir différentes feuilles de style suivant le type de d’appareil utilisé :

- screen : pour un écran

- print : pour une imprimante

- hanheld : pour un téléphone portable

- etc

Les couleurs

Pour décrire directement une couleur, utilisez son nom. L’ennui est que seules dix-sept d’entre elles peuvent être nommées. D'autres couleurs officieuses (DarkBlue ou WhiteSmoke) existent mais, elles ne fonctionneront pas forcément de la même manière sur tous les navigateurs, il est déconseillé de les utiliser.

Une couleur se définit aussi par sa composition de rouge, de vert et de bleu. Par exemple, pour orange : 80% de rouge,40% de vert et 0% de bleu.

body { background-color: rgb(80%, 40%, 0%);

}

Il est possible d’indiquer les valeurs de rouge, vert et bleu en valeur absolue avec des chiffres entre 0 et

255. Dans ce cas, 80% de rouge, 40% de vert et 0% de bleu deviennent 204 (rouge), 102 (vert) et 0 (bleu).

body { background-color: rgb (204, 102, 0);

}

On peut également décrire une couleur en utilisant sont code hexadécimal. C’est la manière la plus courante de le faire.

Vous trouverez sur un outil vous permettant de choisir votre couleur et d’obtenir son code hexadécimal.

Vous trouverez sur le code hexadécimal de certaines couleurs telles que DarkBlue, WhiteSmoke, etc.

Différence entre class et id

Servez-vous de l’attribut class pour styler un groupe d’éléments, c’est à dire pour appliquer un même style à plusieurs éléments d’une page.

L’attribut id permet de donner un nom unique à un élément. Il sert aussi à donner un style spécifique à un élément. Il ne doit y avoir qu’un seul élément par page portant le même id.

En CSS, la sélection d’un élément

Balise div, marges et espacement

Un div est comme un conteneur dans lequel on met des éléments pour les garder ensemble. Cela permet, par exemple, d’appliquer un même style à un groupe d’éléments ou encore de placer ces différents éléments ensemble sur une page.

Pour ajouter de l’espacement, on utilise la propriété padding.

Pour ajouter une marge, on utilise la propriété margin.

Image de

Pour avoir une idée de la largeur de toute la boîte, il faut additionner la largeur de l’aire de contenu à celles des marges de gauche et de droite plus celle de la bordure qu’il faudra compter deux fois puisqu’il y en a une à gauche et une autre à droite.

Voici un exemple :

p {

width:300px; padding:10px; border:1px; margin:20px;

}

Rq : On peut préciser la valeur pour chacun des 4 cotés indépendamment :

Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.

Le flux : placement des éléments sur une page

Le navigateur utilise le flux pour effectuer la mise en pages des éléments HTML. Celui-ci commence par le début du fichier HTML et suit le flux des éléments de haut en bas en affichant au fur et à mesure chacun des éléments qu’il rencontre.

Pour les éléments « bloc », il place un saut de ligne entre chaque. Le premier élément d’un fichier est le premier à s’afficher, un saut de ligne lui succède, puis le second élément s’affiche, suivi d’un saut de ligne, et ainsi de suite de bas en haut du fichier. C’est le flux.

Les éléments « en ligne » se placent les uns à côté des autres depuis le coin en haut à gauche jusqu’à celui en bas à droite.

Quand le navigateur doit placer côte à côte des éléments de type en-ligne ayant chacun une marge, il fait son travail normalement. Il met suffisamment d’espace entre les deux pour que les deux marges soient prises en compte. Si la marge de l’élément de gauche mesure 10 pixels et celle de l’élément de droite 20 pixels, l’espace entre les deux éléments mesurera bien 30 pixels.

Dans le cas d’éléments de type bloc, c’est différent. Quand le navigateur place l’un au-dessus de l’autre, deux éléments de type bloc, il fusionne leurs marges communes. La hauteur de la marge après fusion est celle de la marge la plus importante.

Pour faire flotter un élément :

1- Donnez un identifiant unique à l’élément que vous voulez faire flotter, par exemple incroyable (ou créez une classe, si vous souhaitez faire flotter plusieurs éléments) 2- Donnez une largeur à cet élément, par exemple 200px 3- Ajoutez la propriété float.

# incroyable { width: 200px; float: right;

}

Cela donne le résultat suivant :

11. Validation du code CSS

Comme pour HTML, il existe un outil de validation du CSS :