What is W3.CSS?

W3.CSS is a modern CSS framework with built-in responsiveness:

Smaller and faster than other CSS frameworks.

Easier to learn, and easier to use than other CSS frameworks.

Uses standard CSS only

Speeds up and simplifies web evelopment

Support modern responsive design (Mobile first) by default

Rules:

1. All following names are class names so just put them in class of anhy element to apply them on that particular or any number of HTML elements.

/* w3-colors and w3-container: */

There are 16 color classes that can be used for background, border etc.- w3-red, w3-green, w3-blue, w3-orange, w3-indigo, w3-purple, w3-yellow, w3-cyan, w3-lime, w3-gray, w3-light-gray, w3-khaki, w3-black, w3-brown, w3-pink, w3-teal

Similarly, there are 16 color classes for text also- w3-text-red, w3-text-green, w3-text-blue, w3-text-orange, w3-text-indigo, w3-text-purple, w3-text-yellow, w3-text-cyan, w3-text-lime, w3-text-gray, w3-text-light-gray, w3-text-khaki, w3-text-black, w3-text-brown, w3-text-pink, w3-text-teal

Like above, there are 16 hover classes for background color + 16 hover classes for text color-

You just need to add 'hover' between 'w3-' and '-color' for changing background color on hover, eg. w3-hover-red

You just need to add 'hover-text' between 'w3-' and '-color' for changing text color on hover, eg. w3-hover-text-red

Use w3-container in article and section-

Paris

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

Tokyo

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

/* w3-panel: */

This is a panel

The panel is blue in background and created as a card with w3-card-4

This panel has a left bar, background is w3-sand, text size is extra extra large and font type is serif and to make it large and round in shape, use w3-round-xlarge

This is it

onclick="this.parentElement.style.display='none'" is used to hide an element by clicking the element containing this function as it's attribute. eg.

x

Click on the X to close this panel.

Click on the X to close this panel.

Also we can make a button to display and a button ton hide the element as follows-

/* w3-border and w3-table: */

The w3-table-all class combines the w3-table, w3-bordered, w3-striped, and w3-border classes
The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.
The w3-card-4 classes makes the table look like a card (adds shadows)
Use the w3-tiny class to display a tiny table
Use the w3-small class to display a small table and so for w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo
To make a border round use- w3-round-xlarge
Class name	Use
w3-table	Container for an HTML table
w3-striped	Striped table
w3-border	Bordered table
w3-bordered	Bordered lines in rows
w3-centered	Centered table content
w3-hoverable	Hoverable table
w3-table-all	All properties set
w3-centered	Put all cells data in center
w3-border	Adds borders (top, right, bottom, left) to an element
w3-border-top	Adds a top border to an element
w3-border-right	Adds a right border to an element
w3-border-bottom	Adds a bottom border to an element
w3-border-left	Adds a left border to an element
w3-border-0	Removes all borders
w3-border-color	Displays the border in a specified color (like red, blue, etc)
w3-hover-border-color	Adds a hoverable border color
w3-bottombar	Adds a thick bottom border to an element
w3-leftbar	Adds a thick left border to an element
w3-rightbar	Adds a thick right border to an element
w3-topbar	Adds a thick top border to an element

/* w3-card: */

The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as w3-card-4).
Class	Defines
w3-card	Same as w3-card-2
w3-card-2	Container for any HTML content (2px bordered shadow)
w3-card-4	Container for any HTML content (4px bordered shadow)

Few more basic classes are w3-left, w3-right, w3-top, w3-bottom, w3-circle, w3-center,w3-padding, w3-round,w3-round-small,w3-round-medium, w3-round-large,w3-round-xlarge,w3-round-xxlarge, w3-left-align and the w3-right-align classes are used to align text, w3-wide class specifies a wider text, w3-opacity,w3-opacity-min,w3-opacity-max,w3-grayscale-min, w3-grayscale-max,w3-grayscale,w3-sepia-min,w3-sepia,w3-sepia-max,w3-hover-opacity,w3-hover-grayscale,w3-hover-sepia,w3-hover-opacity-off

Heading 1 (36px)

Heading 2 (30px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)

Heading 6 (16px)

Font-Size Classes

w3-tiny

w3-small

w3-medium (Default)

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo

URL to import fonts from google - "https://fonts.googleapis.com/css?family=fontname"

/* w3-padding and w3-margin: */

Class	Defines
w3-padding	Adds 8px top and bottom, and 16px left and right padding
w3-padding-small	Adds 4px top and bottom, and 8px left and right padding
w3-padding-large	Adds 12px top and bottom, and 24px left and right padding
w3-padding-16	Adds 16px top and bottom padding to an element
w3-padding-24	Adds 24px top and bottom padding to an element
w3-padding-32	Adds 32px top and bottom padding to an element
w3-padding-48	Adds 48px top and bottom padding to an element
w3-padding-64	Adds 64px top and bottom padding to an element
w3-margin	Adds a 16px margin to all sides of an element
w3-margin-top	Adds a 16px top margin to an element
w3-margin-right	Adds a 16px right margin to an element
w3-margin-bottom	Adds a 16px bottom margin to an element
w3-margin-left	Adds a 16px left margin to an element
w3-section	Adds a 16px top and bottom margin to an element

/* w3-display: */

Class	Defines
w3-display-container	Container for w3-display-classes
w3-display-topleft	Displays content at the top left corner of the w3-display-container
w3-display-topright	Displays content at the top right corner of the w3-display-container
w3-display-bottomleft	Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright	Displays content at the bottom right corner of the w3-display-container
w3-display-left	Displays content to the left (middle left) of the w3-display-container
w3-display-right	Displays content to the right (middle right) of the w3-display-container
w3-display-middle	Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle	Displays content at the top middle of the w3-display-container
w3-display-bottommiddle	Displays content at the bottom middle of the w3-display-container
w3-display-position	Displays content at a specified position in the w3-display-container
w3-display-hover	Displays content on hover inside the w3-display-container
w3-left	Floats an element to the left (float: left)
w3-right	Floats an element to the right (float: right)
w3-show	Shows an element (display: block)
w3-hide	Hides an element (display: none)
w3-mobile	Adds mobile-first responsiveness to any element. Displays elements as block elements on mobile devices

The w3-mobile Class

The w3-mobile class adds mobile-first responsiveness to any element. It adds display:block and width:100% to an element on screens that are less than 600px wide.

/* w3-button: */

Class	Defines
w3-btn	A rectangular button with a shadow hover effect. Default color is black.
w3-button	A rectangular button with a gray hover effect. Default color is light-gray in W3.CSS version 3. Default color is inherited from parent element in version 4.
w3-bar	A horizontal bar that can be used to group buttons together. (Perfect for horizontal navigation menus)
w3-bar-item	Buttons can be grouped together without a space between them by using this
w3-block	Class that can be used to define a full width (100%) button.
w3-circle	Can be used to define a circular button.
w3-ripple	Can be used to create a ripple effect.
w3-disabled	create a disabled button (if the element support the standard HTML disabled attribute, you can use the disabled attribute instead)
w3-inline-block	Can be used to show buttons in a line.

The HTML × entity is the preferred icon for close buttons (rather than the letter "X").

w3-transparent is used to make element transparent, w3-ul is used to create list (Must use with

/* w3-input: */

This is not the end

Click for more