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">
Versions
| Version | Description |
|---|---|
| 1.00-09 | Beta Versions. |
| 1.1 | Version 1.1 June 2015. |
| 1.11 | Added containers for example code. |
| 1.12 | Added material color themes. |
| 1.13 |
Added w3-animate classes. Added w3-row-margin. Added w3-row-padding. Added w3-text-color classes. Changed default tooltip behavior. |
| 1.14 | Added w3-checkbox classes. |
| 1.15 |
Changed default h1, h2, h3, h4, h5, and h6 fonts to "Segoe UI". Removed the i.tiny, i.small, and i.large classes. Use w3-tiny, w3-small, or w3-large instead. |
| 1.16 |
Removed light and dark color classes. Use themes instead. |
| 1.17 |
Reduced some default font sizes. Changed w3-topnav behavior to use <a>...</a> instead of <li><a>...</a></li>. Added btn-floating-large class. |
| 1.18 | Implemented Google's newest use of icon recommendations. |
| 1.19 |
Added color classes. Changed the value of some padding classes. |
| 1.2 | Version 1.2 July 2015. |
| 1.21 | Added the w3-content class. |
| 1.22 | Added the w3-rest class. |
| 1.23 |
Removed text-white and text-black. Use w3-text-white and w3-text-black instead. |
| 1.24 |
Removed light and dark colors. Use themes instead. Renamed colors from color to w3-color. Added w3-text-black-opacity and .w3-text-white-opacity. Added w3-stroke. |
| 1.25 | Removed w3-row-margin. Use w3-row-padding instead. |
| 1.3 | Version 1.3 August 2015. |
| 1.31 | Corrected error. Class l4 was wrongly defined. |
| 1.32 | Corrected w3-padding classes. |
| 1.33 | Fine-tuned all w3-padding classes. |
| 1.34 | Fine-tuned all box-sizing properties. |
| 1.35 | Added default padding to w3-topnav. |
| 1.36 | Added w3-hide classes. |
| 1.4 | Version 1.4 August 2015. |
| 1.41 | Fine tuned sizes. |
| 1.42 | Fine tuned Material Icon sizes. |
| 1.43 | Fine tuned Font Awesome and Bootstrap icon sizes. |
| 1.44 | Added w3-spin. |
| 1.5 | Version 1.5 September 2015. |
| 1.51 | Small adjustments. |
| 1.52 | Added drop shadow when hovering buttons. |
| 1.53 | Added w3-select. |
| 1.54 | Added w3-section. |
| 1.55 | Added w3-table-all. |
| 1.56 | Small adjustments. |
| 1.57 | Removed material icon vertical-alignment. Added w3-slim and w3-wide. |
| 1.58 | Added w3-fluid. |
| 1.59 | Added w3-ripple. |
| 1.6 | Version 1.6 October 2015. |
| 1.61 | Added w3-top. Small adjustments to animation classes. |
| 1.62 | Added w3-justify. |
| 1.63 | Added w3-round. |
| 1.64 | Removed animated labels. Can conflict with invalid content. Removed w3-textarea. Use w3-input instead. |
| 1.65 | Removed w3-stroke. Minimum browser support. |
| 1.66 | Adjusted modal properties. |
| 1.67 | Added colors w3-aqua and w3-sand. Added w3-form. Changed default size for w3-input to 100%. |
| 1.68 | Added w3-btn-group. |
| 1.7 | Version 1.7 November 2015. |
| 1.71 | Added w3-input-group. Added w3-validate. Added w3-check. Added w3-radio. |
| 1.72 | Removed automatic coloring of invalid input. Use w3-validate instead. |
| 1.73 | Revised disabled buttons to use opacity instead of grey. |
| 1.74 | Added w3-bottom. |
| 1.75 | Small metric adjustments. |
| 1.76 | Added w3-pagination. |
| 1.77 | Added w3-dropdown-hover and w3-dropdown-click. |
| 1.8 | Version 1.8 December 2015. Download |
| 1.81 | Added w3-paragraph (for testing only). |
| 1.82 | Corrected an error in w3-validate. |
| 1.83 | Corrected an error in w3-label. |
| 1.84 | Added w3-sign (for testing only). |
| 1.85 | Removed w3-text-black-opacity and w3-text-white-opacity. Use w3-opacity instead. |
| 1.86 | Added w3-text-shadow-white. Removed w3-sign. Use w3-tag instead. Removed w3-paragraph. Use <p> or w3-section instead. |
| 1.87 | Added w3-animate-zoom. |
| 1.9 | Version 1.9 January 2016. Download |
| 1.91 | Added w3-pale-red, w3-pale-yellow, w3-pale-green, w3-pale-blue. Added w3-topbar, w3-bottombar, w3-leftbar, w3-rightbar. Added w3-border-red, w3-border-yellow, w3-border-green, w3-border-blue. |
| 1.92 | Removed w3-blockquote. Use w3-leftbar instead. |
| 1.93 | Removed w3-tab. Use w3-topnav or w3-sidenav instead. |
| 1.94 | Added w3-navbar. Added w3-hover-color. |
| 1.95 | Added w3-vertical. Added pale w3-hover colors. |
| 1.96 | Added dropdown to w3-sidenav. Added Slideshow Added Tabs (Tabulators) |
| 1.97 | Added w3-btn-block. Added w3-accordion and w3-accordion-content. |
| 1.98 | Added w3-animate-fading. |
| 1.99 | Added w3-main and w3-collapse. Added w3-serif. Added w3-overlay. Added w3-progressbar. Added w3-show-inline-block. Added w3-animate-input. Added w3-display-container. Added w3-display-topright. Added w3-display-topleft. Added w3-display-bottomright. Added w3-display-bottomleft. |
| 2.0 | Version 2.0 February 2016. Download |
| 2.1 | Added w3-hover-shadow. Added w3-hover-text-color. Changed z-index of w3-modal to "3" (instead of 1). |
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.
