Cascade Style Sheets

CSS : Cascading Style
Sheets
Mohamed Amine Samet
Rayhane Emna Bousnina

CSS c’est quoi ?
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ».
Le CSS correspond à un langage informatique permettant de mettre en forme des pages web.
Pour indiquer au navigateur comment afficher le texte et tout autre contenu que vous écrivez en
HTML. Avec CSS, vous pouvez contrôler la couleur, la police, la taille, l'espacement et de
nombreux autres aspects des éléments HTML.

Où écrire le code CSS ?
1. Dans la balise même :
(non recommandé)
1. Dans l'en-tête <head> du fichier
HTML :
1. Dans un fichier externe ( .css ) :

Les commentaires
Il est possible de mettre des commentaires presque n'importe où dans une feuille
de style CSS en les encadrant de /* et */, comme dans le langage C.

Les sélecteurs standards
Sélecteur universel * {color :blue ; }
Une catégorie de balises h1 { color :#FF00FF ; }
Plusieurs catégories de balises h1, h2, h3, p { color : green ; }
Balises imbriquées p em {color :red ; }

Les sélecteurs de type classe
Un sélecteur contextuel, ou classe, associe une règle particulière à un élément en
fonction de sa situation.

Les sélecteurs de type ID
La déclaration d'un ID en CSS est identique à la notion de classe à une exception près : On ne
peut déclarer qu'une seule fois un ID.
Remarque : On utilise un # pour les id et un "." pour les classes

Les apparences dynamiques : Les pseudo-classes
Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-
dire que des éléments peuvent changer de forme une fois que la page a été chargée.
● au survol: a:hover{ }
● lors du clic : a:active {} /* Quand le visiteur clique sur le lien */
● lorsqu'un lien a été consulté : a:visited{} /* Quand le visiteur a déjà consulté la page */

Mise en forme d’un texte en CSS
● font-family : définit <nom> ou <famille> police précise (Arial, Times, Helve...)
H3 {font-family: Arial}
● font-style : définit le style de l'écriture normal ou italique ou oblique
H3 {font-style: italic}
● font-weight : définit l'épaisseur de la police normal ou bold ou bolder ou lighter
ou valeur numérique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: bold}

● font-size : définit la taille de la police en inches (in), centimètres (cm), pixels (px) ou
pourcentage (%)
P {font-size: 12px}
● font-variant : définit une variante par rapport à la normale normal ou small-caps
P {font-variant: small-caps}
● text-align : définit l'alignement du texte left ou center ou right
H1 {text-align: center}
● text-transform : définit la casse du texte (majuscule, minuscule)
uppercase (met les caractères en majuscules) ou lowercase (met les caractères en
minuscules) ou capitalize (met le premier caractère en majuscule)
P {text-transform: uppercase}

● word-spacing : définit l'espace entre les mots en inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {word-spacing: 5px}
● letter-spacing : définit l'espace entre les lettres spécifié
P {letter-spacing: 2px}
● line-height : définit l'interligne soit l'espace entre les lignes du texte
P {line-height: 10px}
● Width : détermine la largeur d'un élément de texte ou d'une image
H1 {width: 200px}
● height : détermine la hauteur d'un élément de texte ou d'une image
H1 {heigh: 100px}

Unités de mesures
● Unités de longueurs relatives : Elles permettent un ajustement automatique des
dimensions en fonction du support employé.
➔ em (relative à la taille définissant l'élément parent. 1.2em = 120% de la taille de caractère
définie dans l'élément parent)
➔ ex (relative à la valeur de la hauteur définie dans l’élément parent (x-height))
➔ px (valeur relative à la résolution du support visuel, par exemple l'écran)
● Unités de longueurs absolues : Intéressantes uniquement lorsque le support de sortie du
document est connu à l'avance.
➔ in (pouces)
➔ cm (centimètres)
➔ mm (millimètres)
➔ pt (points; 1pt = 1/72in)
➔ pc (picas; 1pc = 12pt)
● Pourcentage : Les pourcentages sont composés d'un nombre suivi du symbole %.

Les couleurs
● Color : la propriété color permet de fixer la couleur du texte.
➔ Un code hexadécimal long #00FF45
➔ Un code hexadécimal court #0F3
➔ Un code rgb, de 0 à 255 rgb(0,0,100)
➔ un code rgb, en pourcentage rgb(10%,10%,30%)
➔ aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow
● background-color :
La propriété background-color permet de fixer la couleur de fond de la page.

Les bordures
● Propriété border : Une écriture simplifiée des différentes propriétés de bordure
h1{border: 5px double blue;}
● Une écriture simplifiée pour chaque arête de bordure : (border-top, border-bottom,
border-right, border-left)
p{border-bottom: #00FFFF;}
● Couleur de bordure : propriété border-color (border-top-color, border-bottom-color,
border-right-color, border-left-color)
p{border-top-color: green;}; img{border-color:#00FF00;}
Toutes les propriétés CSS : http://www.css-faciles.com/proprietes-css-liste-
alphabetique.php

Notion d’héritage
Si vous définissez une police de type "arial" sur la balise <body>, l'ensemble des
autres éléments du site prendra comme police "arial", inutile de le redéfinir à
chaque éléments. Sauf, si une autre police de caractère est déclarée
explicitement.

Workshop
1. Colorer le titre
2. Modifier la famille de la police de la paragraphe
3. Mettre l’image au centre
4. Ajouter un couleur de fond pour les listes
5. Ajouter une bordure au tableau
6. Ajouter une propriété au bouton lors du survol de la souris

Cascade Style Sheets

Recomendados

Recomendados

Más contenido relacionado

Similar a Cascade Style Sheets

Similar a Cascade Style Sheets (20)

Cascade Style Sheets