W3.CSS Examples

Welcome to The Coding College! In this post, we’ll explore practical W3.CSS Examples to help you get started with this lightweight and responsive CSS framework. Whether you’re building a webpage, adding responsiveness, or enhancing your UI, these examples will guide you step-by-step.

Why Use W3.CSS?

  • Simple and Lightweight: No complex setup or installations.
  • Responsive by Default: Works seamlessly across all devices.
  • Ready-to-Use Classes: Save time with pre-built components.
  • Clean and Modern: Gives your webpage a professional look.

Examples Table of Contents

  1. Basic W3.CSS Setup
  2. Responsive Layout Example
  3. Navigation Bar Example
  4. Buttons and Effects Example
  5. Cards and Panels Example
  6. Modals and Alerts Example
  7. Slideshow Example
  8. Forms Example
  9. Grid System Example
  10. Footer Example

1. Basic W3.CSS Setup

Start with a simple W3.CSS setup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Example</title>
  <!-- W3.CSS Stylesheet -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
  <header class="w3-container w3-blue w3-padding">
    <h1>Welcome to W3.CSS</h1>
  </header>
  <div class="w3-container">
    <p>W3.CSS makes building websites simple and fast.</p>
  </div>
</body>
</html>

2. Responsive Layout Example

Use W3.CSS’s responsive grid system to create a flexible layout.

<div class="w3-row">
  <div class="w3-third w3-container w3-light-grey">
    <h3>Column 1</h3>
    <p>Content goes here.</p>
  </div>
  <div class="w3-third w3-container w3-blue">
    <h3>Column 2</h3>
    <p>Content goes here.</p>
  </div>
  <div class="w3-third w3-container w3-green">
    <h3>Column 3</h3>
    <p>Content goes here.</p>
  </div>
</div>

3. Navigation Bar Example

Create a responsive navigation bar using W3.CSS classes.

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Services</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

4. Buttons and Effects Example

Add beautiful buttons with hover effects.

<button class="w3-button w3-green w3-hover-red">Click Me</button>
<button class="w3-button w3-blue w3-hover-yellow">Hover Me</button>

5. Cards and Panels Example

Create clean cards with W3.CSS.

<div class="w3-card w3-round w3-padding">
  <h3>W3.CSS Card</h3>
  <p>This is an example of a card using W3.CSS.</p>
</div>

6. Modals and Alerts Example

Modal Example

<button onclick="document.getElementById('myModal').style.display='block'" class="w3-button w3-black">Open Modal</button>

<div id="myModal" class="w3-modal">
  <div class="w3-modal-content w3-padding w3-round">
    <header class="w3-container w3-blue">
      <span onclick="document.getElementById('myModal').style.display='none'" class="w3-button w3-display-topright">×</span>
      <h3>Modal Title</h3>
    </header>
    <div class="w3-container">
      <p>This is a modal example using W3.CSS.</p>
    </div>
  </div>
</div>

Alert Example

<div class="w3-panel w3-red w3-round">
  <p><strong>Alert!</strong> Something went wrong.</p>
</div>

7. Slideshow Example

Easily create image slideshows with W3.CSS.

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/800x400" style="width:100%">
  <img class="mySlides" src="https://via.placeholder.com/800x400" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>

<script>
  var slideIndex = 1;
  showDivs(slideIndex);

  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
  }
</script>

8. Forms Example

Style your forms beautifully with W3.CSS.

<form class="w3-container w3-card w3-light-grey w3-padding">
  <label>Name</label>
  <input class="w3-input w3-border" type="text" placeholder="Enter your name" required>
  
  <label>Email</label>
  <input class="w3-input w3-border" type="email" placeholder="Enter your email" required>
  
  <button class="w3-button w3-blue w3-margin-top">Submit</button>
</form>

9. Grid System Example

A responsive grid layout example:

<div class="w3-row">
  <div class="w3-col m6 w3-container w3-light-grey">
    <p>50% Width</p>
  </div>
  <div class="w3-col m6 w3-container w3-blue">
    <p>50% Width</p>
  </div>
</div>

10. Footer Example

Add a simple footer to your page.

<footer class="w3-container w3-black w3-center w3-padding">
  <p>© 2024 My Website | Powered by <a href="http://thecodingcollege.com" class="w3-hover-text-gray">The Coding College</a></p>
</footer>

Conclusion

These practical W3.CSS examples will help you quickly build and style responsive, modern websites. Each example demonstrates W3.CSS’s simplicity and power.

For more tutorials, visit The Coding College and start building stunning webpages today! 🚀

Leave a Comment