2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS Appliquer un style sur un élément d’une page html Connaître au moins une dizaine de styles css par coeur

Petite mise en jambe… ça sert à quoi les CSS ? CSS = « cascading style sheets » css et navigateurs : le casse-tête de la compatibilité IE Où et comment appliquer un style CSS ? En ligne en interne via une feuille de style externe

Syntaxe et principaux sélecteurs Le principe : sélecteur + propriété(s) + valeur(s) Les commentaires en CSS Les principaux sélecteurs : Cibler tous les éléments html de même type a { } div { } Cibler un élément grâce à son identifiant (id) #monelement { } Cibler un élément grâce à sa classe (class) .monelement { } Cibler une balise html ayant une classe ou une id particulière div#monid { } div.maclass { } Cibler un élément enfant d’un autre ul li { } div p { } Cibler un élément descendant direct d’un autre a > span { } Gérer le style d’un lien au survol de la souris a:hover { }

Unités, couleurs, typo Notation des couleurs en CSS : lettres et notation hexadecimale Les unités “fixes” en CSS Les unités “fluides” en CSS Propriétés de typographie, polices et puces font-family et polices utilisables line-height font-size font-weight font-style color text-align text-decoration changer les icônes d’une liste à puce

Dimensions et marges Rappel de la différence inline et block Largeur et hauteur avec width et height Marge extérieures « margin » Centrer horizontalement à l’aide de margin Padding : la marge « intérieure » Padding et calcul de dimension d’élément Overflow: hidden et auto

Bordures et background Les bordures : border, style de bordure et bords arrondis CSS3 Background-color, Background-image, Background-repeat, Background-position

A vous de jouer (1er exercice) ! Connectez-vous à l’adresse suivante : http://supdepub.avelook.fr/crea Dans le dossier « cours2 », Ouvrez le questionnaire 3

A vous de jouer (2ème exercice) ! Connectez-vous à l’adresse suivante : http://supdepub.avelook.fr/crea Dans le dossier « cours2 », Ouvrez le questionnaire 4

Le positionnement Les « flottants » et le flux (left, right, clear) La propriété « display » et la modification du comportement des balises (block, inline, inline-block) Positionnement CSS (absolute, relative, fixed)

A vous de jouer (3ème exercice) ! Connectez-vous à l’adresse suivante : http://supdepub.avelook.fr/crea Dans le dossier « cours2 », Ouvrez le questionnaire 5