W3.CSS Intro

---

W3.CSS Colors

The w3-color
classes are inspired by modern colors used in marketing, road signs, and sticky notes:

---

W3.CSS Containers

The w3-container class is the most important of the W3.CSS classes. It provides equality like:

• Common margins


• Common paddings


• Common vertical alignments


• Common horizontal alignments


• Common fonts


• Common colors

The w3-container class is typically used with HTML container elements, like:

<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and
more.

---

W3.CSS Panels, Notes, and Quotes

The w3-panel
class can display all kinds of notes and quotes:

---

---

W3.CSS Alerts

The w3-panel
class can also be used for all kinds of alerts:

---

W3.CSS Cards

The w3-card
classes are suitible for both images and notes:

---

W3.CSS Tables

The w3-table
classes can handle all kinds of tables:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Anja	Bore	100

---

W3.CSS Lists

The w3-ul
class can handle all kinds of lists:

• 
  ×
  Mike
  Web Designer
  


• 
  ×
  Jill
  Support
  


• 
  ×
  Jane
  Accountant
  


• 
  ×
  Jack
  Advisor
  

---

W3.CSS Buttons

The w3-button and w3-btn
class provides buttons of all sizes and types.

Wide buttons:

Circular or square buttons:

+
+
+

+
+
+

---

W3.CSS Tags, Labels; Badges, And Signs

The w3-tag and the
w3-badge
classes are capable of displaying all kinds of tags, labels, badges and signs:

2
8
A
B

New
Warning
Danger
Info

---

W3.CSS Responsive

The Responsive Grid
classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.

W3.CSS also supports a
12 column mobile-first fluid grid
with small, medium, and large classes.

---

W3.CSS Display

The w3-display classes
allow you to display HTML elements in specific positions:

---

W3.CSS Modals

The w3-modal
class provides modal dialog in pure HTML:

Click to Open Modal

Modal Image:

---

W3.CSS Progress Bars

Read more at W3.CSS Progress Bars

Click Me

---

W3.CSS Dropdowns

The w3-dropdown
classes provide dropdowns:

---

W3.CSS Accordions

Read more at W3.CSS Accordions

Open Section 1

Open Section 2

Open Section 3

---

W3.CSS Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.

Tabbed Image Gallery (Click on one of the pictures):

function openImg(imgName) {
var i, x;
x = document.getElementsByClassName("picture");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(imgName).style.display = "block";
}

---

W3.CSS Navigation

The w3-bar class can be used to create a navigation bar:

Navigation bar with input:>

Navigation bar with dropdown:

---

The w3-sidebar class creates a side navigation:

---

W3.CSS Pagination

W3.CSS provides simple ways for page pagination.

---

Slideshows

W3.CSS provide slideshows for cycling through images or other content:

---

Lightbox

Combine Modals and Slideshows to create a lightbox (modal image gallery):

---

W3.CSS Animations

The w3-animate
classes provide an easy way to slide and fade in elements:

---

W3.CSS Images

Styling images in W3CSS is easy:

---

W3.CSS Effects

Add special effects to any element:

---

W3.CSS Input Forms

The w3-input
classes are for input forms:

---

W3.CSS Filters

Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:

Name	Country
Alfreds Futterkiste	Germany
Berglunds snabbkop	Sweden
Island Trading	UK
Koniglich Essen	Germany
Laughing Bacchus Winecellars	Canada
Magazzini Alimentari Riuniti	Italy
North/South	UK
Paris specialites	France

function myFunction2() {
var input, filter, table, tr, td, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName('tr');
for (i = 0; i -1) {
tr[i].style.display = '';
} else {
tr[i].style.display = 'none';
}
}
}
}

---

W3.CSS Fonts

With W3.CSS it is extremely easy to add fonts to a web page:

---

W3.CSS Tooltips

The w3-tooltip
class can display all kinds of tooltips:

Hover over this text!
Tooltip content

Hover over this text!
Tooltip content

---

Color Themes

Color themes can easily be added to any web application:

// Slideshows
var slideIndex = 1;

function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}

function currentDiv(n) {
showDivs(slideIndex = n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demodots");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i x.length) {slideIndexLight = 1}
if (n < 1) {slideIndexLight = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");

}
x[slideIndexLight-1].style.display = "block";
dots[slideIndexLight-1].className += " w3-opacity-off";
captionText.innerHTML = dots[slideIndexLight-1].alt;
}


// Dropdown
function myDropFunc() {
var x = document.getElementById("Demodrop");
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9
if (x.className.indexOf("w3-show") == -1)
x.className += " w3-show";
else
x.className = x.className.replace(" w3-show", "");
}
}

// Progress Bars
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}

// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}

// Accordions
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.classList) {
x.classList.toggle("w3-show");
x.previousElementSibling.classList.toggle("w3-dark-grey");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className += " w3-show";
else
x.className = x.className.replace(" w3-show", "");
}
}

startAnim("Normal")
function startAnim(animName) {
var i;
var x = document.getElementsByClassName("animTest");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(animName).style.display = "block";
}

// Click on a tab on load
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();