W3.CSS Downloads
Download W3.CSS
Download the latest version from this link: http://www.w3schools.com/lib/w3.css
W3.CSS is Free
W3.CSS is free to use. No license is necessary.
How To use W3.CSS
To use W3.CSS, just add a link to "w3.css" in your web pages:
Example
<!DOCTYPE html>
<html>
<title>My Web</title>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
Try It Yourself »
Or download w3.css and run it from your own web site:
Example
<!DOCTYPE html>
<html>
<title>My Web</title>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="w3.css">
If you put w3.css in a subfolder, add the folder name between slashes:
Example
<!DOCTYPE html>
<html>
<title>My Web</title>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="/foldername/w3.css">
If you place w3.css at the root of your web, add a slash:
Example
<!DOCTYPE html>
<html>
<title>My Web</title>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="/w3.css">
Latest Versions
| Version | Description |
|---|---|
| 2.61 | Removed "font-weight:bold" from w3-tag and w3-badge. Use <strong> instead. |
| 2.6 | Version 2.6 May 2016. Download 2.6 |
| 2.52 | Added w3-padding-hor and w3-padding-ver . |
| 2.5 | Version 2.5 April 2016. Download 2.5 |
| 2.5 | Adjusted minor transition
values. |
| 2.4 |
Added w3-threequarter. Added w3-display-topmiddle and w3-display-bottommiddle. Added w3-transparent and w3-hover-none. Changed animation duration of w3-animate-opacity from 4 to 1.5 seconds. |
| 2.3 | Fixed minor pixel errors in media queries. Added all color classes to w3-border-color . |
| 2.2 | Added 100% width to <li> elements in w3-navbar on small screens (< 601px width). |
| 2.1 | Added w3-hover-shadow. Added w3-hover-text-color. Changed z-index of w3-modal to "3" (instead of 1). |
| 2.0 | February 2016. Download 2.0 |
| 1.9 | January 2016. |
| 1.8 | December 2015. |
| 1.7 | November 2015. |
| 1.6 | October 2015. |
| 1.5 | September 2015. |
| 1.4 | August 2015. |
| 1.3 | August 2015. |
| 1.2 | July 2015. |
| 1.1 | June 2015. |
| 1.1 | May 2015. |
Validating W3.CSS
Validating W3.CSS might return some errors.
 |
You will often get some errors when you run W3C validations. There will always be some browser specific values outside the current W3C specification. |
|---|
| Property | Description |
|---|---|
| pointer-events | Invalid property in CSS3, but suggested for CSS4. Used in W3.CSS to remove hand pointer from disabled elements. |
| user-select | Invalid property in CSS3, but suggested for CSS4. Used in W3.CSS to remove text selection from clickable elements. |
| pseudo-class :valid | Invalid value in CSS3, but suggested for CSS4. Used in W3.CSS to indicates valid input. |
| @-webkit-keyframes | Added to W3.CSS to make animations work in webkit browsers (older versions of Chrome, Safari, and Opera). |
Customize W3.CSS
W3.CSS includes basic fonts and font sizes.
You can customize W3.CSS by changing these settings:
Example
html {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI", Verdana, sans-serif;
font-weight: 400;
line-height: 1;
margin:
20px 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1
{font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4
{font-size: 20px}
h5 {font-size: 18px}
h6 {font-size: 16px}
hr
{
height: 0;
border: 0;
border-top: 1px solid
#eee;
margin: 20px 0;
}
Try It Yourself »
W3.CSS is Normalized
Normalizing a style sheet is done to:
- Correct browser bugs
- Remove browser inconsistencies
- Assure common browser defaults
- Normalize the styles of all HTML elements
- Add CSS improvements
An extract from Normalize.css is used in W3.CSS.
This makes W3.CSS display HTML consistently in all browsers, and in line with modern web standards.
