THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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.