Formation CSS : donner du style à ses pages Web

1/ Notions de base

• Le web : un monde complexe

• Le modèle classique client – requête – serveur – réponse

• Les langages du web côté client : HTML, XML, CSS, JavaScript

• Les outils nécessaires

2/ Préparation

• Organiser le projet de conception

• Concevoir le gabarit et la maquette

• L’architecture CSS : les boîtes et les blocs

• Intégrer ou appeler du CSS dans une page HTML : méthode interne, externe et intégrée

• Appliquer les bonnes pratiques d’intégration

• Connaître les sélecteurs, préparer les classes et identifiants nécessaires

• Connaître l’ordre des priorités

3/ La base des CSS

• Les avantages des feuilles de style

• Les différentes versions de CSS (CSS1, CSS2, CSS3)

• La cascade CSS. Le stockage des feuilles CSS

• Le support par les navigateurs

• Les types de sélecteurs (id, class et balises)

• L'ordre de priorité. Les propriétés

• Les unités de mesure (em, px, pt...)

• Les couleurs (RVB versus de base)

4/ Premiers pas avec CSS

• La syntaxe du CSS

• Ranger les éléments : inline et block

• Organiser les éléments entre eux dans le flux

5/ Les boîtes et blocs

• Les balises de bloc versus en ligne

• Le flux CSS. Les marges (margin, padding)

• Positionnement dans le flux (relatif, flottant), positionnement hors flux (absolu, fixe)

• Le z-index (altitude). La propriété box-sizing. Les contextes de formatage

• Fonds et bordures (couleurs, transparence, coins arrondis, ombres portées)

• Le contenu (déroulement/scrolling)

• Cas particulier des tableaux

6/ Formatage du texte

• Modification des fontes (tailles, polices, couleurs...)

• Alignement du texte

• Les pseudo-classes

• Les effets visuels (clignotement...)

• Listes et menus horizontaux et verticaux

7/ Mise en forme : les images

• Choisir le bon format

• Ajouter une image de fond

• Redimensionnement. Rollover

• Liens et images

8/ Les formulaires

• Design de champs de saisie, liste de sélection, zone de texte, case à cocher...

• Mise en forme des étiquettes (labels), des légendes, groupes de champs (fieldset)...

9/ Modifications des CSS en JavaScript

• Modification des styles en JavaScript (les interfaces style et className)

• Effets : apparition, cliqué-glissé, menu déroulant...