Documents structurés pour le web
Feuilles de style CSS

Master web éditorial

Yannis Delmas
yannis.delmas@univ-poitiers.fr

Introduction

La séparation des pouvoirs

CSS ?

En cascade ?

Association au HTML

Principe général du CSS

Redéfinir l'aspect des balises

Exemple d'une redéfinition de h1

<h1>Lorem ipsum</h1>
<p>Dolor sit amet…</p>
h1 {
▏  background: #B77E8D; /*   */
▏  color:      #411422; /*   */
▏  font-size:  144%;
▏  margin:     10px 0 20px 0;
}
(…)

Les règles peuvent se grouper

balise1, balise2, … {
▏  propriété1: valeur1;
▏  propriété2: valeur2;
▏  …
}

Équivaut (presque) à :

balise1 {
▏  propriété1: valeur1; propriété2: valeur2; …
}
balise2 {
▏  propriété1: valeur1; propriété2: valeur2; …
}
…

Les classes CSS

Les classes équivalent à des balises “personnelles”

Affectées à un élément par l'attribut class en HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="alinea">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Introduites par un point en CSS

.alinea {
▏  text-indent: 50px;
}
(…)

Propriétés usuelles

Les couleurs en CSS

<p class="abc">Test 1</p>
<p class="def">Test 2</p>
.abc {
▏ background-color: #0F2D40;
▏ color: #3E8C84;
}
.def {
▏ background-color:
▏ ▏      rgba(47, 0, 38, .6);
▏ color: rgb(168, 204, 132);
}
(…)

Les images en CSS

.ex {
▏ background-color:    #C6D4D7;               	
▏ background-image:    url(logo-up-mwe.svg);
▏ background-repeat:   none;  /* repeat | repeat-x | repeat-y */
▏ background-position: 0 0;   /* δx δy */
}
(…)

Les polices de caractères

Dimensions des éléments

Unités des dimensions

Sélecteurs plus complexes

Combiner balises et classes

Imbriquer plusieurs sélecteurs

Pseudo-éléments et pseudo-classes

Règles de cascade

À vous de jouer !