W3.CSS - Guide rapide

Qu'est-ce que W3.CSS?

W3.CSS est une feuille de style en cascade (CSS) développée par w3schools.com . Cela aide à créer des sites Web plus rapides, beaux et réactifs. Il est inspiré de Google Material Design.

Certaines de ses principales caractéristiques sont les suivantes:

Conception réactive intégrée
CSS standard
Inspiré par Google Material Design
Utilisation gratuite

Conception réactive

W3.CSS a intégré une conception réactive afin que le site Web créé à l'aide de W3.CSS se reconcevant en fonction de la taille de l'appareil.
W3.CSS dispose d'une grille fluide de 12 colonnes mobile first qui prend en charge les classes réactives pour les tailles d'écran petites, grandes et moyennes.
Les classes W3.CSS sont créées de manière à ce que le site Web puisse s'adapter à n'importe quelle taille d'écran.
Les sites Web créés avec W3.CSS sont entièrement compatibles avec les PC, les tablettes et les appareils mobiles.

CSS standard

W3.CSS utilise uniquement le CSS standard et il est très facile à apprendre.
Il n'y a aucune dépendance sur une bibliothèque JavaScript externe telle que jQuery.

Conception matérielle

W3.CSS est inspiré de Google Material Design.
Il prend en charge la conception de type papier.
Il prend en charge les ombres et les couleurs vives.
Les couleurs et les nuances restent uniformes sur diverses plates-formes et appareils.

Et le plus important de tous, son utilisation est absolument gratuite.

Comment utiliser W3.CSS?

Il existe deux façons d'utiliser W3.CSS -

Local Installation - Vous pouvez télécharger le fichier W3.CSS sur votre machine locale et l'inclure dans votre code HTML.
CDN Based Version - Vous pouvez inclure le fichier W3.CSS dans votre code HTML directement à partir du Content Delivery Network (CDN).

Installation locale

Aller à https://www.w3schools.com/w3css/w3css_downloads.asp pour télécharger la dernière version disponible.
Ensuite, placez le fichier w3.css téléchargé dans un répertoire de votre site Web, par exemple / css.

Exemple

Vous pouvez maintenant inclure le fichier css dans votre fichier HTML comme suit -

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Cela produira le résultat suivant -

Version basée sur CDN

Vous pouvez inclure le fichier W3.CSS dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN). W3Schools.com fournit du contenu pour la dernière version.

Note - Nous utilisons la version CDN W3Schools.com de la bibliothèque tout au long de ce tutoriel.

Exemple

Réécrivons maintenant l'exemple ci-dessus en utilisant la bibliothèque jQuery du CDN W3Schools.com.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Cela produira le résultat suivant -

HTML5 contient les éléments de conteneur suivants -

<div> - Fournit un conteneur générique au contenu HTML.
<header> - Représente la section d'en-tête.
<footer> - Représente la section de pied de page.
<article> - Représente des articles.
<section> - Fournit un conteneur générique pour différents types de sections.

W3.CSS fournit w3-containercomme classe principale pour styliser tous les conteneurs mentionnés ci-dessus. W3.CSS a également d'autres classes commew3-border, w3-red, w3-teal, w3-padding-32 pour ajouter d'autres attributs de style aux conteneurs.

Exemple

L'exemple suivant présente l'utilisation de la classe w3-container pour styliser divers conteneurs.

w3css_containers.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      
      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>
      
      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>
      
      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>
      
      <footer class = "w3-container w3-red">
         <p>Copyright @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS fournit également aux conteneurs une capacité de masquage / fermeture. Voir l'exemple suivant -

w3css_hide_container.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS fournit un excellent support pour la coloration syntaxique des langages suivants -

HTML - Utilisez les classes w3-code htmlHigh sur le conteneur contenant du code HTML.
CSS - Utilisez les classes w3-code cssHigh sur le conteneur ayant le code CSS.
JS - Utilisez les classes w3-code jsHigh sur le conteneur ayant le code CSS.

Vous devez inclure le script suivant pour avoir un lien vers le fichier js pour avoir la prise en charge de la coloration syntaxique -

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS a plusieurs classes spéciales pour afficher les conteneurs sous forme de cartes de type papier avec une ombre.

Sr. No.	Nom et description de la classe
1	w3-card Stylise un conteneur pour tout contenu HTML avec bordure
2	w3-card-2 Met en forme un conteneur pour tout contenu HTML avec une ombre bordée de 2 pixels
3	w3-card-4 Styles un conteneur pour tout contenu HTML avec une ombre bordée 4px
4	w3-card-8 Met en forme un conteneur pour tout contenu HTML avec une ombre bordée de 8 pixels
5	w3-card-12 Met en forme un conteneur pour tout contenu HTML avec une ombre bordée de 12 pixels

Exemple

w3css_cards.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <style>
         div {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS a plusieurs classes spéciales pour créer un design réactif.

Sr. No.	Nom et description de la classe
1	w3-half Définit le conteneur pour qu'il occupe 1/2 ^ème de la fenêtre sur les appareils à écran moyen ou grand. Si un écran est inférieur à 601 pixels, il redimensionne le conteneur à 100%.
2	w3-third Définit le conteneur pour qu'il occupe 1/3 ^ème de la fenêtre sur les appareils à écran moyen ou grand. Si un écran est inférieur à 601 pixels, il redimensionne le conteneur à 100%.
3	w3-quarter Définit le récipient pour occuper 1/4 ^e de la fenêtre sur les appareils à écran moyennes ou grandes. Si un écran est inférieur à 601 pixels, il redimensionne le conteneur à 100%.
4	w3-col Spécifie une colonne dans une grille de 12 colonnes.
5	w3-row Spécifie un conteneur sans remplissage à utiliser pour les classes réactives. Cette classe est obligatoire pour que les classes réactives soient entièrement réactives.

Exemple

w3css_responsive_design.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS fournit une grille sensible aux fluides à 12 colonnes.

Il utilise les classes de style w3-row et w3-col pour définir respectivement des lignes et des colonnes.

Sr. No.	Nom et description de la classe
1	w3-row Spécifie un conteneur sans remplissage à utiliser pour les colonnes réactives. Cette classe est obligatoire pour que les classes réactives soient entièrement réactives.
2	w3-col Spécifie une colonne avec des sous-classes

w3-col a plusieurs sous-classes destinées à différents types d'écrans.

Colonnes pour les appareils à petit écran

Voici une liste de styles au niveau des colonnes pour les appareils à petit écran, généralement les smartphones.

Sr. No.	Nom et description de la classe
1	s1 Définit 1 des 12 colonnes avec une largeur de 08,33%.
2	s2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	s3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	s4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
5	s12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les téléphones à petit écran.

Colonnes pour les appareils à écran moyen

Voici une liste de styles au niveau des colonnes pour les appareils à écran moyen, généralement les tablettes.

Sr. No.	Nom et description de la classe
1	m1 Définit 1 des 12 colonnes avec une largeur de 08,33%.
2	m2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	m3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	m4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
5	m12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les téléphones à écran moyen.

Colonnes pour les appareils grand écran

Voici une liste de styles au niveau des colonnes pour les appareils à grand écran, généralement les ordinateurs portables.

Sr. No.	Nom et description de la classe
1	\|1 Définit 1 des 12 colonnes avec une largeur de 08,33%.
2	\|2 Définit 2 des 12 colonnes avec une largeur de 16,66%.
3	\|3 Définit 3 colonnes sur 12 avec une largeur de 25,00%.
4	\|4 Définit 4 colonnes sur 12 avec une largeur de 33,33%.
5	\|12 Définit 12 colonnes sur 12 avec une largeur de 100%. Classe par défaut pour les appareils grand écran.

Usage

Chaque sous-classe détermine le nombre de colonnes de la grille à utiliser en fonction du type de périphérique. Considérez l'extrait de code HTML suivant.

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Les colonnes par défaut à utiliser sont 12 sur un appareil si une sous-classe n'est pas mentionnée dans l'attribut class d'un élément HTML.

Exemple

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS a un CSS très beau et réactif pour la conception de formulaires. Les CSS suivants sont utilisés -

Sr. No.	Nom et description de la classe
1	w3-group Représente un conteneur bordé. Peut être utilisé pour regrouper une étiquette et une entrée.
2	w3-input Embellit un contrôle d'entrée.
3	w3-label Embellit une étiquette.
4	w3-checkbox w3-checkmark Embellissez une case à cocher / un bouton radio.

Exemple

w3css_forms.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>
         
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>
         
         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>
            
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS a un CSS très beau et réactif pour personnaliser l'apparence d'un bouton. Les CSS suivants sont utilisés -

Sr. No.	Nom et description de la classe
1	w3-btn Représente un bouton standard. Peut également être utilisé pour styliser un lien comme bouton.
2	w3-btn-floating Représente un bouton flottant de conception circulaire.
3	w3-btn-floating-large Représente un gros bouton flottant.

Exemple

w3css_buttons.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>
      
      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>
      
      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>
      
      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS prend en charge un autre type d'infobulle utilisant la classe w3-tooltip. Jetez un œil à l'exemple suivant. Ici, nous avons mis un texte d'info-bulle dans un div et une image et appliqué w3-tooltip sur le div parent.

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

Exemple

w3css_tooltips.htm

<html>
   <head>
      <title>The W3.CSS Tooltips</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS peut être utilisé pour afficher une boîte de dialogue modale personnalisable au lieu de l'alerte JavaScript standard.

Il utilise des classes de style w3-row et w3-col pour définir respectivement les lignes et les colonnes.

Sr. No.	Nom et description de la classe
1	modal-dialog Représente la fenêtre principale parente pour définir une boîte de dialogue.
2	w3-modal-dialog Représente le conteneur de contenu de la boîte de dialogue.
3	w3-modal-content Représente le contenu de la boîte de dialogue.

Exemple

w3css_modal_dialog.htm

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS peut être utilisé pour afficher différents types de tableaux en utilisant différents styles sur w3-table.

Sr. No.	Nom et description de la classe
1	w3-table Représente une table de base sans aucune bordure.
2	w3-striped Affiche un tableau dépouillé.
3	w3-bordered Dessine un tableau avec une bordure sur les lignes.
4	w3-border Dessine un tableau avec des bordures.
5	w3-card Dessine une table comme une carte.
6	w3-responsive Dessine un tableau réactif pour afficher une barre de défilement horizontale, si l'écran est trop petit pour afficher le contenu.
sept	w3-tiny Dessine un tableau avec une très petite police.
8	w3-small Dessine un tableau avec une petite police.
9	w3-large Dessine un tableau avec une grande police.
dix	w3-xlarge Dessine un tableau avec une police extra large.
11	w3-xxlarge Dessine un tableau avec une police très extra large.
12	w3-xxxlarge Dessine un tableau avec une police extra large très haute.
13	w3-jumbo Dessine un tableau avec une grande police jumbo.

Exemple

w3css_tables.htm

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS peut être utilisé pour afficher différents types de listes en utilisant différents styles sur w3-ul.

Sr. No.	Nom et description de la classe
1	w3-ul Représente une liste de base sans aucune bordure.
2	w3-striped Affiche une liste supprimée.
3	w3-bordered Dessine une liste avec une bordure sur les lignes.
4	w3-border Dessine une liste avec bordure.
5	w3-card Dessine une liste sous forme de carte.
6	w3-tiny Dessine une liste avec une très petite police.
sept	w3-small Dessine une liste avec une petite police.
8	w3-large Dessine une liste avec une grande police.
9	w3-xlarge Dessine une liste avec une police extra large.
dix	w3-xxlarge Dessine une liste avec une police très extra large.
11	w3-xxxlarge Dessine une liste avec une police extra large très haute.
12	w3-jumbo Dessine une liste avec une grande police jumbo.

Exemple

w3css_lists.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS fournit des options pour afficher les images de manière belle et intéressante en utilisant w3-image comme classe principale.

Sr. No.	Nom et description de la classe
1	w3-image Représente une image de style de base sans aucune bordure.
2	w3-circle Affiche une image dans un cercle
3	w3-title Utilisé pour mettre du texte sur une image.
4	w3-card Dessine une image sous forme de carte.

Exemple

w3css_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>
      
      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      
      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>
      
      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS prend en charge les bibliothèques d'icônes populaires suivantes -

Icônes géniales de polices
Icônes matérielles Google
Icônes Bootstrap

Usage

Pour utiliser une icône, mettez le nom de l'icône dans la classe d'un élément HTML <i>. Pour contrôler la taille d'une icône, vous pouvez utiliser les classes suivantes -

Sr. No.	Nom et description de la classe
1	w3-tiny Dessine une icône de très petite taille.
2	w3-small Dessine une icône de petite taille.
3	w3-large Dessine une icône de grande taille.
4	w3-xlarge Dessine une icône de très grande taille.
5	w3-xxlarge Dessine une icône de très très grande taille.
6	w3-xxxlarge Dessine une icône de très grande taille extra large.

Exemple

w3css_icons.htm

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS prend en charge un riche ensemble de classes de couleurs. Ces classes de couleurs sont inspirées et développées en tenant compte des couleurs utilisées dans le marketing, la signalisation routière et les notes autocollantes.

w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-teal
w3-green
w3-light-green
w3-lime
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black

Thèmes de couleurs

W3.CSS fournit un excellent support pour appliquer un thème à un site Web en utilisant son thème du domaine public css. Certains des exemples sont donnés ci-dessous -

Sr. No.	Nom et description CSS
1	w3-theme-indigo.css CSS ayant des couleurs de variante Indigo
2	w3-theme-red.css CSS ayant des couleurs de variante rouge

Pour utiliser les thèmes, accédez à la https://www.w3schools.com/w3css/w3css_downloads.asp pour télécharger le fichier CSS requis.

Exemple

w3css_colors.htm

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS dispose de plusieurs classes spéciales pour afficher rapidement une barre de navigation ou un menu sur un site Web.

Sr. No.	Nom et description de la classe
1	w3-topnav Met en forme une liste sous forme de menu / barre de navigation horizontale.
2	w3-sidenav Met en forme une liste sous forme de menu vertical / barre de navigation.

Exemple

w3css_navigation.htm

<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

Résultat

Vérifiez le résultat.

W3.CSS a plusieurs classes d'utilité qui sont très utiles pour les besoins de conception quotidiens.

Color utility classes - Exemples: w3-rouge, w3-jaune
Padding utility classes - Exemples: w3-padding-jumbo, w3-padding-16
Margin utility classes - Exemples: w3-margin-8, w3-margin-64
Border utility class - Exemples: w3-border-left, w3-border-right
Size utility classes - Exemples: w3-tiny, w3-small
Circle utility class - Exemple: w3-circle
Center utility class - Exemple: w3-center

Exemple

w3css_utilities.htm

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.