W3.CSS Tutorial
Selected Reading
- W3.CSS - Discussion
- W3.CSS - Useful Resources
- W3.CSS - Quick Guide
- W3.CSS - Utilities
- W3.CSS - Navigation
- W3.CSS - Colors
- W3.CSS - Icons
- W3.CSS - Images
- W3.CSS - Lists
- W3.CSS - Tables
- W3.CSS - Modal Dialog
- W3.CSS - Tooltips
- W3.CSS - Buttons
- W3.CSS - Forms
- W3.CSS - Grids
- W3.CSS - Responsive Design
- W3.CSS - Cards
- W3.CSS - Code Coloring
- W3.CSS - Containers
- W3.CSS - Environment Setup
- W3.CSS - Overview
- W3.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
W3.CSS - Environment Setup
W3.CSS - Environment Setup
How to Use W3.CSS?
There are two ways to use W3.CSS −
Local Installation − You can download the W3.CSS file on your local machine and include it in your HTML code.
CDN Based Version − You can include the W3.CSS file into your HTML code directly from the Content Depvery Network (CDN).
Local Installation
Go to to download the latest version available.
Then, put the downloaded w3.css file in a directory of your website, e.g. /css.
Example
Now you can include the css file in your HTML file as follows −
<html>
<head>
<title>The W3.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "css/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h1>Hello World!</h1>
</header>
</body>
</html>
It will produce the following result −
CDN Based Version
You can include the W3.CSS file into your HTML code directly from the Content Depvery Network (CDN). W3Schools.com provides content for the latest version.
Note − We are using W3Schools.com CDN version of the pbrary throughout this tutorial.
Example
Now let us rewrite the above example using jQuery pbrary from W3Schools.com CDN.
<html>
<head>
<title>The W3.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h1>Hello World!</h1>
</header>
</body>
</html>
It will produce the following result −
Advertisements