THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »