Fiche
méthode Le langage CSS
COMMENT L’INCLURE DANS UN DOCUMENT HTML ?
Le langage CSS fonctionne un peu comme HTML à partir de balises appelées ‘’sélecteurs’’. Celles-ci
possèdent toutes la même structure : selecteur {propriété : valeur;}
Inclusion directement dans une balise de code du document HTML,
style=" propriété : valeur ;" via un attribut : style
Exemple : <body style="background-color: #FF0000;">
<head> Inclusion dans la partie <head>...</head> du document HTML via
... une balise <style>
<style type="text/css"> Exemple :
<head>
selecteur {propriété: valeur;}
<style type="text/css">
... body {background-color: #FF0000;}
</style> </style>
</head> </head>
→ La méthode suivante est à privilégier car elle respecte l’esprit de la séparation du contenu et de
sa mise en forme :
le code CSS est placé dans un fichier à part, avec l’extension CSS.
Dans cet exemple, c’est le fichier ‘’style.css’’ placé dans le même répertoire que le fichier HTML. Il faut
indiquer son emplacement dans la partie <head>...</head> du document
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Le fichier CSS contient quand à lui la liste des sélecteurs et leurs caractéristiques :
Selecteur1 {
propriété1 : valeur ;
propriété2 : valeur ;
…
}
/* Commentaire */
Selecteur2 {
propriété3 : valeur ;
propriété4 : valeur ;
}
LES SÉLECTEURS SIMPLES
Sélecteur Description et exemple
Permet de définir le style de tous les éléments ayant la même balise comme h1
BaliseHtml {
prop: val ;}
pour tous les éléments compris entre <h1> … </h1>
Ex CSS : h1 {font-family: Verdana; font-size: 18px; ;}
.uneClasse { Permet de définir le style de tous les éléments HTML qui sont de cette classe.
prop: val ;} Ex HTML : <h1 class="uneClasse" > … </h1>
#unIdentifiant { Permet de définir le style de l’unique élément HTML ayant cet identifiant.
prop: val ;} Ex HTML : <p id="unIdentifiant" > … </p>
1/3
LES SÉLECTEURS MULTIPLES
Sélecteur Description et exemple
Permet de définir le style de tous les éléments HTML ayant l’un des sélecteurs
sel1, sel2, … {
prop: val ;}
simples mentionnés (balise, classe, identifiant…)
Ex CSS : p, em, .important, #titre {prop : val ;}
QUELQUES PROPRIÉTÉS PRINCIPALES
La liste des propriétés ci-dessous n’est pas complète car il en existe beaucoup d’autres (voir liens)
Chaque propriété ne peut prendre que certaines valeurs listées ci-dessous.
Propriétés Valeurs possibles Description
Ex : font: italic bold 30px arial;
L'ordre des valeurs de la propriété font est le Super propriété de police.
font suivant : Combine : font-weight, font-style,
font-style | font-variant | font-weight | font-size | font- font-size, font-variant, font-family.
family
police1, police2, police3, serif, sans‐serif, serif,
font-family Nom de police
monospace
font-size 1.3em, 16px, 120%... Taille du texte
font-weight bold, normal Gras
font-style italic, oblique, normal Italique
font-variant small‐serif, caps, normal Petites capitales
texte-align left, center, right, justify Alignement horizontal
Soulignement, ligne au‐serif, dessus,
text-decoration underline, overline, line‐serif, through,blink, none
barré ouclignotant
text-transform capitalize, lowercase, uppercase Capitales
text-indent 25 px Alinéa
5px 5px 2px blue(horizontale, verticale,
text-shadow Ombre de texte
fondu,couleur)
line-height 18px, 120%, normal... Hauteur de ligne
Alignement vertical (cellules de
vertical-align baseline, middle, sub, super, top,bottom tableau ouéléments inlineblock
uniquement)
COULEURS ET FOND
Chaque propriété ne peut prendre que certaines valeurs listées ci-dessous.
Propriétés Valeurs possibles Description
nom,rgb(rouge,vert,bleu),rgba(rouge,vert,bleu,
color transparence), #CF1A20...
Couleur du texte
background-color Identique à color Couleur de fond
background-image url('image.png') Image de fond
background-attachment fixed, scroll Fond fixe
background-repeat repeat‐serif, x, repeat‐serif, y,no‐serif, repeat, repeat Répétition du fond
background-position x y), top, center,bottom, left, right Position du fond
Super propriété du fond.
Combine :background-image,
background -
background-repeat, background-
attachment, background-position
opacity 0,5 Transparence
2/3
TAILLE, BORDURE ET ESPACEMENT
Chaque propriété ne peut prendre que certaines valeurs listées ci-dessous.
Propriétés Valeurs possibles Description
width, height Largeur, Hauteur
Valeurs en pixels ou pourcentages :
min-width, max-width, 150 px, 80 %... Largeur min, max
min-height, max-height Hauteur min, max
padding-top, padding-bottom Marge en haut, en bas
Valeurs en pixels : 23 px
padding-left, padding-right Marge à gauche, à droite
Super‐propriété de marge.propriété de marge.
Valeurs en pixels :
Combine :
padding 23px 5px 23px 5px
ordre : haut, droite, bas, gauche padding-top,padding-right,
padding-bottom, padding-left.
padding-top, padding-bottom Marge intérieure en haut, en bas
Valeurs en pixels : 23 px
padding-left, padding-right Marge intérieure à gauche, à droite
Super‐propriété de marge.propriété de marge.
Valeurs en pixels :
Combine :
padding 23px 5px 23px 5px
ordre : haut, droite, bas, gauche padding-top,padding-right,
padding-bottom, padding-left.
border-width Valeurs en pixels : 23 px
nom, rgb (rouge, vert, bleu), rgba
border-color (rouge, vert, bleu, transparence), Couleur de bordure
#CF1A20...
solid, dotted, dashed, double, groove,
border-style ridge, inset, outset
Type de bordure
Super‐propriété de marge.propriété de bordure.
Combine : border-width, border-
3px solid black color, border-style.
border ordre : largeur, couleur, style Existe aussi en version :
border-top, border-bottom,
border-right, border-left.
border-radius Valeurs en pixels : 3 px Bordure arrondie
6px 6px 0px black
box-shadow ordre :(horizontale, verticale, Ombre de boîte
fondu,couleur
3/3
