Latest web development tutorials
 

W3.CSS Intro


W3.CSS Colors

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

Red

Green

Blue

Black

Pink

Teal

Indigo

Brown

Orange

Cyan

Purple

Grey

Yellow

Lime

Khaki

Light Grey


W3.CSS Panels, Notes, and Quotes

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

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


"Make it as simple as possible, but not simpler."

Albert Einstein


W3.CSS Headers and Footers

The w3-container class also provide solutions for all kinds of headers and footers:

Header


My Footer

Footer information goes here


W3.CSS Alerts

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

×

Danger!

Red often indicates a dangerous or potentially negative action.

×

Warning!

Yellow and orange often indicates a warning that might need attention.

×

Success!

Green often indicates a successful or positive action.

×

Info!

Blue often indicates a neutral informative change or action.


W3.CSS Cards

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

Car

w3-card-2

Car

w3-card-4

Car

w3-card-8

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.

(Wikipedia)


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-btn class provides buttons of all sizes and types.


The w3-btn-floating buttons are circular and meant for important functions.

+ + +


W3.CSS Tags and Badges

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

2 8 A B

New Warning Danger Info

Falcon Ridge Parkway

S
A
L
E

DO NOT
BREATHE
UNDER WATER

W3.CSS Responsive

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

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

1/1

1/4

1/4

1/2

1/4

1/2

1/4

50px

rest

1/4

rest

100px

45px

rest

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


W3.CSS Modals

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

×

Header

Some text. Some text. Some text.

Some text. Some text. Some text.

Footer



Modal Image:

NaturegetElementById('img01').style.display='block'" style="width:22%;cursor:pointer">
×
Nature

W3.CSS Progress Bars

The w3-progressbar class creates progress bars:

25%

50%



W3.CSS Dropdowns

The w3-dropdown classes provide dropdowns:


W3.CSS Accordions

The w3-accordion class provide accordions:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion with Images:

Trolltunga, Norway


W3.CSS Tabs

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

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.



Tabbed Image Gallery:


Nature ×
Nature
Fjords ×
Fjords
Mountains ×
Mountains
Lights ×
Northern Lights

W3.CSS Navigation

The w3-navbar class creates a navigation bar:




The w3-sidenav class creates a side navigation:


W3.CSS Pagination

The w3-pagination class provides a simple way for page navigation:




Slideshows

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

1 / 3
Beautiful Nature
2 / 3
Trolltunga, Norway
3 / 3
Mountains

W3.CSS Animations

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


Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!

W3.CSS Images

Styling images in W3CSS is easy:

Northern Lights
Forest
Mountains
Nature
Nature

W3.CSS Input Forms

The w3-input classes are for input forms:



Input Form


Input Form



W3.CSS Fonts

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

Making the web beautiful!
Making the web!

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

Hover over this text! Tooltip content

Car

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads.


Mobile Color Themes

The predefined color themes are specially suitable for mobile web applications.

Theme Indigo

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»

Theme Teal

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»