W3CSS Containers

Like colors classes, W3CSS frameworks contains a class that can be used to style container type elements such as divs, sections, headers, footers, articles, forms etc. The class used for W3CSS containers is w3-container. This class adds 16px padding to the left and right of an HTML element. This class can be used to style multiple container type elements in a similar style by adding uniform padding, margins, fonts, colors and alignments. We have already seen how w3-container class styles a div. Let us see how w3-container class styles rest of the container type elemements.

w3-container

Let’s see how w3-container class can be used to style header and footer elements. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <header class="w3-container w3-lime w3-text-blue">
        <h1>Welcome to Knowledge hills</h1>
    </header>
    
    <footer class="w3-container w3-purple w3-text-white">
        <h5>Knowledgehills @ 2017</h5>
    
    </footer>
    


</body>

</html>

Download the code Try the code

In the above web page, we have a header and a footer. The w3-container class has been added to both of them. Inside the header we have an h1 heading while inside the footer we have an h5 heading. The background colors and text colors of both the header and footer have been set. You can see that both header and footer have same fonts, common margin, padding and alignment.

Styling Articles and Sections

Like header and footer, w3-container class can also add predefined styles to articles and section elements. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-container w3-teal"> 
  <h2>HTML</h2>
  <p>Used to create structure of a website.</p>
</div>

<article class="w3-container w3-yellow"> 
  <h2>CSS</h2>
  <p>Used to style contents of a website</p>
</article>

<section class="w3-container w3-purple"> 
  <h2>JavaScript</h2>
  <p>Used to add animations to a web page.</p>
</section>    


</body>

</html>

Download the code Try the code

Take a look at the above web page. It contains two articles and one section. The background colors of the article elements have been set to teal and yellow, while background for section is set to purple. You can see that article, and section both have same margin, padding, font and alignments. It is interesting to see that depending upon the background color, w3css framework automatically changes the fore-color to improve color contrast. For instance, fore-color for teal and purple is white while for yellow, it is black.

Now we have enough knowledge about W3CSS containers, In the next article, we shall study W3CSS borders.

<<< W3CSS Hover ColorsW3CSS Borders >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .