One thing that you will notice pretty quickly is that many of the elements
are pre-made. They make excellent building blocks using ready-made margins,
sizes, etc..., so that you can spend more time creating the page , rather than
reinventing the multitude of elements, attributes and settings from scratch. Of
course if you wish to customize any of the elements, you will have a ready-made
model to work from.
Containers
HTML uses many container elements like <div>, <article>,
<section>, <header>, and <footer>.
The W3.CSS container class is the perfect CSS class for
these elements.
Example
<div class="w3-container">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<div class="w3-text w3-container w3-teal">
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,
to have seating for one to eight people,
to typically have four wheels. (Wikipedia)
</div>
The container class has padding of 1px (top and bottom), and 16px (left
and right).
If you want to change the padding for a container, you can use a padding
class:
Example
<div class="w3-container w3-padding-32 red">
<h2>London</h2>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, to have seating for one to eight people, to typically have for one to
eight people, to typically have four wheels. (Wikipedia)
<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,
to have seating for one to eight people, to typically have for one to eight
people,
to typically have four wheels. (Wikipedia)
</p>
</div>
<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,
to have seating for one to eight people, to typically have for one to eight
people,
to typically have four wheels. (Wikipedia)
</p>
</article>
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, to have seating for one to eight people, to typically have for one to
eight people, to typically have four wheels. (Wikipedia)
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, to have seating for one to eight people, to typically have for one to
eight people, to typically have four wheels. (Wikipedia)
<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,
to have seating for one to eight people, to typically have for one to eight
people,
to typically have four wheels. (Wikipedia)</p>
</div>
The width of the third class is 1/3 of the parent element
(style="width:33.33%").
On screens smaller than 601 pixels it resizes to 100%.
w3-third
w3-third
w3-third
Example using third
<div class="w3-row">
<div class="w3-container w3-third">
<h2>w3-third</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
<p>This is a paragraph</p>
</div>
</div>
The width of the quarter class is 1/4 of the parent
element (style="width:25%").
On screens smaller than 601 pixels it resizes to 100%.
w3-quarter
Example using w3-quarter
<div class="w3-row">
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
<p>This is a paragraph</p>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
<p>This is a paragraph</p>
</div> </div>
<ul class="w3-ul">
<li>
<h3>Frozen</h3>
<p>The social media response
to the animations was ridiculous.</p>
</li>
<li>
<h3>The Fault in Our Stars</h3>
<p>Touching, gripping and genuinely well made.
</p>
</li>
<li>
<h3>The Avengers</h3>
<p>The Avengers is a hugely bankable franchise for
Marvel and Disney.</p>
</li>
</ul>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
Example
<div class="w3-container
orange">
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="w3-container w3-red">
<p>London is the capital city of England. It is the most populous city in
the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
Example
<div class="w3-padding-jumbo orange">
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="w3-padding-16 orange">
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over
13 million inhabitants.
</p>
</div>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
Example
<div class="w3-border-left border-right">
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="w3-border-left border-right">
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
Example
<div class="w3-border-left border-right">
<p>
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
But the most common elements are <input>, <button>, and
<a>:
Buttons have the ability to add eye candy to a normally drab page and
encourage more user interaction with the page. As you will see, there are many
options available to make buttons that stand out and beg for interaction.
