Tutoriel feuilles de styles

Tutoriel feuilles de styles CSS avec Dreamweaver®

Apprenez à utiliser les feuilles de Styles CSS pour formater du texte dans votre site Web. Des conseils inclus.

Les Styles CSS sont le plus facile et meilleur moyen de mise en forme du texte dans un site Web. Au lieu d'utiliser des étiquettes "fonts" pour chaque paragraphe et encombrer votre code HTML avec des balises de polices sans fin, vous pouvez simplement faire un style avec un type de police, une taille et une couleur et l'utiliser dans tout le site. Les Styles peuvent être utilisés dans les tableaux, les lignes, les cellules, et encore plus intéressant, il peut également être utilisé pour les objets de formulaire. Les possibilités sont sans fin lorsque vous utilisez les feuilles de style. Nous allons discuter des différentes façons dont vous pouvez utiliser les styles dans ce tutoriel.

 

La première étape est d'apprendre comment créer une feuille de style

Nouvelle règle cssVoici comment créer des styles dans Dreamweaver (exemple dremaweaver CS4). Il vous suffit de suivre ces étapes (cliquez sur les images pour les agrandir):

  1. Ouvrez la palette Styles CSS, cliquez sur Fenêtre> Styles CSS
  2. Cliquez sur l'icône '+' pour créer un nouveau style. Vous obtiendrez la fenêtre pop-up, comme indiqué sur la droite. Choisissez un type de sélecteur contextuel pour votre règle CSS comme indiqué. Choisissez l'endroit où votre règle sera définie (Ce document uniquement si vous voulez que la règle du style s'applique sur la page courante uniquement ou Nouveau fichier feuille de style si vous voulez créer une feuille de style qui s'appliquera sur toutes les pages du site).
  3. Cliquez sur OK pour enregistrer la feuille de style dans le dossier de votre site.
  4. Maintenant, créez votre propre style en choisissant de donner le type de police, taille, poids, couleur etc

 

Il vous reste maintenant à définir les règles de cette feuille de style (couleur, police, liens...). Allez à Propriétés de la page... dans Propriétés en bas:

Propriétés de la page

Vous aurez cette fenêtre où vous pourez spécifier l'aspect CSS, HTML, les liens, les titres... Cliquez sur Appliquer puis sur OK. Voilà votre feuille de style est configurée et vous pouvez changer ses aspects à tout moment en retournant à Propriétés de la page.

Fenêtre propriétés de la page

 

Application de styles au texte

Lorsque vous aurez terminé la création de votre style, vous pouvez appliquer le style de votre texte. Tout ce que vous avez à faire est de choisir le texte et de cliquez sur le style dans la palette Styles CSS.

Code HTML: Lors de l'utilisation de styles, vous devez définir une «classe», par exemple <td class = "text">. Ici, tout le contenu de la cellule aura le style appelé «texte».

Conseils de style CSS

  • Utilisez l'attribut a:hover pour faire de beaux rollovers texte.
  • Supprimer le soulignement des liens en utilisant l'attribut 'none'.
  • Personnaliser les objets de formulaire, en leur donnant une couleur de fond et de police.
  • Essayez la "hauteur" dans votre style bien pour donner plus d'espace entre les lignes.
  • Appliquer le style de texte par défaut à la table de la cellule. Tout le texte dans la cellule prendra automatiquement la police par défaut. Le code ressemblera à ceci: <td class="Nom de Style">
  • Il serait préférable de lier vos pages à une feuille de style externe plutôt que de créer un style à l'intérieur d'un document. Si jamais vous avez besoin de changer une police couramment utilisée, vous n'avez qu'à la changer dans la feuille de style et les changements seront automatiquement pris en compte dans tous les documents qui utilisent ce style.