W3.CSS Case Study
Building a Responsive Web Site
In this chapter, we build a responsive W3.CSS website step by step.
We start with a simple page and add containers, colors, layout, navigation, and responsive design.
Start With a Simple Page
Start with a basic HTML page, a viewport setting, and a link to W3.CSS:
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https:/edu/w3css/5/w3.css">
<body>
<h1>My First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Try it Yourself »
Put Elements in Containers
Use w3-container to add common padding around page content.
Separate the header from the main content with different container elements:
Example
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Try it Yourself »
Color Classes
W3.CSS color classes define the foreground and background colors of elements.
This example adds w3-light-grey to the first container:
Example
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Try it Yourself »
Size Classes
W3.CSS size classes can be used to change text size.
This example uses w3-jumbo and w3-xxlarge:
Example
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Try it Yourself »
Use Semantic Elements
Semantic HTML elements can make the page structure easier to understand.
W3.CSS classes work with semantic elements such as <header>, <main>, and <footer>, as well as with <div>.
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https:/edu/w3css/5/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Try it Yourself »
Responsive Columns
W3.CSS makes it easy to create responsive multi-column layouts.
The columns adapt automatically on different screen sizes.
For the classic W3.CSS responsive column system:
Note: For new layouts, you can also use w3-flex or w3-grid. The row and column classes remain useful for simple responsive layouts.
- Start with
w3-roworw3-row-padding - Use classes such as
w3-third,w3-half, andw3-quarter - Place your text content inside the grid columns
This example shows how to create three columns of equal width:
Example
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Try it Yourself »
This example shows how to create four columns of equal width:
Example
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Try it Yourself »
Columns With Different Widths
This example creates a three-column layout where the column in the middle is wider than the first and last column:
Example
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Try it Yourself »
Navigation Bars
Use w3-bar to create a traditional navigation bar:
Example
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Try It Yourself »
Side Navigation
Use w3-sidebar for side navigation.
This example opens the navigation pane over the left part of the page content:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
Use JavaScript to open and close the sidebar:
const sidebar = document.getElementById("mySidebar");
function w3_open() {
sidebar.style.display = "block";
}
function w3_close() {
sidebar.style.display = "none";
}
Try It Yourself »
