W3.CSS — Get Started

Installation

W3.CSS can be included via CDN or downloaded locally.

CDN Method

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

Local Download

Visit w3schools.com/w3css
Download the w3.css file
Link it in your HTML

<link rel="stylesheet" href="w3.css">

Basic HTML Template

<!DOCTYPE html>
<html>
<head>
    <title>My W3.CSS Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container">
    <h1>Welcome to W3.CSS</h1>
    <p>This is a paragraph.</p>
</div>

</body>
</html>

W3.CSS Classes

W3.CSS provides ready-to-use classes for common styling needs:

<!-- Colors -->
<div class="w3-red">Red background</div>
<div class="w3-blue">Blue background</div>

<!-- Text -->
<h1 class="w3-center">Centered text</h1>
<p class="w3-large">Large text</p>

<!-- Layout -->
<div class="w3-row">
    <div class="w3-half">Half width</div>
    <div class="w3-half">Half width</div>
</div>

First Project

Create a simple webpage with:

A header with navigation
A main content area
A footer

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<!-- Header -->
<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">Contact</a>
</div>

<!-- Content -->
<div class="w3-container">
    <h1>My Website</h1>
    <p>Welcome to my website built with W3.CSS!</p>
</div>

<!-- Footer -->
<div class="w3-container w3-black">
    <p>© 2024 My Website</p>
</div>

</body>
</html>

Mini Practice

Create a webpage that:

Uses the CDN link for W3.CSS
Has a navigation bar with at least 3 links
Contains a card component
Includes a footer

Up Next

Next: Learn about W3.CSS Containers.

Frequently Asked Questions about Get Started

What is Get Started in W3.CSS?

Get Started is a fundamental concept in W3.CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Get Started?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Get Started.

Why is Get Started important in W3.CSS?

Get Started is essential for W3.CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.