THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Case: Headers and Footers


Separate the Containers

To make it possible define separate classes for headers. Separate the header from the rest of the content, using a separate <div> element:

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

Color classes defines the color of elements.

This example adds a color to the first <div> element:

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

Size classes defines the text size for elements.

This example adds a size to both header elements:

Example

<div class="w3-container w3-light-grey">
  <h1 class="w3-jumbo">My First W3.CSS Website!</h1>
  <p class="w3-xxlarge">This sage 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

If you like to follow the HTML5 semantic recommendations. please do!

Note It does not matter for W3.CSS if you use <div> or <header>.

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>

<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 »