W3.CSS Introduction
What is W3.CSS?
W3.CSS is a CSS framework for building modern and responsive websites.
It provides ready-to-use classes for colors, layouts, cards, buttons, tables, forms, and much more.
W3.CSS is built with standard CSS and does not require a JavaScript library.
W3.CSS is small, fast, and easy to use.
Start Using W3.CSS
To use W3.CSS, add the following line inside the <head> section of your HTML page:
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
That's all you need.
You can now use W3.CSS classes in your HTML.
Your First W3.CSS Page
W3.CSS classes start with w3-.
The example below uses W3.CSS classes to create a header, some content, and a button:
Example
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
</head>
<body>
<div class="w3-container w3-teal">
<h1>My Website</h1>
</div>
<div class="w3-container">
<h2>Welcome</h2>
<p>This page is styled with W3.CSS.</p>
<button class="w3-button w3-black">Learn More</button>
</div>
</body>
</html>
Try it Yourself »
How W3.CSS Works
W3.CSS styles HTML elements by adding class names.
For example, a normal HTML button looks like this:
HTML Button
<button>Click Me</button>
Add the w3-button class:
W3.CSS Button
<button class="w3-button w3-black">Click Me</button>
W3.CSS does the styling for you.
Combine W3.CSS Classes
W3.CSS classes are designed to work together.
You can combine several classes to change the appearance of an element.
Hello W3.CSS
A blue card with padding and a shadow.
Example
<div class="w3-card w3-blue w3-padding">
<h2>Hello W3.CSS</h2>
<p>A blue card with padding and a shadow.</p>
</div>
Try it Yourself »
In the example above:
w3-cardadds a shadoww3-blueadds a blue colorw3-paddingadds space inside the card
This simple idea is the heart of W3.CSS.
Responsive by Design
Modern websites must work on screens of all sizes.
W3.CSS includes classes for building responsive layouts for desktops, tablets, and mobile phones.
Note
Resize the browser window when trying W3.CSS examples.
You will often see the layout adapt automatically.
You will learn responsive design in detail later in this tutorial.
Modern Layouts with Flexbox and Grid
W3.CSS supports both CSS Flexbox and CSS Grid.
Flexbox
Use w3-flex to arrange and align items in a row or column.
Grid
Use w3-grid to create layouts with rows and columns.
You do not need to learn Flexbox or Grid yet.
We will build real layouts with them later in the tutorial.
No JavaScript Library Required
W3.CSS is a CSS framework.
It does not depend any JavaScript library.
W3.CSS components work with HTML and CSS alone.
When interactive behavior requires JavaScript, you can use standard JavaScript directly.
Use W3.CSS with Your Own CSS
W3.CSS does not prevent you from writing your own CSS.
You can use W3.CSS for common styling and add your own CSS whenever you need something different.
Example
<style>
.my-title {
letter-spacing: 4px;
}
</style>
<h1 class="w3-blue w3-padding my-title">My Website</h1>
Try it Yourself »
W3.CSS Is Free
W3.CSS is free to use.
No license is necessary.
You can link directly to W3.CSS:
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
Or you can download W3.CSS and host it yourself.
Ready to Start?
You now know how W3.CSS works:
- How to add W3.CSS to your HTML page
- How to add W3.CSS classes to HTML elements
- How to combine classes for any design you want
- How to use W3.CSS with standard HTML and CSS
