Comment créer des feuilles de style externes et pour l'impression

Dans cette leçon, découvrez comment créer une feuille de style externe pour vos pages web et une feuille de style pour l'impression afin d'optimiser l'affichage sur écran et papier.

Détails de la leçon

Description de la leçon

Cette leçon vous guide à travers la réalisation d'une feuille de style externe pour un site web, ainsi qu'une feuille de style spécifique pour l'impression. Après avoir préparé différentes pages (d'accueil, d'histoire, d'instruments, de cours, de goodies et de formulaire), nous allons unifier et externaliser les styles communs. Ensuite, nous aborderons la création d'une feuille de style dédiée pour l'impression afin d'optimiser le contenu imprimé en éliminant les éléments superflus tels que les images et les menus. Le processus inclut la sélection et l'extraction des styles internes vers un fichier CSS externe, l'intérêt de la compatibilité avec les anciens navigateurs, ainsi que des pratiques de rendu de style adaptées aux différents supports.

La vidéo explique également comment utiliser des outils comme Dreamweaver pour faciliter le travail de comparaison et de suppression des styles en double, et comment modifier les feuilles de style pour différents médias à l'aide de fonctionnalités spécifiques comme la barre d'outils 'rendu du style'.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :
1. Apprendre à créer et utiliser efficacement une feuille de style externe.
2. Savoir créer une feuille de style pour l'impression pour améliorer l'expérience utilisateur.
3. Comprendre comment manipuler les styles CSS dans un projet web.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS, ainsi qu'une familiarité avec les outils de développement web comme Dreamweaver.

Métiers concernés

Les compétences apprises dans cette vidéo sont utiles pour les développeurs front-end, web designers, et intégrateurs web qui travaillent à l'amélioration de la présentation visuelle et fonctionnelle des sites web.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser d'autres éditeurs de code comme Visual Studio Code, Sublime Text, ou Atom pour créer et gérer vos feuilles de style CSS.

Questions & Réponses

Cela permet d'optimiser la présentation du contenu lors de l'impression, en supprimant les éléments inutiles comme les images et les menus pour ne conserver que le texte et les informations essentielles.
Externaliser les styles CSS facilite la maintenance du site en centralisant les règles de style, réduit la redondance de code et permet une mise à jour cohérente des styles sur plusieurs pages à la fois.
Les deux méthodes sont l'utilisation de la balise pour un lien direct et la commande @import pour importer les styles. La première est généralement préférée pour sa simplicité et sa compatibilité.