Voir la source de W3.CSS

== Introduction ==

[https://www.w3schools.com/w3css/ W3.CSS] est une bibliothèque (''framework'' en anglais) [[CSS]]. L'ajout de cette bibliothèque à votre page [[HTML]] vous permettra de gérer le style de n'importe quelle de vos balises. Par exemple, [https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors vous souhaitez modifier votre texte afin de l'encadrer de rouge], ajoutez simplement la classe correspondante à votre balise et le tour est joué. [[W3.CSS#Installation | Voir plus bas l'implémentation de la bibliothèque à votre page HTML]].

Plus généralement, [https://www.w3schools.com/w3css/ W3.CSS] permet aussi le développement d'applications web "réactives" (en anglais : 'responsive'), c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).

=== Avantages ===

* '''Égalité d'implémentation''' quelque soit le moteur de recherche que vous utilisez (Chrome, Fireforx, Edge, IE, Safari, Opera) et quelque soit le support utilisé (Ordinateur de bureau/ portable, tablette, mobile).
* '''CSS uniquement''' : pas besoin d'utiliser de bibliothèques comme jQuery ou JavaScript.
* '''Facilité d'utilisation''' : si vous savez implémenter une classe dans une balise, c'est tout ce qu'il faut.

== Comparaison avec Bootstrap == 

''Traduit de https://blog.hubspot.com/website/w3-css-vs-bootstrap''

;Facilité d'utilisation
* W3.CSS n'utilise que [[HTML]] et [[CSS]]. À l'inverse, Bootstrap utilise aussi [[Javascript]] mais surtout pour les menus déroulants donc la plupart du temps le framework Bootstrap se fera sans JavaScript.
* W3.CSS est considéré comme un framework plus facile de prise en main et plus rapide à apprendre.
* Cependant si vous vous donnez du temps à apprendre Bootstrap, vous aurez accès à plus de puissance avec ce dernier (menus déroulants, carousels, etc.)
; '''Rapidité'''
* Si vous téléchargez chaque framework dans leur entièreté, W3.CSS est plus léger en terme d'espace mémoire, donc plus rapide.
* Cependant vous n'êtes pas obligés de télécharger Bootstrap dans son entièreté et il est conseillé de choisir ce dont il vous faut.
; '''Utilisation dans le web'''
* W3.CSS semble être un framework moins populaire sur internet comparativement à Bootstrap. Mais à noter que W3CSS a été publié en 2016, soit six ans après la première version de Bootstrap.

== Installation ==

W3.CSS peut être installé tout simplement en incorporant le fichier .css dans la page HTML qui l'utilise. Pour ce faire vous pouvez :

# Télécharger la dernière version (4.15 au moment de l'écriture de cette page, version de Décembre 2020) depuis le [https://www.w3schools.com/w3css/4/w3.css site officiel]
# Utilisez le lien en ligne de w3.css.

=== Fichier téléchargé ===

Téléchargez votre fichier w3.css depuis le [https://www.w3schools.com/w3css/4/w3.css site officiel].

Puis incorporez le fichier w3.css comme lien dans l'entête de votre code :

<source lang="HTML5">
<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/mondossierquicontient/w3.css">
</source>

'''Pensez à bien modifier le chemin d'accès à votre fichier w3.css'''

=== Lien au site ===

Le site officiel vous conseille d'utiliser le chemin de sa propre page web qui propose la dernière version de la bibliothèque :

<source lang="HTML5">
<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</source>

== Quelles utilisations de la bibliothèque ==

Vous aurez la possibilité de modifier toutes vos balises selon vos envies. Par exemple, vous pourrez modifier la taille des '[https://www.w3schools.com/w3css/w3css_containers.asp containers]', des '[https://www.w3schools.com/w3css/w3css_panels.asp panels]', la [https://www.w3schools.com/w3css/w3css_colors.asp couleur], créer des [https://www.w3schools.com/w3css/w3css_tables.asp tableaux], rendre la page '[https://www.w3schools.com/w3css/w3css_responsive.asp réactive]', ajouter des [https://www.w3schools.com/w3css/w3css_animate.asp animations], créer des [https://www.w3schools.com/w3css/w3css_progressbar.asp barres de progression], montrer du [https://www.w3schools.com/w3css/w3css_code.asp code] et bien plus encore.

W3.CSS permet ''in fine'' d'éviter d'écrire votre propre fichier .css.

Un aperçu '''global''' des fonctionnalités de W3.CSS se trouve '''[https://www.w3schools.com/w3css/w3css_intro.asp ici]'''.

L''''intégralité''' des fonctionnalités de W3.CSS se trouve sur le bandeau de gauche de '''[https://www.w3schools.com/w3css/default.asp cette page]'''.

== Comment utiliser la bibliothèque ==

En général, il suffit d'ajouter une classe à la balise que vous souhaitez modifier et le tour est joué. 

À noter que chaque classe de w3.css commence par le préfixe '''w3-''' , par exemple : '''w3-'''container, '''w3-'''teal, '''w3-'''input, etc.

Par exemple, pour une animation d'un texte arrivant de la droite il suffit d'ajouter à la balise souhaitée la classe ''w3-animate-right'' :

<source lang="HTML5">
<div>
  <h1 class="w3-animate-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</source>

L'exemple peut être testé [https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_animate-right ici].

== Ressources ==

=== Liens ===
* [https://www.w3schools.com/w3css/ Site officiel]
* [https://blog.hubspot.com/website/w3-css-vs-bootstrap Comparaison avec Bootstrap] 

[[Catégorie: CSS]]
[[Catégorie: Ressources STIC]]