W3.CSS Case: W3.CSS Homepage
Build a W3.CSS Web Site From Scratch
In the following chapters we will build a W3.CSS website from scratch.
We will start with a simple HTML page, and then add more and more components, until we have a fully functional and responsive website.
First, start with a simple HTML page:
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<body>
<h1>My first W3.CSS website!</h1>
<p>This site will grow as we add more ...</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Try it Yourself »
Add W3.CSS
Then, add an initial viewport 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://www.noidatut.com/lib/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
Now we need to add a common margin and padding to all elements.
To achieve this, put all elements inside a container (<div class="w3-container">):
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://www.noidatut.com/lib/w3.css">
<body>
<div class="w3-container">
<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>
</div>
</body>
</html>
Try it Yourself »
