Initiez-vous aux feuilles de style en cascade (CSS) et découvrez comment les appliquer aux pages web à l’aide des outils disponibles dans Dreamweaver.
Bien que Dreamweaver simplifie l’utilisation des feuilles de style CSS, les designers web doivent bien les connaître pour pouvoir utiliser Dreamweaver efficacement. Dans ce tutoriel, vous vous initierez aux feuilles de style CSS et apprendrez à utiliser les fonctions de mise en forme de l’outil CSS Designer de Dreamweaver pour produire des feuilles de style CSS exploitables.
Utilisez la page prédéfinie dans Intializr pour suivre ce tutoriel. Initializr est un site qui vous permet de générer un projet de design web initial avec des fichiers de démarrage HTML, CSS et JavaScript, ainsi que des éléments de contenu, de mise en forme et de navigation.
Rendez-vous sur initializr.com dans un navigateur web pour démarrer un projet Initializr HTML5.
Cliquez sur le bouton Responsive, sélectionnez Mobile-first Responsive et Modernizr, et désélectionnez toutes les autres options (voir Figure 1).
Remarque : le projet réactif comprend une mise en forme par défaut, des fichiers CSS et d’autres fichiers qui aident à illustrer les concepts de création avec des feuilles de style CSS.
Téléchargez le fichier ZIP et décompressez-le dans un dossier sur votre ordinateur.
Lancez Dreamweaver.
Ouvrez index.html dans Dreamweaver.
Remarque : vérifiez que vous disposez bien de la dernière version de Dreamweaver. Pour cela, cliquez sur l’onglet Applications de votre application Creative Cloud Desktop et vérifiez que Dreamweaver est à jour (voir Figure 2).
Activez les modes Fractionner et En direct pour prévisualiser le résultat et afficher le code source.
Aux débuts du web, le code HTML définissait la structure des pages et les styles dépendaient des attributs de la balise HTML. Les designers web devaient reproduire les règles de style sur les pages et entre elles, ce qui compliquait le mise à jour et la maintenance des sites.
La feuille de style CSS a résolu le problème en transférant les données de mise en forme vers des règles définies séparément du code HTML. Les designers et les développeurs ont ainsi pu rassembler et mettre à jour les styles au même endroit, puis les réutiliser facilement. La majeure partie de la mise en forme était toujours réalisée en HTML, tandis que la feuille de style CSS se concentrait sur la taille, la couleur ou d’autres attributs visuels de base.
Aujourd’hui, la feuille de style CSS gère tout, de l’apparence des éléments à leur position sur la page, en passant par l’animation 2D et 3D de base. Le code HTML sert principalement à indiquer le rôle d’un élément (paragraphe, titre ou conteneur, soit un élément DIV). Au moyen d’une simple feuille de style CSS, vous pouvez changer l’apparence de votre page, quel que soit l’ordre dans lequel les éléments apparaissent dans le code HTML. Vous pouvez même ajuster les styles ou l’apparence en fonction de la taille ou de l’orientation de l’écran.
L’outil CSS Designer de Dreamweaver offre une interface visuelle pour ajouter, modifier et supprimer des styles dans votre page ou dans des fichiers CSS externes liés à celle-ci. Visionnez la vidéo Mise en forme avec CSS pour obtenir une démonstration de CSS Designer.
Remarque : vous pouvez définir les styles directement dans la page, (feuilles de style internes), à l’intérieur d’un bloc dans l’en-tête ou sur des balises distinctes avec des styles incorporés. Il est cependant recommandé d’établir un lien avec une feuille de style externe en vue d’une réutilisation.
Suivez ces étapes pour personnaliser CSS Designer, mais aussi pour découvrir certaines de ses fonctionnalités de base.
Pour afficher l’intégralité du panneau CSS Designer, cliquez sur le menu déroulant dans l’angle supérieur droit et passez du mode Compact au mode Développé (voir Figure 4).
CSS Designer simplifie la création d’un fichier CSS ou la liaison avec un fichier CSS existant. Cliquez sur le signe plus dans la section Sources pour afficher les options permettant d’associer une feuille de style à une page web. Appuyez ensuite sur le bouton Échap pour masquer les options.
Cliquez sur main.css. Les sélecteurs définis dans la feuille de style apparaissent dans la section Sélecteurs.
La cascade en CSS désigne la méthode employée par les navigateurs web pour sélectionner le style à appliquer à un élément lorsque plusieurs propriétés sont définies pour cet élément dans la feuille de style CSS ou lorsque des styles sont appliqués au même élément depuis plusieurs emplacements. La page Learn What the Cascade in Cascading Style Sheets Means donne un bon aperçu du fonctionnement de la cascade.
Prenons un exemple : commencez par configurer une police, une taille de police et une couleur de police par défaut pour l’ensemble du document. Il est possible de créer des règles applicables à chaque élément HTML contenant du texte, mais cette approche serait répétitive et source d’erreurs. La cascade en CSS permet d’appliquer des styles de texte par défaut à l’ensemble de la page ou du corps HTML, et laisse tout le contenu de la page hériter de ce style, sauf si vous le remplacez.
Cliquez sur main.css dans la section Sources de CSS Designer.
Cliquez sur html, button, input, select, textarea dans la liste Sélecteurs.
Cliquez sur l’icône de texte (T) dans le panneau Propriétés. Notez que la couleur du texte est définie sur #222, soit une couleur proche du noir.
Cliquez sur le sélecteur de couleurs et choisissez une nouvelle couleur pour voir comment cela fonctionne (voir Figure 6).
Redéfinissez la couleur sur #222.
La propagation en cascade fonctionne également lorsque plusieurs règles sont appliquées au même élément dans des fichiers CSS ou entre eux. Par exemple, dans le code CSS, vous pouvez choisir le bleu pour les éléments paragraph dans main.css en procédant comme suit :
Définissez ensuite la taille de la police dans les paragraphes à 10 pixels dans normalize.min.css en procédant comme suit :
Bien que ces règles soient définies séparément dans différents fichiers CSS, elles s’appliquent toutes les deux et attribuent le bleu et une hauteur de 10 pixels au texte du paragraphe.
L’article CSS Specificity: Things You Should Know fournit des informations plus détaillées sur les règles de la propagation en cascade dans CSS, notamment la gestion des règles CSS conflictuelles.
Comme leur nom l’indique, les sélecteurs CSS vous permettent de sélectionner (ou de trouver) les éléments HTML auxquels s’appliqueront les styles de la règle CSS. Les principaux types de sélecteur sont l’élément (ou le type), la classe et l’ID, entre autres.
Les sélecteurs d’élément, ou de type, retrouvent tous les éléments HTML du type spécifié dans le document. Vous pouvez observer leur fonctionnement en utilisant Dreamweaver pour modifier un sélecteur d’élément de la balise de règle horizontale, ou rupture thématique en HTML5.
Ajoutez une balise
dans index.html. Sélectionnez le mode Fractionner et ajoutez
sous le bloc header à la ligne 38. La feuille de style comporte une règle qui attribue à l’élément hr une ligne grise d’un pixel.
Sélectionnez main.css dans la section Sources de CSS Designer et recherchez hr dans les sélecteurs (utilisez le champ de recherche pour limiter les résultats dans la section Sélecteurs).
Cliquez sur hr et la case à cocher Ensemble pour afficher uniquement les propriétés de style qui lui sont appliquées :
height: 1px
display: block
margin: 1 em (top and bottom)
border-top: #ccc;
Accédez à la section Bordure du panneau Propriétés et modifiez la bordure supérieure en cliquant sur le sélecteur de couleur. Utilisez l’outil Pipette pour sélectionner la couleur orange clair dans l’en-tête (voir Figure 7).
Sélectionnez main.css dans la barre d’outils Document et activez les modes En direct et Fractionner activé. Vous constaterez alors que les éléments
se sont vu attribuer la couleur orange (voir Figure 8).
Le code CSS, comme illustré en mode Code, reflète la règle que vous avez modifiée dans CSS Designer :
Les sélecteurs de classe peuvent s’appliquer à tous les éléments HTML. Pour en utiliser un, définissez-en un dans un fichier CSS avec un point au début du nom de la classe. Attribuez ensuite la classe à un élément HTML en utilisant l’attribut de classe et le nom de la classe CSS sans le point.
Suivez les étapes ci-après pour examiner l’un des sélecteurs de classe dans le projet d’exemple.
Cliquez sur la classe .header-container dans la section Sélecteurs de CSS Designer.
Assurez-vous que la case Ensemble est cochée et passez en revue les trois propriétés border-bottom définies pour cette classe.
width: 20px
style: solid
color: #e44d26
Prévisualisez l’impact de ces modifications sur la barre entre les éléments nav et l’en-tête de l’article, et examinez la feuille de style CSS correspondante en mode Code (voir Figure 9). Ces propriétés appliquent une bordure orange foncé au bas de l’en-tête.
Notez que header-container a une couleur d’arrière-plan orange clair qui n’a pas été définie dans la classe CSS précédente.
Recherchez .header-container, .footer-container et .main aside dans la section Sélecteurs. Vous pouvez survoler la liste pour afficher une info-bulle si une partie du texte n’est pas visible (voir Figure 10).
La feuille de style CSS ci-dessous reflète les sélections effectuées dans CSS Designer.
Dans cet exemple, plusieurs sélecteurs ont été combinés car ils ont une propriété en commune. Les sélecteurs header-container, footer-container et aside (appelé un sélecteur descendant, comme nous le verrons plus loin) partagent tous l’arrière-plan orange clair. La combinaison d’éléments partageant la même propriété au sein de plusieurs sélecteurs permet généralement d’obtenir une feuille de style CSS plus efficace et plus facile à gérer.
Les sélecteurs d’ID permettent de retrouver un élément HTML sur la page et doivent être uniques. Pour en utiliser un, définissez-le dans un fichier CSS avec une balise dièse au début du nom du sélecteur. Attribuez ensuite le sélecteur à un élément HTML à l’aide de l’attribut d’ID et référencez le nom CSS sans la balise dièse. Par exemple :
Pour mettre en forme cet élément dans la feuille de style CSS, vous pouvez utiliser un sélecteur d’ID de ce type :
Remarque :le projet d’exemple n’inclut pas de sélecteurs d’ID.
Utilisez un sélecteur d’ID pour mettre en forme un seul élément sur une page et utilisez un sélecteur de classe pour appliquer le même style à plusieurs éléments. Vous trouverez plus de détails à ce sujet dans l’article The Difference Between ID and Class .
Les sélecteurs descendants et enfants sont similaires, à une différence près. Pour comprendre cette différence, commencez par examiner un exemple de sélecteur descendant dans les fichiers d’exemple.
Recherchez nav a dans la section Sélecteurs et assurez-vous que la case Ensemble est cochée.
Comparez les propriétés définies dans CSS Designer avec la feuille de style CSS définie en mode Code (voir Figure 11).
Le mode Code montre la feuille de style CSS correspondante :
Dans ce cas, vous sélectionnez tout élément qui descend d’un élément
Dans le fichier HTML ci-dessus, trois éléments HTML sont des descendants de l’élément
Le sélecteur descendant ci-dessus mettra en forme les éléments situés sous l’élément
Par contre, un sélecteur enfant sélectionne uniquement les enfants, c’est-à-dire les éléments situés un niveau en dessous. L’exemple précédent écrit comme un sélecteur enfant, et non comme un sélecteur descendant, ressemblerait à ceci :
Dans le cas du fichier HTML ci-dessus, ce sélecteur enfant ne s’appliquerait pas à un élément, car il n’y a pas d’élément situé un niveau en dessous de l’élément
Comme l’élément
Mieux vaut éviter d’utiliser des sélecteurs descendants ou enfants, car ce sont les moins efficaces ou les plus lents. L’utilisation excessive de feuilles de style CSS peu performantes peut ralentir le rendu de votre page dans le navigateur. Pour en savoir plus sur ce sujet, consultez le Guide des meilleures pratiques de Google .
L’astérisque est un sélecteur universel qui convient à tous les éléments. Par exemple, utilisé seul, il s’adapte à tous les éléments présents sur la page. Dans la page d’exemple, une instance du sélecteur universel s’applique à la feuille de style d’impression à l’aide d’une requête multimédia (voir Figure 12).
Cet exemple de feuille de style CSS élimine les couleurs d’arrière-plan et les ombres portées de tous les éléments, et remplace la couleur du texte des éléments appropriés par du noir pour une meilleure impression.
Remarque : la déclaration !important accorde une priorité plus élevée à une règle CSS. Pour en savoir plus sur cette déclaration, consultez l’article When Using !important is the Right Choice .
Vous pouvez combiner le sélecteur universel comme sélecteur descendant. Par exemple, dans des éléments, vous pouvez sélectionner tous les éléments auxquels la classe CSS « main » est appliquée :
Les pseudo-classes sont des mots-clés spéciaux que vous pouvez ajouter à un sélecteur pour spécifier l’état d’un élément. Par exemple, la mise en forme d’un sélecteur de a:hover est définie dans un sélecteur d’élément (pour la balise ), mais elle s’applique uniquement lorsque le pointeur de la souris survole l’élément (un lien dans ce cas).
Dans le projet d’exemple, les liens (balises ) sont mis en forme sur la page, ce qui constitue l’utilisation la plus fréquente des pseudo-classes (voir Figure 13).
Activez le mode Code dans la feuille de style CSS correspondante.
Le premier sélecteur recherche les balises de l’élément
Il y a beaucoup plus de pseudo-classes que :hover et :visited. MDN en donne la liste complète . Certaines pseudo-classes vous permettent de sélectionner un élément particulier dans un groupe d’éléments. Voici un exemple issu de la page d’exemple :
Dans ce cas, les pseudo-classes spécifient un élément particulier dans une liste d’éléments. Le premier sélecteur recherche le premier élément
Cet article couvre nombre de sélecteurs couramment utilisés, mais pas tous. Par exemple, il ne couvre pas les sélecteurs frères, les sélecteurs complexes qui utilisent des expressions régulières, ni l’utilisation de not(). Suivez le tutoriel The 30 CSS Selectors You Must Memorize pour obtenir une liste plus complète des sélecteurs que vous pouvez utiliser.
Les requêtes multimédias vous permettent de définir des styles pour différents types de sorties et d’appareils, tels que les appareils mobiles, les tablettes et les ordinateurs. Cette section donne un aperçu des requêtes multimédias. Lisez l’article Création d’un site en responsive design à l’aide des requêtes multimédias pour obtenir une description plus détaillée.
Les requêtes multimédias commencent toujours par @media. Elles comportent ensuite deux parties : le type de média et les fonctions multimédias. Mais en pratique, vous ne voyez souvent qu’une seule partie.
La première partie est le type de média . Malgré l’existence de différents types de média, les deux principaux sont screen et print. Le type de média screen cible un écran d’ordinateur et le type de média print cible une page imprimée (autrement dit, il optimise la sortie lorsqu’un utilisateur imprime une page web).
Remarque : vous pouvez ajouter des informations de requête multimédia depuis la section @Requêtes multimédias de CSS Designer.
Suivez ces étapes pour sélectionner la requête multimédia print incluse dans ce projet et passer en revue ses propriétés dans CSS Designer et en mode Code.
Sélectionnez print dans la section @Requêtes multimédias de CSS Designer.
Cliquez sur le sélecteur universel (*) et examinez ses propriétés (voir Figure 14).
Cliquez sur les autres sélecteurs de la requête multimédia print pour afficher leurs propriétés.
L’exemple de requête multimédia ci-dessous utilise uniquement le type de média du fichier main.css. Cet exemple utilise le type de média print.
D’autres règles CSS sont définies dans la requête multimédia. Dans ce cas, la règle comprend un sélecteur universel qui supprime les couleurs d’arrière-plan et les ombres des éléments pour qu’ils s’affichent mieux à l’impression. Vous pouvez utiliser plusieurs astuces dans vos feuilles de style d’impression pour afficher des informations masquées sur la page imprimée, telles que l’URL des liens, comme dans le fichier CSS d’exemple au sein de la requête multimédia print :
La seconde partie d’une requête multimédia comprend des expressions, qui contiennent une ou plusieurs fonctions multimédias . Si une expression est considérée comme vraie, cette requête multimédia et les règles CSS qu’elle contient sont appliquées. Les fonctions multimédias englobent une longue liste de propriétés. Toutefois, dans la pratique, vous verrez le plus souvent des expressions basées sur la taille de l’écran. En fait, ces types de requêtes multimédias sont la base du Responsive Web Design , qui utilise des feuilles de style CSS pour modifier la mise en page, afin de prendre en charge les différentes tailles d’écran des ordinateurs, tablettes et téléphones, et autres appareils.
L’expression ci-après provient de main.css.
Cette requête multimédia contient deux parties : le type de média et les fonctions multimédias. Exprimée en langage normal, cette requête multimédia s’applique « uniquement aux écrans dont la largeur est supérieure à 1 140 pixels ». Autrement dit, la règle imbriquée dans la requête multimédia ne s’applique pas à l’impression, ni aux petits écrans, tels que ceux des téléphones mobiles ou des tablettes. Le mot-clé « only » empêche les anciens navigateurs non compatibles avec les requêtes multimédias contenant des fonctions multimédias (ils prennent uniquement en charge les types de média « screen » et « print ») d’appliquer les styles imbriqués dans la requête multimédia.
Cette section présente la mise en forme et le positionnement.
CSS Designer offre une interface visuelle pour vous aider à définir la mise en forme et le positionnement des feuilles de style CSS. Par exemple, la règle nav a de main.css illustre le résultat des paramètres de marge et de marge intérieure (voir Figure 15).
Pour en savoir plus sur la mise en forme et le positionnement, visionnez la vidéo Comprendre le modèle de boîte pour obtenir une démonstration.
Après vous être initié aux feuilles de style CSS et avoir appris à les lire et les modifier dans Dreamweaver, vous souhaiterez peut-être consulter les autres ressources disponibles sur le web pour approfondir ces concepts.
Mozilla Developer Network (MDN) est une excellente ressource pour le développement web en général et comprend une section complète intitulée Learn to style HTML using CSS . Consultez la page CSS selectors de QuirksMode pour découvrir comment les différents navigateurs prennent en charge les types de sélecteur. Les tutoriels How to Use CSS Pseudo-Classes et Learning To Use The :after And :before Pseudo-Elements In CSS fournissent des informations plus détaillées sur l’utilisation des pseudo-classes.
Contribution
Brian Rinaldi