Introduction
This chapter demonstrates about the W3.CSS Containers. Which is the primary class to style all the elements containers. Following are the concepts are covered in this chapter.
- Container Class
- Container Padding & Sectioning
Description
W3 Container class is supported by all HTML container elements these elements are listed below.
If user added the container to the page then which provides equality for all HTML elements like margins, padding, alignments, fonts, colors. The code below demonstrates to adding the w3-container class to element.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div>
<h2>Without a Container</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-container">
<h2>With a Container</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can also add colors to the containers by just adding the w3-color class. The code below demonstrates the to adding color class to the container as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Without a Container</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<div class="w3-container w3-blue">
<h2>With a Container</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Headers and Footers
User can also style the header and footer container class by using the w3-container. The code below demonstrates header section of the page as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<header class="w3-container w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Simple Programming Lessons Tutorials.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Header section can be styled by using the <div> class also which is shown below. The code below demonstrates to creating a Header section with <div> class.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>Simple Programming Lessons Tutorials.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can style the footer section by using the w3-container footer class the code below demonstrates the styling the footer class as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<p>Simple Programming Lessons Tutorials.</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
<p>Simple Programming Lessons Tutorials.</p>
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can style the footer section by using the w3-container div class the code below demonstrates the styling the footer class as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<p>Simple Programming Lessons Tutorials.</p>
</div>
<div class="w3-container w3-blue">
<h5>Footer</h5>
<p>Simple Programming Lessons Tutorials.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Article and Sections
User can style the <article> and <section> by using the w3-container class. The code below demonstrates the styling the Article and section by using the w3-container as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>SPLessons</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
<hr>
</div>
<article class="w3-container">
<h2>SPLessons</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
<hr>
</article>
<section class="w3-container">
<h2>SPLessons</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
<hr>
</section>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- <div> Which is used to provide a generic container to HTML Content.
- <header> Which is used to represent header section of the page.
- <footer> Which is used to represent the footer section of the page.
- <article> Which is used to represent the articles of the page.
- <section> Which is used to provide a generic container for different sections.
Description
User can give padding to the text by using w3-container class which gives 16px left and right padding by default and which does not gives top and bottom padding. The code below demonstrates the left and right padding as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
To enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
W3-container does not have any top and bottom margins which should display the containers without margins. User can separate the containers by using w3-section which is shown in below code.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Sections</h2>
<p>To enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
<div class="w3-container w3-section w3-blue">
<h1>Heading</h1>
<p>SPLESSONS.</p>
</div>
<div class="w3-container w3-section w3-red">
<h1>Heading</h1>
<p>SPLESSONS</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Section will seperate the containers.
- w3-container will not have any top and bottom margins.
- w3-container styled by srticle and section elements.