Sommaire

Un tutorial n'est jamais parfait mais il faut toujours essayer de respecter les recommandations officielles du W3C, sans pour autant en être esclave "validator.org"  (pour la beauté des pages j'ai mis en couleur les barres de défilement en ajoutant une définition dans le code CSS, scrollbar-base-color, qui en réalité n'est pas conforme. Dont acte)

Applications de CSS avec des exemples concrets

Tutorial sur le CSS
02- Généralités et Syntaxe du CSS.
02- Définir une feuille de style parmi trois modèles.
03- Définition spécifique (adding in line) = 1er modèle.
03a- Méthode interne (embedding) = 2 ème modèle. 
04- Méthode externe (Linking) = 3 ème modèle.
05- Syntaxe et déclaration de style.
05a- Commentaires pour le CSS.
06- Règles fondamentales de base.

Mise en forme de la police
06a- Font-family Propriété pour choisir la police.
06b- Font-size Propriété pour le corps (taille de la police).
06c- Font-style Propriété pour l'italique.
06d- Font-variant Propriété pour le texte en petites majuscules.
06e- Font-weight Propriété pour la graisse de la police (poids).
06f- Font-stretch Propriété pour l'étirement de la police

Mise en forme du texte
07a- Color Propriété pour définir la couleur du texte.
07b- Letter-spacing Propriété pour définir l'espacement entre les caractères.
07c- Word-spacing Propriété pour définir l'espacement entre les mots.
07d- Text-transform Propriété pour forcer les minuscules ou les majuscules.
07e- Text-decoration Propriété pour souligner, surligner, barrer, clignoter.
07f- Text-shadow Propriété pour créer un effet d'ombrage sur un texte.

Mise en forme de l'arrière-plan
08a- Background-color pour la couleur du fond de page (couleur d'arrière-plan).
08b- Background-image pour placer une image en fond de page ou d'élément (image d'arrière-plan).
08c- Background-repeat-x propriété pour répétition horizontale d'une image.
08ca- Background-repeat-y propriété pour répétition verticale d'une image.
08d- Background-attachment pour définir une image fixe lors du défilement de la page.
08da- Background-attachment y définir si une image reste fixe verticalement lors du défilement de page.
08e- Background-position - pour définir la position d'une image dans la page ou le bloc.

Quelques rappels et nouveautés
12a- Règles et déclarations multiples en CSS.
12b- Règles et propriétés en abrégé.
12c- Cascade et valeur "! important " en CSS.

Méthode interne et classes
14- Classes avec CLASS et leurs premières fonctions.
15a- Hérédité très important, à comprendre avant de continuer.
15b- Hérédité exemples complémentaires.
16- Sous-classes de style.

Mise en forme de zones
17- SPAN balise spéciale pour quelques mots (inline-level).
18- DIV balise spéciale pour paragraphes (block-level).

Pseudo-classes
19- Liens hypertexte généralités.
19b- Liens soulignés ou pas.
19c- Liens divers exemples.
20- Liens vers des ancres.
test4- Lien avec focus.

Fichier externe des sélecteurs
21- Feuille de style externes avec fichier centralisé css.
23- Priorité des styles internes sur feuille de style externes.

Mise en forme des paragraphes
30- "Boîtes" généralités sur la mise en forme des paragraphes
31- Text-indent pour retrait de la première ligne d'un paragraphe.
31a- Text-indent pour retrait de la première ligne dans toute la page.
31b- Text-align pour définir l'alignement horizontal du texte.
31c- Vertical-align pour définir l'alignement vertical d'un texte dans une ligne.
31ca- Vertical-align pour aligner du texte autour d'une image.
32- Line-height pour fixer l'interlignage (espacement entre les lignes).
32a - White-space pour a gestion des blancs et sauts de ligne.
 

Positionnement

34a- Coordonnées d'un objet pour positionnement précis. modèle 1
34b- Coordonnées d'un objet pour positionnement précis. modèle 2

35- Positionnement mise en forme des paragraphes, boîtes.
35a- Positionnement relatif explications, exemples.
36- Positionnement absolu explications, exemples.
37- WIDTH et HEIGHT avec le positionnementabsolu.
37a- WIDTH pour composer des colonnes avec le positionnementabsolu.

38- OVERFLOW pour dégorgement d'un élément de boîte.
38a - CLIP pour rogner un élément de boîte.
38f - FLOAT pour définir le flottement d'une boîte.
38g - float et diverses applications de positionnement.
38h - float avec des exemples commentés.
38m - CLEAR pour définir la position par rapport à un élément flottant.
38n - clear associé à float, et VIGNETTES.

Mise en forme des marges
40 - MARGIN définition générale de la marge externe.
40a - margin-top, margin-right, margin-bottom, margin-left

Mise en forme des bordures
41 - BORDER propriété pour définir la largeur des bordures.
41a- Border-color pour définir la couleur des bordures.
41b- Border-style pour définir le style des bordures.
42 - PADDING propriété pour définir la marge interne.

Mise en forme des listes
44 - STYLE-LIST propriété pour créer des listes.

47- CALQUES ou LAYERS et propriétés "position, z-index, relative".
47.4- CALQUES avec image et texte autour.
47.5- CALQUES avec des éléments "empilés".

Valeurs : nombres, longueurs, poucentage
50- Unités de mesure, dimensions et valeurs utilisées en CSS
51- "em" unité de mesure comme valeur relative
52- "ex" unité de mesure comme valeur relative 
53- "px" unité de mesure comme valeur relative

Pseudo-éléments
60 - :first-letter PSEUDO-STYLE pour créer une "lettrine".
61- :first-line PSEUDO-STYLE pour définir des majuscules sur la première. ligne.

 
65 - FORMULAIRE en css, sans tableau avec positionnement absolu.
65a - FORMULAIRE en css, sans tableau ni positionnement absolu.
65b - FORMULAIRE en css, sans tableau avec script d'expédition.

Mise en forme des tableaux
75-

Tableaux récapitulatifs des Propriétés
90- Propriétés de mise en forme des polices
91- Propriétés de mise en forme du texte
92- Propriétés des couleurs du texte et du fonds de page
93- Propriétés de mise en forme des paragraphes
94- Propriétés des bordures de boîte BORDER
95- Propriétés de marge externe MARGIN
96- Propriétés de marge interne PADDING
97- Propriétés de LIST-STYLE