Tutoriel CSS N°1 : votre première feuille de style CSS

////Tutoriel CSS N°1 : votre première feuille de style CSS

Mettez en oeuvre votre première feuille de style CSS (Cascading Style Sheet). Comprenez la valeur ajoutée de CSS . Séparez vos préoccupations : contenu / formatage. Enfin, utilisez le produit Firebug pour augmenter votre productivité.

Liens utiles

 Démo HTML avec différents styles (w3schools)

OBJECTIF

tutoriel-premiere-css-3

créez un répertoire ‘democss1’ sur votre disque dur. Exemple : d:formationcssdemocss1

Etape 1 : la page XHTML

 Dans ce répertoire css, créez un document format html nommé index.html

tutoriel-premiere-css-1

 Expliquez.

Etape 1 : la feuille de style CSS externe

 créez un sous-répertoire ‘css’

arborescence-projet

 Dans ce répertoire css, créez un document format texte que vous nommez ‘monstyle.css‘ et remplissez ainsi.

tutoriel-premiere-css-2

 Expliquez ce code.

QUESTION 1 : qu’est ce qu’un sélecteur CSS ?

QUESTION 2 : combien y a t’il de sélecteurs dans le fichier monstyle.css ?

QUESTION 3 : qu’est ce qu’une déclaration CSS ? qu’est ce qu’une propriété CSS ?

QUESTION 4 : combien de déclaration pour chaque sélecteur du fichier monstyle.css ?

QUESTION 5 : comment mettre un commentaire dans une feuille CSS ?

 double-cliquez sur index.html. Vous obtenez le résultat attendu :

tutoriel-premiere-css-3

CORRECTION

democss1

Démo Firebug

 Installez Firebug, le plugin Firefox contribuant à une meilleure productivité des développeurs web.

 lancez firebug.

tutoriel-premiere-css-4

 Expliquez

tutoriel-premiere-css-5

 Expliquez

tutoriel-premiere-css-6

 Expliquez

tutoriel-premiere-css-7

 Expliquez

CONCLUSION

Dans ce tutoriel, vous avez mis en oeuvre votre première feuille de style CSS. Vous avez également vu l’impact de la modification du style sur le rendu, avec Firebug.

2018-01-29T17:34:45+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java