W3.CSS framework: Recap 1

Here's a recap of the main things to note before you start playing with w3.css (acknowledgements to w3schools).

The w3.css uses containers as its main organizing principle, and then bolts on various classes to tailor text, images or animations to your needs. This makes the code very readable once you grasp the principle.

Containers and panels

The w3-container class adds a 16px left and right padding to any HTML element. It works with all HTML container elements such as <div>, <article>, <section>, <header>, <footer>, <form>, and more.

The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element. With other classes, such as w3-card-4 (4px bordered shadow), it can format your text as a card.

Type sizes

W3.CSS default font-size is 15px.

The default font is Verdana, good for web browsers.

The default line-spacing is 1.5.

h1: 36px, h2: 30px, h3:24px, h4: 20px, h5: 18px, h6: 16px.

See these in a page.

You can also specify font sizes as in standard HTML with:

w3-tiny, w3-small, w3-medium, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge,w3-jumbo.

See these by scrolling down the example page.

You can override all these defaults, preferably in a separate stylesheet but also in the head section of the page through the style tag, or (not recommended) downloading and editing w3.css. w3schools says version 4 is twice as fast as 3 and has a mobile version command.

Tip: Don't forget to put your sections in a container class.