Conseil Dreamweaver - Trucs & Astuces

Tips 5 : Création de styles CSS

Créer un nouveau style CSS

1- Dans le panneau CSS, cliquez sur l'icône entouré en rouge

CSS propose différentes possibilités pour créer des régles qui seront:

• Classe: une régle de style CSS applicable à n'importe quel élément (Un bloc de pargraphe, une balise div, une balise d'entête ...)
• ID: un identifiant unique d'ailleurs que l'on utilise pour poistionner des balises div qui contiendront les différents éléments qui composent votre site (par ex: #Haut ou #Header, #Contenu ou #Content, #Bas ou #footer
• Balise: Une régle applicable uniquement à la balise HTML correspondante (Ex: je crée une régle qui modifie les balises <ul> et qui me met un petit V sous forme d'image à la place du cercle classique)
• Composé: Un exemple sera plus parlant: Je crée une régle qui va modifier les balises <ul> qui sont insérer uniquement dans le ID: #Contenu qui s'écrira de cette manière " #Contenu ul "

2- Choisissez comme exemple "Balise", nous allons créer une régle qui modifie la balise HTML "body" pour que le fond de notre page soit gris et que tout le texte affiché soit en "Verdana" et taille 14

L'éditeur CSS s'ouvre, compléter en modifiant les valeurs comme dans l'exemple ci dessous

Dans la catégorie "Type"'

Puis dans la catégorie "Arriére plan"

3- Cliquer sur le bouton "Appliquer" puis "OK"

Choisissez si vous voulez que vos régles css

• Soit applicable uniquement à cette page
• Ou stocké dans un nouveau fichier feuille de style externe (Ce qui est préférable, nous pourrons utilisés nos régles ainsi sur toutes les pages qui seront crées), nous allons prendre ce choix

4- Enregistrer votre feuille de style, vous pouvez remarquer qu'elle a été liée à notre page

5- Vous pouvez ensuite créer autant de régle que vous voulez

Attacher une feuille de style css

1- Dans le panneau Style CSS, cliquer sur cette icône

Cette boîte de dialogue apparaît

2- Cliquer sur le bouton "Parcourir", sélectionner la feuille de style où vous l'avez enregistrée

3- Valider en appuyant sur le bouton "ok"

Votre feuille de style est liée à la page

Modifier le style css

1- Cliquer sur l'cône "Modifier"

Vous n'avez plus qu'à faire les clics qui vont bien

Supprimer une règle de style css

1- Sélectionner la ré&gle à supprimer dasn le panneau "Style CSS"
2- Cliquer sur l'icône "Supprimer"

Voici quelques exemples