W3.CSS Introduction

Last Updated : 02 Mar, 2021

What is W3.CSS?

W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS frameworks.
It aims to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop.
W3.CSS was designed to be a high-quality alternative to Bootstrap.

How to use W3.CSS on a webpage?

W3.CSS is free for everyone to use. Anyone can use it by simply linking the style in their webpage. There are two ways to include W3.CSS on the website:

Include W3.CSS from this link as mentioned below:

HTML

<link rel="stylesheet" 
  href="https://www.w3schools.com/w3css/4/w3.css">

Download W3.CSS from here and use it.

Example:

HTML

<!DOCTYPE html>
<html>

<head>

    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">

</head>

<body>

    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
        of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color 
            to green. -->
        <!-- w3-xxlarge sets font size to 32px -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>

    <div class="w3-container">

        <!-- w3-text-red sets the text 
            color to red. -->
        <p class="w3-text-red">
            GeeksforGeeks is a Computer Science 
            portal for geeks. It contains well 
            written, well thought and well 
            explained computer science and 
            programming articles, quizzes etc.
        </p>
    </div>
</body>

</html>