Latest web development tutorials
 

W3.CSS Downloads


Download W3.CSS

Download the latest version from this link: http://www.w3ii.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.w3ii.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.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.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.
1.98 Added w3-animate-fading.
1.97 Added w3-btn-block.
Added w3-accordion and w3-accordion-content.
1.96 Added dropdown to w3-sidenav.
Added Slideshow
Added Tabs (Tabulators)
1.95 Added w3-vertical.
Added pale w3-hover colors.
1.94 Added w3-navbar.
Added w3-hover-color.
1.93 Removed w3-tab. Use w3-topnav or w3-sidenav instead.
1.92 Removed w3-blockquote. Use w3-leftbar instead.
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.9 January 2016. Download 1.9
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.

PropertyDescription
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.