W3.CSSContainers
This is my Header
This is my Article
This article is light grey and the text is brown.This article is light grey and the text is brown.This article is light grey and the text is brown.This article is light grey and the text is brown.This article is light grey and the text is brown.
This is my Footer
The Container Class
Thew3-container class adds a 16px left and right padding to any HTML element.
Thew3-container class is the perfect class to use for all HTML container elements like:
<div>, <article>, <section>, <header>, <footer>, <form>, and more.
Containers Provides Equality
Thew3-container provides equality for all HTML container elements:
- Common margins
- Common paddings
- Common alignments
- Common fonts
- Common colors
To use a container, just add aw3-container class to any element:
To add a color, just add aw3-color class:
Headers and Footers
Thew3-container class can be used to style headers:
Header
There is no difference in the way W3.CSS treats <div> and <header> elements.
Thew3-container class can be used to style footers:
Many web pages use <div> elements instead of <header> and <footer> elements.
Articles and Sections
Thew3-container class can be used to style <article> and <section> elements:
Example
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<article>
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>
Many web pages uses <div> elements instead of <article> and <section> elements.
Web Page Example
Header
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)
Example using HTML <div> elements
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div>
<h5>Footer</h5>
</div>
Example using HTML semantic elements
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car">
<article class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer>
<h5>Footer</h5>
</footer>
Container Padding
Thew3-container class has a default16px left and right padding, and no top or bottom padding:
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
