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.
what-is-css_1408x792

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.

Démarrage avec un projet d'exemple

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.

  1. Rendez-vous sur initializr.com dans un navigateur web pour démarrer un projet Initializr HTML5.
  2. 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.

Figure 1. Options pour créer le projet Initializr
Figure 1. Options pour créer le projet Initializr
  1. Téléchargez le fichier ZIP et décompressez-le dans un dossier sur votre ordinateur.
  2. Lancez Dreamweaver.
  3. 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 pour postes de travail et vérifiez que Dreamweaver est à jour (voir Figure 2).

Figure 2. Indicateur À jour dans l'application Creative Cloud pour postes de travail
Figure 2. Indicateur À jour dans l'application Creative Cloud pour postes de travail
  1. Activez les modes Fractionner et En direct pour prévisualiser le résultat et afficher le code source.
  2. Remarque : dans ce tutoriel, activez les modes Fractionner et En direct pour afficher les pages, et sélectionnez main.css dans la barre d'outils Document (voir Figure 3) pour voir comment les paramètres de CSS Designer sont directement répercutés sur les feuilles de style CSS en mode Code.

Figure 3. Fichier main.css sélectionné dans la barre d'outils Document avec les modes Fractionner et En direct activés
Figure 3. Fichier main.css sélectionné dans la barre d'outils Document avec les modes Fractionner et En direct activés

Principes de base des feuilles de style CSS

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.

Utilisation de CSS Designer dans Dreamweaver    

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 <style> 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.

  1. 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).
  2. Remarque : réduisez ou fermez le panneau Fichiers afin d'agrandir l'espace disponible pour CSS Designer.

Figure 4. CSS Designer en mode Développé
Figure 4. CSS Designer en mode Développé
  1. 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.
  2. L'exemple de document comprend deux fichiers CSS externes : normalize.min.css et main.css (voir Figure 5).

Figure 5. Méthodes d’association d’une source CSS à une page web
Figure 5. Méthodes d’association d’une source CSS à une page web
  1. Cliquez sur main.css. Les sélecteurs définis dans la feuille de style apparaissent dans la section Sélecteurs.

Cascade en CSS    

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.

Spécification des propriétés de police par défaut

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.

  1. Cliquez sur main.css dans la section Sources de CSS Designer.

  2. Cliquez sur html, button, input, select, textarea dans la liste Sélecteurs.

  3. 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.
  4. La propriété color est définie sur un élément de haut niveau (html dans ce cas) et se propage en cascade à la plupart des éléments qu'il contient.

  5. Cliquez sur le sélecteur de couleurs et choisissez une nouvelle couleur pour voir comment cela fonctionne (voir Figure 6).
  6. Notez que les éléments paragraph et header changent également de couleur, car la propriété color se propage en cascade de l'élément html aux éléments qu'il contient. Notez également que le texte blanc dans l'en-tête demeure inchangé car ce type d’éléments définit sa propre couleur de texte en passant outre la couleur héritée de la balise HTML.

Figure 6. Changement de couleur de l'élément html propagé en cascade aux éléments qu'il contient
Figure 6. Changement de couleur de l'élément html propagé en cascade aux éléments qu'il contient
  1. Redéfinissez la couleur sur #222.

Spécification des propriétés CSS depuis plusieurs emplacements

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 :

p {color: blue;}

Définissez ensuite la taille de la police dans les paragraphes à 10 pixels dans normalize.min.css en procédant comme suit :

p {font-size:10px;}

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.

Utilisation des sélecteurs

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.

Sélecteur d'élément (type)

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.

  1. Ajoutez une balise <hr> dans index.html. Sélectionnez le mode Fractionner et ajoutez <hr> 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.

  2. 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).

  3. 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;
  1. 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).
Figure 7. Choix de la couleur dans la bordure supérieure
Figure 7. Choix de la couleur dans la bordure supérieure

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 <hr> se sont vu attribuer la couleur orange (voir Figure 8).

Figure 8. Page mise à jour avec les éléments <hr> orange
Figure 8. Page mise à jour avec les éléments <hr> orange

Le code CSS, comme illustré en mode Code, reflète la règle que vous avez modifiée dans CSS Designer :

hr { 	
   display: block; 	
   height: 1px; 	
   border-left: 0; 	
   border-right: 0; 	
   border-bottom: 0; 	
   border-top: 1px solid #EC6433; 	
   margin: 1em 0; 	
   padding: 0; 
}

Sélecteur de classe

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.

Classe CSS

.intro {
   color: #ccc;
   font-size: 10px;
}

Balise HTML

<p class="intro">

Suivez les étapes ci-après pour examiner l'un des sélecteurs de classe dans le projet d'exemple.

  1. Cliquez sur la classe .header-container dans la section Sélecteurs de CSS Designer.

  2. 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
  1. 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.
.header-container {
    border-bottom: 20px solid #e44d26;
}
Figure 9. Mode Code montrant la feuille de style CSS avec la propriété header-container mise en forme à l'aide de CSS Designer
Figure 9. Mode Code montrant la feuille de style CSS avec la propriété header-container mise en forme à l'aide de CSS Designer
  1. 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.

  2. 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).
Figure 10. Survol d'un sélecteur
Figure 10. Survol d'un sélecteur

La feuille de style CSS ci-dessous reflète les sélections effectuées dans CSS Designer.

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

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.

Sélecteur d'ID

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 :

<div id="main"></div>

Pour mettre en forme cet élément dans la feuille de style CSS, vous pouvez utiliser un sélecteur d'ID de ce type :

#main {
    background: #f16529;
}

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.

Sélecteurs descendants et enfants

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.

  1. Recherchez nav a dans la section Sélecteurs et assurez-vous que la case Ensemble est cochée.

  2. Comparez les propriétés définies dans CSS Designer avec la feuille de style CSS définie en mode Code (voir Figure 11).
Figure 11. Sélection de propriétés CSS pour les éléments de navigation
Figure 11. Sélection de propriétés CSS pour les éléments de navigation

Le mode Code montre la feuille de style CSS correspondante :

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

Dans ce cas, vous sélectionnez tout élément <a> qui descend d'un élément <nav>. Le modèle Document Object Model (DOM) définit la structure d'une page HTML comme une arborescence d'éléments. Dans cette arborescence, tout élément HTML contenu dans un autre élément HTML est considéré comme un descendant. Examinez les lignes 20 à 26 du fichier d'exemple HTML :

<nav>
    <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
    </ul>
</nav>

Dans le fichier HTML ci-dessus, trois éléments HTML sont des descendants de l'élément <nav> : <ul>, <li> et <a>.

Le sélecteur descendant ci-dessus mettra en forme les éléments <a> situés sous l'élément <nav>, quel que soit le nombre de niveaux qui les séparent.

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 :

nav > a {
    ...
}

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 <a> situé un niveau en dessous de l'élément <nav>. Voici un contre-exemple :

nav > ul {
    ...
}

Comme l'élément <ul> se trouve directement en dessous de l'élément <nav> et n'est pas inclus dans une autre balise, ce sélecteur enfant s'appliquerait à cet é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.

Sélecteur *

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).

Figure 12. Sélecteur universel dans le projet d'exemple
Figure 12. Sélecteur universel dans le projet d'exemple

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.

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
 }

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 :

.main * {
    ...
}

Pseudo-classes et pseudo-éléments

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 <a>), 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 <a>) sont mis en forme sur la page, ce qui constitue l'utilisation la plus fréquente des pseudo-classes (voir Figure 13).

Figure 13. Définition de propriétés de pseudo-classe dans CSS Designer
Figure 13. Définition de propriétés de pseudo-classe dans CSS Designer

Activez le mode Code dans la feuille de style CSS correspondante.

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

Le premier sélecteur recherche les balises <a> de l'élément <nav> dans les états « survol » et « visité » (« visité » étant un lien sur lequel l'utilisateur a déjà cliqué). Il attribue la couleur blanche au texte pour passer outre toute mise en forme par défaut des liens pouvant exister. Le second sélecteur recherche les balises <a> de l'élément <nav>, également dans l'état « survol », et les définit comme soulignées. Ainsi, les liens ne sont pas soulignés par défaut. Ils le sont lorsque le pointeur de la souris les survole.

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 :

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

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 <li>, qui est un enfant de l'élément <nav>, et lui applique une marge gauche. Le second sélecteur applique une marge droite au dernier élément <li>, qui est un enfant de l'élément <nav>.

Autres sélecteurs

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.

Présentation des requêtes multimédias

Les requêtes multimédias vous permettent de définir des styles pour différents types de sorties et de terminaux, tels que les terminaux mobiles, les tablettes et les ordinateurs de bureau. 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.

  1. Sélectionnez print dans la section @Requêtes multimédias de CSS Designer.
  2. Cliquez sur le sélecteur universel (*) et examinez ses propriétés (voir Figure 14).
Figure 14. Requêtes multimédias dans CSS Designer
Figure 14. Requêtes multimédias dans CSS Designer
  1. 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.

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

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 :

a[href]:after {
    content: " (" attr(href) ")";
}

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 postes de travail, tablettes et téléphones, et autres terminaux.

L'expression ci-après provient de main.css.

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

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.

Utilisation des feuilles de style CSS pour la mise en forme et le positionnement  

Cette section présente la mise en forme et le positionnement. Le tutoriel Learn CSS Layout couvre les principes de base de la gestion de la mise en forme et du positionnement dans les feuilles de style CSS.

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).

Figure 15. Paramètres de marge et de marge intérieure dans CSS Designer
Figure 15. Paramètres de marge et de marge intérieure dans CSS Designer

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.

Pour aller plus loin

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 CSS. Consultez 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 :before and :after Pseudo-Elements in CSS fournissent des informations plus détaillées sur l'utilisation des pseudo-classes.

07/06/2018
Brian Rinaldi
Cette page vous a-t-elle été utile ?