W3.CSS Cheat Sheet

Container Classes

w3-container	HTML container
w3-panel	HTML container
w3-badge	Circular badge
w3-tag	Rectangular tag
w3-ul	Unordered list
w3-display-container	For w3-display- classes
w3-code	Code container block
w3-codespan	Code container inline

Table Classes

w3-table	HTML table container
w3-striped	Striped table
w3-border	Bordered table
w3-bordered	Bordered lines
w3-centered	Centered table
w3-hoverable	Hoverable table
w3-table-all	All table properties set
w3-responsive	Responsive table

Card Classes

w3-card	Container w/ 2px shadow
w3-card-4	Container w/ 4px shadow

Modal Classes

w3-modal	Modal container
w3-modal-content	Modal pop-up element
w3-tooltip	Tooltip element
w3-text	Tooltip text

Responsive Classes

w3-row	Fluid content row
w3-row-padding	All cols have default padding
w3-content	Fixed size centered content
w3-half	1/2-of-screen column
w3-third	1/3-of-screen column
w3-twothird	2/3-of-screen column
w3-quarter	1/4-of-screen column
w3-threequarter	3/4-of-screen column
w3-col	Fluid content column
w3-rest	Stretch last element to end
l1 to l12	Sizing for large screens
m1 to m12	Sizing for medium screens
s1 to s12	Sizes for small screens
w3-hide-small	Hide on small screens
w3-hide-medium	Hide on medium screens
w3-hide-large	Hide on large screens
w3-image	Responsive image
w3-mobile	Make element mobile-first

Layout Classes

w3-cell-row	Container for cells
w3-cell	Layout column
w3-cell-top	Aligns cell content (top)
w3-cell-middle	Aligns cell content (mid)
w3-cell-bottom	Aligns cell content (bot)

Bar Classes

w3-bar	Horizontal bar
w3-bar-block	Vertical bar
w3-bar-item	Common style for items
w3-sidebar	Side bar
w3-collapse	Responsiveness for side bar; requires w3-main container
w3-main	Page container for using w3-collapse

Dropdown Classes

w3-dropdown-click	Clickable dropdown
w3-dropdown-hover	Hoverable dropdown

Button Classes

w3-button	Gray rectangular button
w3-btn	Black rectangular button
w3-ripple	Rectangular with ripple effect
w3-bar	Group into horizontal bar

Input Classes

w3-input	Input element
w3-check	Checkbox
w3-radio	Radio button
w3-select	Select list
w3-animate-input	Slides open on focus

Animation Classes

w3-animate-top	Slide from top -300px
w3-animate-left	Slide from left -300px
w3-animate-bottom	Slide from bottom -300px
w3-animate-right	Slide from right -300px
w3-animate-opacity	Shift opacity from 0 to 1
w3-animate-zoom	Grows from 0 to 100%
w3-spin	Spin 360 degrees
w3-animate-input	Grows input field on focus

Font and Text Classes

w3-tiny	10px font size
w3-small	12px font size
w3-large	18px font size
w3-xlarge	24px font size
w3-xxlarge	32px font size
w3-xxxlarge	48px font size
w3-jumbo	64px font size
w3-wide	Wider text
w3-serif	Changes to serif font

Display Classes

w3-center	Centered content
w3-left	Float to left
w3-right	Float to right
w3-left-align	Left aligned text
w3-right-align	Right aligned text
w3-justify	Justified text
w3-circle	Round content
w3-hide	Hidden content
w3-show	Visible content
w3-show-inline-block	Visible inline content
w3-top	Top-of-page fixed content
w3-bottom	End-of-page fixed content
w3-display-container	For w3-display- classes
w3-display-topleft	Content at top left of box
w3-display-topright	Content at top right of box
w3-display-bottomleft	Content at bottom left of box
w3-display-bottomright	Content at bottom right of box
w3-display-left	Content at middle left of box
w3-display-right	Content at middle right of box
w3-display-middle	Content at center of box
w3-display-topmiddle	Content at top center of box
w3-display-bottommiddle	Content at bottom center of box
w3-display-position	Content at specified position
w3-display-hover	Content on hover over the box

Effect Classes

w3-opacity	Opacity 0.6
w3-opacity-off	Opacity 1.0
w3-opacity-min	Opacity 0.75
w3-opacity-max	Opacity 0.25
w3-grayscale-min	Grayscale 50%
w3-grayscale	Grayscale 75%
w3-grayscale-max	Grayscale 100%
w3-sepia-min	Sepia effect 50%
w3-sepia	Sepia effect 75%
w3-sepia-max	Sepia effect 100%
w3-overlay	Overlay effect

Color Classes

w3-COLOR	Background color
w3-hover-COLOR	Hover color
w3-text-COLOR	Text color
w3-hover-text-COLOR	Hover text color

Other Hover Classes

w3-hover-border-COLOR	Color on hover
w3-hover-opacity	Opacity on hover
w3-hover-opacity-off	Remove opacity on hover
w3-hover-shadow	Shadow on hover
w3-hover-grayscale	Grayscale on hover
w3-hover-sepia	Sepia on hover
w3-hover-none	Remove hover effects

Round Classes

w3-round	Rounded by 4px
w3-round-small	Rounded by 2px
w3-round-medium	Rounded by 4px
w3-round-large	Rounded by 8px
w3-round-xlarge	Rounded by 16px
w3-round-xxlarge	Rounded by 32px

Padding Classes

w3-padding-small	Pad 4px t/b, 8px l/r
w3-padding	Pad 8px t/b, 16px l/r
w3-padding-large	Pad 12px t/b, 24px l/r
w3-padding-16	Pad 16px t/b
w3-padding-24	Pad 24px t/b
w3-padding-32	Pad 32px t/b
w3-padding-48	Pad 48px t/b
w3-padding-64	Pad 64px t/b

Margin Classes

w3-margin	16px margin
w3-margin-top	16px top margin
w3-margin-right	16px right margin
w3-margin-bottom	16px bottom margin
w3-margin-left	16px left margin
w3-section	16px top and bottom margin

Border Classes

w3-border	Borders all sides
w3-border-top	Border on top
w3-border-right	Border on right
w3-border-bottom	Border on bottom
w3-border-left	Border on left
w3-border-0	No borders
w3-border-COLOR	Border color if visible
w3-bottombar	Thick border on bottom
w3-leftbar	Thick border on left
w3-rightbar	Thick border on right
w3-topbar	Thick border on top
w3-hover-border-COLOR	Hoverable border color

Theme Classes

w3-theme-COLOR

Set color theme

Created By

L3Home

Metadata

Languages: English

Published: 27th April, 2017
Last Updated: 28th April, 2017
Rated: 5 out of 5 stars based on 12 ratings

Favourited By

Comments

karoman120, 14:50 13 Nov 18

good

vikramsingh, 01:14 12 Mar 19

very nice your chetsheet

hack-club, 13:07 13 Nov 22

goooood thank you

Add a Comment

Related Cheat Sheets

Selenium WebDriver Cheat Sheet Cheat Sheet

Cypressio Cheat Sheet

ISTQB Test Automation Engineering Cheat Sheet

W3.CSS Cheat Sheet by L3Home