W3.CSS: wat het is en hoe je het kunt gebruiken

W3.CSS vormt samen met W3.JS en W3Data.JS een platform voor het maken van responsive websites.

W3.CSS is een CSS-bibliotheek, die het toepassen van een aantal regelmatig voorkomende functies een stuk eenvoudiger maakt.

Op het moment dat dit wordt geschreven is het versie-nummer 4.72. Het wordt actief ontwikkeld en onderhouden.
De meest opvallende eigenschappen zijn:

• Klein, zeker in vergelijking met andere CSS-bibliotheken met een zelfde functionaliteit. Door de geringe omvang laadt het snel.
• Eenvoudig aan te leren. De leercurve is vlak.
• Alleen standaard CSS. Een JavaScript-bibliotheek zoals jQuery of W3.JS is niet nodig.
• Responsive design (mobile first) wordt standaard ondersteund.
• Draait op alle moderne browsers.

Bij de naam W3 denk je al gauw aan W3C, het WorldWide Web Consortium. Hier gaat dat niet op. W3.CSS wordt gemaakt door w3schools, een website van Refsnes Data, een software en consulting bedrijf uit Noorwegen.

Je kunt W3.CSS direct vanaf de w3schools-server (een CDN) in je document opnemen. Op w3schools vind je de juiste URL. Je kunt W3.CSS ook zelf downloaden en hosten. De code om W3.CSS in je document op te nemen luidt:
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">

Wat kun je met W3.CSS?
W3.CSS stelt een groot aantal klassen beschikbaar voor het maken van een lay-out van je website. Die zijn onder te verdelen in 20 groepen.
Het voert te ver om al die klassen allemaal apart te bespreken. We beperken ons hier tot een opsomming van de groepen met daarbij een beknopte beschrijving.

• Container. Hiermee stel je de opmaak in, zoals marges en uitlijning. Je maakt er ook mooie lijsten mee, ovale badges, enz.
  De klassen in deze groep worden het meest gebruikt.
• Table. Opmaak van een tabel: Randen, lettergrootte, om-en-om strepen, enz.
• Card. Sub-containers voor elk gewenst HTML-element
• Responsive. Hiermee maak je een responsive grid, dat bestaat uit 12 kolommen, met instellingen voor smalle, normale en brede schermen. Kolommen kunnen worden samengevoegd tot van ½, ¼, ¾, ⅓ en ⅔ van de rij-breedte.
  Op dit punt lijkt W3.CSS op Bootstrap, maar W3.CSS is minder zwaar.
• Layout. Uitlijning van een (deel van) een grid-cel.
• Navigation. Knoppen-balken, zowel horizontaal als verticaal. Kan worden voorzien van een afrolmenu.
• Button. Knoppen in allerelei soorten en maten
• Input. Invoervelden voor een formulier.
• Modal. Maakt een modal dialog.
• Animation. HTML-elementen komen het scherm inschuiven van boven, onder, links of rechts. Er zijn ook zoom en fade-effecten.
• Font and Text. Lettergrootte en -uiterlijk.
• Display. Allerhande opmaak: Links uitgelijnd, rechts uitgelijnd,
• Effect. Doorzichtigheid, Grijs- en sepia-effect.
• Background Color. Spreekt voor zichzelf.
• Text Color. Spreekt voor zichzelf.
• Hover. Elementen die veranderen als de muis er overheen gaat.
• Round. Afgeronde hoeken
• Padding. Binnenmarge van een element.
• Margin. Buitenmarge van een element.
• Border. Kleur van de rand van een element. Heeft ook hover-effecten.

Opmerkingen:

• Ogenschijnlijk zijn er wat beperkingen aan dit framework. Zo wordt er een beperkt aantal kleuren gebruikt en hebben sommige animaties een vastgelegde tijdsduur. Dit soort zaken kun je eenvoudig opvangen door je eigen klassen toe te voegen. Houd je daarbij aan de programmeerstijl waarin W3.CSS is opgebouwd, dan werkt het zeker.
  Zet je eigen klassen niet in het bestand w3.css, om te voorkomen dat je ze kwijtraakt door een nieuwe versie van W3.CSS.
   
• Voor W3.CSS is een groot aantal website-templates beschikbaar. Die mag je gratis downloaden en gebruiken. Je wordt aangemoedigd ze voor je eigen doeleinden aan te passen en in te zetten.
   
• W3.CSS maakt gebruik van een deel van normalize.css, om te voorkomen dat browser-defaults de opmaak van de pagina verstoren. Normalize.css is een veel gebruikte css-reset.
  Behalve normalize.css moet je ook wat doen om te zorgen dat het gedrag van binnen- en buitenmarges in alle browsers consistent is. Dat doe je met deze CSS-regel, die ook in w3.css staat: html {box-sizing:border-box}*, *:before,*:after {box-sizing:inherit}
  Zie ook het item Over Box-sizing.
   
• W3.CSS is ontwikkeld voor mobile-first. Dat betekent dat bezoekers met mobiele apparaten (zoals smartphones) het uitgangspunt zijn voor het ontwerp van de website. De ontwerpen voor grotere schermen zijn daarvan afgeleid.
  Om te zorgen dat de lay-out van je site zich op alle apparaten goed gedraagt moet je een <meta>-tag opnemen in de <head> van je site:
  <meta name="viewport" content="width=device-width, initial-scale=1">
   

Tenslotte:
 
Om een responsive framework zoals W3.CSS goed te leren gebruiken moet je het goed leren kennen. Om het goed te leren kennen moet je het vaak gebruiken.