Css3 Bases

CSS3 METTRE EN PLACE LE CSS3
Bouba Nezene B.
A quoi sert CSS ?
- Permet de choisir la couleur de votre texte.
- Permet de sélectionner la police utilisée sur votre site.
- Permet de définir la taille du texte, les bordures, le fond…
Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je
veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit
calé en haut et qu'il soit toujours visible, etc.
Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :
- dans un fichier .css (méthode la plus recommandée) ;

- dans l'en-tête <head> du fichier HTML ;
- directement dans les balises du fichier HTML via un attribut style (méthode la
moins recommandée).
Je vais vous présenter ces trois méthodes mais sachez d'ores et déjà que la première… est
la meilleure.
Dans un fichier .css (recommandé)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore
un peu !</p>
</body>
</html>
Vous noterez le contenu de la ligne 5,

C’est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et
chargé de la mise en forme.
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime
Text) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce
qu'il veut dire) :
p
{
color: blue;
}
Dans l'en-tête <head> du fichier HTML
Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à
insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête<head>.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: blue;
}
</style>
</head>
<body>

un peu !</p>
</body>
</html>
Directement dans les balises (non recommandé)
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à
n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

un peu !</p>
</body>
</html>
Appliquer un style
Sélectionner une balise
Soit l’exemple précédent
p
{
color: blue;
}
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
 Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence.
Par exemple, si je veux modifier l'apparence de tous les paragraphes<p>, je dois
écrirep.
 Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés.
Il y a par exemple la propriétécolorqui permet d'indiquer la couleur du texte,font-
sizequi permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et,
comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur.
 Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple,
pour la propriétécolor, il faut indiquer le nom de la couleur. Pourfont-size, il faut
indiquer quelle taille on veut, etc.
Schématiquement, une feuille de style CSS ressemble donc à cela :
balise1
{
propriete1: valeur1;
}
balise2
{
}
balise3
{
}
A plusieurs balises
Au lieu de:
h1
{
color: blue;
}
em
{
color: blue;
}
Adopter plutôt
h1, em
{
color: blue;
}
class et id
Utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
 l'attributclass;
 l'attributid.
C’est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que
paragraphe, image, etc.
<h1 class=""> </h1>

<p class=""> </p>
<img class="" />
Par exemple, je vais associer la classe introduction à mon premier paragraphe (ligne 12) :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="introduction">Bonjour et bienvenue sur mon site !</p>

un peu !</p>
</body>
</html>
Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous
allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises
qui ont comme nom 'introduction' soient affichées en bleu ».
Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme
ci-dessous :
.introduction
{
color: blue;
}
Pour l'attribut id
Ex
<img src="images/logo.png" alt="Logo du site" id="logo">
Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra
faire précéder le nom de l'id par un dièse (#) :
#logo
{
/* Indiquez les propriétés CSS ici */
}
Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui,
à l'origine, ne sont pas entourés par des balises.
En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre
que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le
paragraphe suivant :
Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement
il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.
En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière
(elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime
(mais significative !) entre ces deux balises :
- <span> </span>: c'est une balise de type inline, c'est-à-dire une balise que l'on place
au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les
balises<strong>et<em>sont de la même famille. Cette balise s'utilise donc au milieu
d'un paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue
».
- <div> </div>: c'est une balise de type block, qui entoure un bloc de texte. Les
balises<p>,<h1>, etc. sont de la même famille. Ces balises ont quelque chose en
commun : elles créent un nouveau « bloc » dans la page et provoquent donc
obligatoirement un retour à la ligne.<div>est une balise fréquemment utilisée dans
la construction d'un design, comme nous le verrons plus tard.
Pour le moment donc, nous allons utiliser plutôt la balise<span>. On la met autour de «
bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !
Guide de référence des propriétés
CSS3 et de leurs valeurs
La liste de CSS que nous vous proposons ci-dessous n’est pas exhaustive mais elle est déjà très
complète. Elle peut vous donner des idées de choses que vous pensiez impossibles ou complexes
mais qui, en fait, sont faciles à mettre en œuvre avec les CSS.
Nous les avons regroupés par catégories. La colonne CSS dans nos tableaux indique la version de
CSS de la propriété : CSS1, CSS2 ou CSS3.
 Couleurs  Arrière-plans  Bordures

 Modèles de boîtes  Modèles de boîtes  Textes
simples flexibles
 Polices  Modes d’écriture  Tables
 Listes et Compteurs  Animations  Transformations
 Transitions  Interface utilisateur  Multi-colonnes
 Media paginé  Contenu généré  Effets de filtres
 Images, éléments  Masques 
remplacés
Couleurs
Pour visualiser comment personnaliser vos titres et textes, lisez notre article : CSS3 : personnaliser vos
titres et textes.
PROPRIETÉ DESCRIPTION CSS
color spécifie la couleur du texte 1
opacity permet de jouer sur le niveau de transparence et d’opacité 3
Arrière-plans
background super propriété qui en regroupe 8 autres en une seule 1
background- définit si la position d’une image d’arrière-plan par

1
attachment rapport à la page
background-blend-
définit la fusion entre chaque calque d’arrière-plan 3
mode
permet de définir les limites de l’arrière-plan à

background-clip 3
l’intérieur de la boîte
background-color spécifie la couleur de l’arrière-plan 1
permet de définir une ou plusieurs images comme

background-image 1
arrière-plan
détermine la manière dont les images d’arrière-plan

background-origin 3
sont positionnées
background-position spécifie la position d’une image d’arrière-plan 1
background-position-
définit la position horizontale initiale de l’arrière-plan 3
x
background-position-
définit la position verticale initiale de l’arrière-plan 3
y
montre la façon dont une image d’arrière-plan sera

background-repeat 1
répétée
background-size définit la taille d’une image d’arrière-plan 3
Bordures
Pour visualiser l’utilisation des boîtes flexibes en CSS3, lisez notre article : Faire des ombres portées
avec Box-shadow.
super propriété qui regroupe les propriétés border en

border 1
une seule
super propriété qui regroupe les propriétés border-

border-bottom 1
bottom en une seule
border-bottom-
définit la couleur de la bordure inférieure 1
color
border-bottom-left-
définit la forme du coin en bas à gauche 3
radius
border-bottom-
définit la forme du coin en bas à droite 3
right-radius
border-bottom-style définit le style de la bordure inférieure 1
border-bottom-
définit la largeur de la bordure inférieure 1
width
border-color définit la couleur des 4 bordures 1
super propriété qui regroupe les propriétés border-

border-image 3
image en une seule
border-image- décrit l’espace dont l’image dépasse de la boîte de

3
outset bordure
border-image-
décrit la répétition de l’image de bordure 3
repeat
border-image-slice permet de découper l’image fournie en 9 régions 3
border-image-
spécicifie le chemin d’accès à l’image de bordure 3
source
border-image-width définit la largeur de l’image de bordure 3

super propriété qui regroupe les propriétés border-left

border-left 1
en une seule
border-left-color définit la couleur de la bordure gauche 1
border-left-style définit le style de la bordure gauche 1
border-left-width définit la largeur de la bordure gauche 1
super propriété qui regroupe les 4 propriétés border-

border-radius 3
radius en une seule
super propriété qui regroupe les propriétés border-right

border-right 1
en une seule
border-right-color définit la couleur de la bordure droite 1
border-right-style définit le style de la bordure droite 1
border-right-width définit la largeur de la bordure droite 1
border-style définit le style des 4 bordures 1
super propriété qui regroupe les propriétés border-top

border-top 1
en une seule
border-top-color définit la couleur de la bordure supérieure 1
border-top-left-
définit la forme du coin en haut à gauche 3
radius
border-top-right-
définit la forme du coin en haut à droite 3
radius
border-top-style définit le style de la bordure supérieure 1
border-top-width définit la largeur de la bordure supérieure 1
border-width définit la largeur des 4 bordures 1

box-decoration- définit le comportement des bordures et arrière-plans

3
break lorsque la boîte est fragmentée
box-shadow permet de faire des ombres sur les bordures 3
Modèles de boîtes simples
bottom définit la place d’un élément positionné par rapport au bas 2
indique si un élément peut être situé à côté d’éléments

clear 1
flottants ou en dessous
empêche une portion d’un élément d’être affichée en

clip-path 3
définissant une région de rognage
display définit la façon dont un élément HTML doit être affiché 1
float définit si une boîte doit flotter ou non 1
height donne une hauteur à un élément 1
définit la place d’un élément positionné par rapport à la

left 2
gauche
margin définit les 4 marges dans une seule propriété 1
margin-
définit la marge inférieure d’un élément 1
bottom
margin-left définit la marge à gauche d’un élément 1
margin-right définit la marge à droite d’un élément 1
margin-top définit la marge supérieure d’un élément 1

max-height définit la hauteur maximum d’un élément 2
max-width définit la largeur maximum d’un élément 2
min-height définit la hauteur minimum d’un élément 2
min-width définit la largeur minimum d’un élément 2
permet de rogner un contenu et d’afficher des barres de

overflow 2
défilement
définir un mécanisme de rognage si le contenu dépasse

overflow-x 3
horizontalement
définir un mécanisme de rognage si le contenu dépasse

overflow-y 3
verticalement
padding définit les 4 marges intérieures dans une seule propriété 1
padding-
définit la marge intérieure inférieure d’un élément 1
bottom
padding-left définit la marge intérieure à gauche d’un élément 1
padding-right définit la marge intérieure à droite d’un élément 1
padding-top définit la marge intérieure supérieure d’un élément 1
position précise la méthode de positionnement d’un élément 2
right définit la place d’un élément positionné par rapport à la droite 2
top définit la place d’un élément positionné par rapport au haut 2
visibility définit si un élément est visible ou non 2
width spécifie la largeur d’un élément 1
vertical-align permet d’aligner un élément dans la hauteur 1

z-index définit l’ordre d’affichage d’éléments superposés 2
Modèles de boîtes flexibles
Pour visualiser l’utilisation des boîtes flexibes en CSS3, lisez notre article : Utiliser Flexbox pour faire
de la mise en page.
permet de positonner plusieurs lignes dans votre conteneur

align-content 3
flexible
permet de définir l’alignement de vos éléments le long de l’axe

align-items 3
secondaire
align-self sert à faire une exception d’alignement pour un élément 3
flex super propriété qui regroupe flex-grow, flex-shrink et flex-basis 3
flex-basis définit la taille par défaut d’un élément 3
définit l’axe principal, le sens d’affichage horizontal ou vertical

flex-direction 3
des éléments
flex-flow raccourci pour regrouper flex-direction et flex-wrap 3
flex-grow permet de jouer sur la taille d’un élément flex si nécessaire 3
flex-shrink permet de rétrécir un élément flex si nécessaire 3
demande aux éléments d’aller à la ligne lorsque la place

flex-wrap 3
manque
justify-
définit l’alignement le long de l’axe principal 3
content
order permet de changer l’ordre des éléments 3
Textes
Pour visualiser comment personnaliser vos titres et textes, lisez notre article : CSS3 : personnaliser vos
titres et textes.
hanging- spécifie si une marque de ponctuation peut être placée en

3
punctuation dehors du bloc de contenu
indique au navigateur comment gérer les traits d’union lors

hyphens 3
des sauts de ligne
letter-spacing joue sur l’espacement entre les caractères d’un texte 1
line-break définit la façon dont les sauts de ligne sont gérés 3
line-height définit la hauteur des lignes 1
définit si le navigateur peut ou non faire la césure à

overflow-wrap 3
l’intérieur d’un mot
adapte la largeur utilisée pour représenter le caractère de

tab-size 3
tabulation
text-align précise la position d’un texte dans l’axe horizontal 1
décrit la façon dont la dernière ligne d’un bloc, ou une ligne

text-align-last 3
avant un retour à la ligne forcé, doit être alignée
text-combine- définit comment combiner des caractères afin qu’ils ne

3
upright prennent la place que d’un seul caractère
définit l’espace horizontal qui doit être laissé avant le début

text-indent 1
d’un texte
text-justify spécifie la méthode de justication quand un texte est justifié 3
text-transform définit la façon d’utiliser les lettres capitales dans un texte 1
décrit la façon dont les blancs sont gérés au sein d’un

white-space 1
élément
décrit la façon dont la césure s’applique pour les passages

word-break 3
à la ligne
définit la règle d’espacement utilisée entre les balises et les

word-spacing 1
mots
word-wrap permet de casser de long mots incassables sur 2 lignes 3
text-decoration spécifie la décoration apportée à un texte 1
text-decoration-
spécifie la couleur de la décoration apportée à un texte 3
color
text-decoration-
spécifie le type de ligne d’un text-decoration 3
line
text-decoration-
spécifie le style de ligne d’un text-decoration 3
style
text-shadow permet de mettre une ombre à un texte 3
text-underline- joue sur la position d’un soulignement quand le texte est

3
position souligné avec text-decoration
Polices
super propriété qui regroupe les propriétés font en une

font 1
seule
font-family spécifie la police d’un texte 1
font-feature- permet de contrôler les fonctionnalités typographiques des

3
settings polices OpenType
contrôle le crénage de la police ; c’est-à-dire l’espace créé

font-kerning 3
entre les lettres
font-language- permet de contrôler l’utilisation des glyphes spécifiques à

3
override une langue pour une police
font-size précise la taille d’un texte 1
permet de préciser la taille des lettres en majuscules par

font-size-adjust 3
rapport aux minuscules
permet de contrôler l’étirement entre les caractères d’un

font-stretch 3
texte
font-style précise le style d’un texte 1
indique au navigateur s’il peut synthétiser la graisse ou la

font-synthesis 3
mise en italique des polices
super propriété qui regroupe les propriétés font-variant en

font-variant 1
une seule
font-variant- décrit la façon dont les blancs sont gérés au sein d’un
3
alternates élément
font-variant-
contrôle l’utilisation de glyphes alternatifs 3
caps
font-variant- contrôle l’utilisation des glyphes alternatifs pour les scripts

3
east-asian japonais, chinois et d’Asie orientale
font-variant- contrôle quelles ligatures et formes contextuelles sont

3
ligatures utilisées dans les texes
font-variant- permet de contrôler l’utilisation de glyphes alternatifs pour

3
numeric les nombres, fractions et les marqueurs ordinaux
font-variant- permet d’utiliser des glyphes de plus petite taille positionnés

3
position en exposant ou en indice
font-weight spécifie la graisse d’un texte 1
Modes d’écriture
direction précise le sens de l’écriture 2
text-orientation spécifie l’orientation du texte sur une ligne 3
text-combine- définit comment intégrer une combinaison de plusieurs

3
upright caractères dans l’espace alloué à un seul caractère
associée à la propriété direction, permet de gérer du texte

unicode-bidi 3
bidirectionnel
définit l’orientation du texte et la direction selon laquelle le

writing-mode 3
bloc grandit
Tables
border- détermine si les bordures d’un tableau sont séparées ou

2
collapse fusionnées
border-
définit la distance entre les bordures de cellules adjacentes 2
spacing
caption-side permet de choisir l’emplacement de la légende d’un tableau 2
définit la façon l’affichage des bordures et de l’arrière-plan des

empty-cells 2
cellules sans contenu visible
définit la disposition des cellules, lignes et colonnes d’un

table-layout 2
tableau
Listes et Compteurs
counter- permet d’augmenter la valeur d’un compteur CSS d’une

2
increment valeur donnée
permet de réinitialiser un compteur CSS avec une valeur

counter-reset 2
donnée
list-style super propriété qui regroupe les propriétés list en une seule 1
définit l’image utilisée comme puce devant les éléments de

list-style-image 1
listes
permet de définir la position du marqueur de liste par

list-style-position 1
rapport à la boîte
list-style-type permet de définir l’apparence d’un élément de liste 1
Animations
super propriété qui regroupe les propriétés d’animation

animation 3
en une seule
définit la durée d’attente avant de démarrer une

animation-delay 3
animation
indique le sens dans lequel les cycles de l’animation

animation-direction 3
doivent être joués
animation-duration définit la durée d’une animation pour parcourir un cycle 3
animation-fill-mode indique le style d’un élément avant et après l’animation 3
animation-iteration-
indique le nombre de répétition de l’animation 3
count
définit une liste d’animations qui doivent être

animation-name 3
appliquées à l’élément ciblé
détermine si une animation est en cours d’exécution ou

animation-play-state 3
si elle est en pause
animation-timing-
spécifie la courbe d’accélération de l’animation 3
function
Transformations
Pour savoir comment réaliser des transformations en 2D en CSS3, lisez notre article : Appliquer des
transformations à des images en css3.
backface- permet d’indiquer si la face arrière d’un élément doit être

3
visibility visible lorsqu’elle est orientée vers l’utilisateur
perspective spécifie la façon dont un élément 3D doit être vu 3
perspective-
spécifie la position initiale d’un élément 3D 3
origin
permet d’appliquer une transformation à un élément 2D ou

transform 3
3D
transform- permet de modifier l’origine du repère pour les

3
origin transformations d’un élément
détermine si les éléments-fils d’un élément sont positionnés

transform-style 3
en 2D ou 3D
Transitions
super propriété qui regroupe les propriétés de transition

transition 3
en une seule
désigner les noms des propriétés CSS sur lesquelles une

transition-property 3
transition doit être appliquée
définit le nombre de secondes ou de millisecondes que

transition-duration 3
doit durer une transition
transition-timing-
décrit la courbe d’accélération d’une transition 3
function
définit la durée d’attente avant de démarrer une

transition-delay 3
transition
Interface utilisateur
permet de modifier le modèle de boîte par défaut qui est utilisé

box-sizing 3
pour calculer la largeur et la hauteur des éléments
utilisé avec les pseudo-éléments ::before et ::after afin de générer

content 2
le contenu d’un élément
définit la forme du curseur lorsque le pointeur est au-dessus de

cursor 2
l’élément
indique où aller lorsqu’on utilise la flèche basse du pavé de

nav-down 3
navigation
nav-index définit l’ordre de tabulation d’un élément 3
indique où aller lorsqu’on utilise la flèche gauche du pavé de

nav-left 3
navigation
indique où aller lorsqu’on utilise la flèche droite du pavé de

nav-right 3
navigation
indique où aller lorsqu’on utilise la flèche haute du pavé de

nav-up 3
navigation
outline super propriété qui regroupe les propriétés outline en une seule 2
outline- permet de définir la couleur avec laquelle on trace le conteur de

2
color l’élément
outline- définit l’espace entre la bordure dessinée par outline et le bord

3
offset de la boîte de bordure
permet de définir la mise en forme utilisée pour dessiner une

outline-style 2
bordure
outline-
définit la largeur d’une bordure (outline) 2
width
resize permet de contrôler le caractère redimensionnable d’un élément 3
text- détermine la façon dont le textel qui dépasse d’une boîte est
3
overflow signalé pour les utilisateurs
Multi-colonnes
décrit la façon dont la page, la colonne ou la région se

break-after 3
fragmente après la boîte générée

break-before 3
fragmente avant la boîte générée

break-inside 3
fragmente dans la boîte générée
column-count décrit le nombre de colonnes d’un élément 3
permet de contrôler la façon dont le contenu est réparti entre

column-fill 3
les colonnes
column-gap permet de définir l’espace entre les colonnes 3
permet de définir l’affichage d’une ligne droite entre chaque

column-rule 3
colonne
column-rule- permet de définir la couleur de la ligne tracée entre les

3
color colonnes
column-rule- permet de définir le style de la ligne tracé entre plusieurs

3
style colonnes
column-rule-
permet de définir la largeur du trait tracé entre les colonnes 3
width
ermet de définir sur combien de colonnes un élément doit

column-span 3
s’étendre
column-width permet de suggérer une largeur de colonne optimale 3
columns super propriété qui regroupe column-width et column-count 3

lorsqu’un paragraphe s’étend sur 2 pages, il définit le nombre

widows minimum de lignes qui peuvent être laissées en haut de la 3
deuxième page
Media paginé
nombre minimum de lignes qui doivent rester en bas de

orphans 2
pages dans un conteneur de bloc
page-break- permet d’ajuster les sauts de page placés après l’élément

2
after courant
page-break- permet d’ajuster les sauts de page placés avant l’élément

2
before courant
page-break- ajuste la façon dont sont appliqués les sauts de page au sein
2
inside de l’élément courant
Contenu généré
utilisé pour afficher des marques de coupure ou des croix

marks 3
d’alignement
indique la façon dont les agents utilisateurs doivent afficher les

quotes 2
marques indiquant les citations
Effets de filtres
Pour visualiser l’utilisation des filtres à des images en CSS3, lisez notre article : Appliquer des filtres à
des images en CSS3.
permet d’appliquer des filtres et d’obtenir des effets graphiques

filter 3
de flou, de saturation…
Images, éléments remplacés
image-
permet de faire une rotation sur une image 3
orientation
image- fournit une indication au navigateur la façon de

3
rendering redimensionner les images
image-
précise la résolution intrinsèque des images 3
resolution
définit la façon dont le contenu d’un élément remplacé doit

object-fit 3
s’adapter à son parent
détermine l’alignement d’un élément replacé au sein de sa

object-position 3
boîte
Masques
permet de modifier la visibilité d’un élément en le masquant

mask 3
partiellement ou complètement
définit si un masque sera utilisé comme un masque de luminance

mask-type 3
ou comme un masque de transparence

Css3 Bases

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css3 Bases

Transféré par

Droits d'auteur :

Formats disponibles

CSS3 METTRE EN PLACE LE CSS3

- dans un fichier .css (méthode la plus recommandée) ;

Dans un fichier .css (recommandé)

Vous noterez le contenu de la ligne 5,

<link rel="stylesheet" href="style.css" />

Dans l'en-tête <head> du fichier HTML

<p>Bonjour et bienvenue sur mon site !</p>

Directement dans les balises (non recommandé)

<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>

Sélectionner une balise

Soit l’exemple précédent

Schématiquement, une feuille de style CSS ressemble donc à cela :

<h1 class=""> </h1>

<p class="introduction">Bonjour et bienvenue sur mon site !</p>

<img src="images/logo.png" alt="Logo du site" id="logo">

Les balises universelles

<p>Bonjour et bienvenue sur mon site !</p>

 Couleurs  Arrière-plans  Bordures

PROPRIETÉ DESCRIPTION CSS

color spécifie la couleur du texte 1

opacity permet de jouer sur le niveau de transparence et d’opacité 3

PROPRIETÉ DESCRIPTION CSS

background super propriété qui en regroupe 8 autres en une seule 1

background- définit si la position d’une image d’arrière-plan par

permet de définir les limites de l’arrière-plan à

background-color spécifie la couleur de l’arrière-plan 1

permet de définir une ou plusieurs images comme

détermine la manière dont les images d’arrière-plan

background-position spécifie la position d’une image d’arrière-plan 1

montre la façon dont une image d’arrière-plan sera

background-size définit la taille d’une image d’arrière-plan 3

super propriété qui regroupe les propriétés border en

super propriété qui regroupe les propriétés border-

border-bottom-style définit le style de la bordure inférieure 1

border-color définit la couleur des 4 bordures 1

super propriété qui regroupe les propriétés border-

border-image- décrit l’espace dont l’image dépasse de la boîte de

border-image-slice permet de découper l’image fournie en 9 régions 3

border-image-width définit la largeur de l’image de bordure 3

super propriété qui regroupe les propriétés border-left

border-left-color définit la couleur de la bordure gauche 1

border-left-style définit le style de la bordure gauche 1

border-left-width définit la largeur de la bordure gauche 1

super propriété qui regroupe les 4 propriétés border-

super propriété qui regroupe les propriétés border-right

border-right-color définit la couleur de la bordure droite 1

border-right-style définit le style de la bordure droite 1

border-right-width définit la largeur de la bordure droite 1

border-style définit le style des 4 bordures 1

super propriété qui regroupe les propriétés border-top

border-top-color définit la couleur de la bordure supérieure 1

border-top-style définit le style de la bordure supérieure 1

border-top-width définit la largeur de la bordure supérieure 1

border-width définit la largeur des 4 bordures 1

box-decoration- définit le comportement des bordures et arrière-plans

box-shadow permet de faire des ombres sur les bordures 3

Modèles de boîtes simples

PROPRIETÉ DESCRIPTION CSS

bottom définit la place d’un élément positionné par rapport au bas 2

indique si un élément peut être situé à côté d’éléments

empêche une portion d’un élément d’être affichée en

display définit la façon dont un élément HTML doit être affiché 1

float définit si une boîte doit flotter ou non 1