W3.

CSS Cheat Sheet

by L3Home via cheatography.com/35953/cs/11615/

Container Classes Responsive Classes Bar Classes

w3-con​tainer HTML container w3-row Fluid content row w3-bar Horizontal bar

w3-panel HTML container w3-row​- All cols have default w3- Vertical bar
pa​dding padding bar​-
w3-badge Circular badge
w3-content Fixed size centered content block
w3-tag Rectan​gular tag
w3- Common style for items
w3-half 1/2-of​-screen column
w3-ul Unordered list
bar​-
w3-third 1/3-of​-screen column
w3-dis​pla​y- For w3-dis​play- classes item
c​ont​ainer w3-two​third 2/3-of​-screen column
w3- Side bar
w3-code Code container block w3-quarter 1/4-of​-screen column sidebar
w3-cod​espan Code container inline w3-thr​eeq​uarter 3/4-of​-screen column w3- Respon​siv​eness for side bar;

w3-col Fluid content column col​laps requires w3-main container

Table Classes e
w3-rest Stretch last element to end
w3- Page container for using w3-
w3-table HTML table container l1 to l12 Sizing for large screens
main col​lapse
w3-striped Striped table m1 to m12 Sizing for medium screens
w3-border Bordered table s1 to s12 Sizes for small screens Dropdown Classes
w3-bor​dered Bordered lines w3-hid​e-small Hide on small screens w3-dro​pdo​wn-​click Clickable dropdown
w3-cen​tered Centered table w3-hid​e- Hide on medium screens w3-dro​pdo​wn-​hover Hoverable dropdown
w3-hov​erable Hoverable table m​edium

w3-tab​le-all All table properties set w3-hid​e-large Hide on large screens Button Classes

w3-res​ponsive Responsive table w3-image Responsive image

w3-button Gray rectan​gular button
w3-mobile Make element mobile​-first w3-btn Black rectan​gular button
Card Classes
w3-ripple Rectan​gular with ripple effect
w3-card Container w/ 2px shadow Layout Classes
w3-bar Group into horizontal bar
w3-card-4 Container w/ 4px shadow w3-cel​l-row Container for cells

w3-cell Layout column Input Classes

Modal Classes
w3-cel​l-top Aligns cell content (top)
w3-input Input element
w3-modal Modal container w3-cel​l-m​iddle Aligns cell content (mid) w3-check Checkbox
w3-mod​al-​content Modal pop-up element w3-cel​l-b​ottom Aligns cell content (bot) w3-radio Radio button
w3-tooltip Tooltip element
w3-select Select list
w3-text Tooltip text
w3-ani​mat​e-input Slides open on focus

By L3Home Published 27th April, 2017. Sponsored by Readability-Score.com

cheatography.com/l3home/ Last updated 28th April, 2017. Measure your website readability!
Page 1 of 3. https://readability-score.com
 W3.CSS Cheat Sheet
by L3Home via cheatography.com/35953/cs/11615/

Animation Classes Display Classes (cont) Effect Classes

w3-ani​mat​e-top Slide from top -300px w3-show Visible content w3-opacity Opacity 0.6

w3-ani​mat​e-left Slide from left -300px w3-sho​w- Visible inline content w3-opa​cit​y-off Opacity 1.0
i​nli​ne-​block
w3-ani​mat​e- Slide from bottom -300px w3-opa​cit​y-min Opacity 0.75
b​ottom w3-top Top-of​-page fixed w3-opa​cit​y-max Opacity 0.25
w3-ani​mat​e-right Slide from right -300px content
w3-gra​ysc​ale-min Grayscale 50%
w3-bottom End-of​-page fixed
w3-ani​mat​e- Shift opacity from 0 to 1
w3-gra​yscale Grayscale 75%
content
o​pacity
w3-gra​ysc​ale-max Grayscale 100%
w3-ani​mat​e-zoom Grows from 0 to 100% w3-dis​pla​y- For w3-dis​play- classes
c​ont​ainer w3-sep​ia-min Sepia effect 50%
w3-spin Spin 360 degrees
w3-dis​pla​y-t​opleft Content at top left of box w3-sepia Sepia effect 75%
w3-ani​mat​e-input Grows input field on
w3-dis​pla​y-t​opright Content at top right of w3-sep​ia-max Sepia effect 100%
focus
box w3-overlay Overlay effect
Font and Text Classes w3-dis​pla​y- Content at bottom left of
b​ott​omleft box Color Classes
w3-tiny 10px font size
w3-dis​pla​y- Content at bottom right w3-COLOR Background color
w3-small 12px font size
b​ott​omright of box
w3-hov​er-​COLOR Hover color
w3-large 18px font size w3-dis​pla​y-left Content at middle left of
w3-tex​t-COLOR Text color
w3-xlarge 24px font size box
w3-hov​er-​tex​t-COLOR Hover text color
w3-xxlarge 32px font size w3-dis​pla​y-right Content at middle right
of box
w3-xxx​large 48px font size
Other Hover Classes
w3-dis​pla​y-m​iddle Content at center of box
w3-jumbo 64px font size
w3-hov​er-​bor​der​- Color on hover
w3-wide Wider text w3-dis​pla​y- Content at top center of
COLOR
t​opm​iddle box
w3-serif Changes to serif font
w3-dis​pla​y- Content at bottom center w3-hov​er-​opacity Opacity on hover

b​ott​omm​iddle of box w3-hov​er-​opa​cit​y-off Remove opacity on

Display Classes
w3-dis​pla​y-p​osition Content at specified hover
w3-center Centered content position w3-hov​er-​shadow Shadow on hover
w3-left Float to left w3-dis​pla​y-hover Content on hover over w3-hov​er-​gra​yscale Grayscale on hover
w3-right Float to right the box
w3-hov​er-​sepia Sepia on hover
w3-lef​t-align Left aligned text w3-hov​er-none Remove hover effects
w3-rig​ht-​align Right aligned text

w3-justify Justified text

w3-circle Round content

w3-hide Hidden content

By L3Home Published 27th April, 2017. Sponsored by Readability-Score.com

cheatography.com/l3home/ Last updated 28th April, 2017. Measure your website readability!
Page 2 of 3. https://readability-score.com
 W3.CSS Cheat Sheet
by L3Home via cheatography.com/35953/cs/11615/

Round Classes Border Classes (cont)

w3-round Rounded by 4px w3-bor​der-0 No borders

w3-rou​nd-​small Rounded by 2px w3-bor​der​-COLOR Border color if visible

w3-rou​nd-​medium Rounded by 4px w3-bot​tombar Thick border on

bottom
w3-rou​nd-​large Rounded by 8px
w3-leftbar Thick border on left
w3-rou​nd-​xlarge Rounded by 16px

w3-rou​nd-​xxlarge Rounded by 32px w3-rig​htbar Thick border on right

w3-topbar Thick border on top

Padding Classes w3-hov​er-​bor​der​- Hoverable border
COLOR color
w3-pad​din​g-small Pad 4px t/b, 8px l/r

w3-padding Pad 8px t/b, 16px l/r

Theme Classes
w3-pad​din​g-large Pad 12px t/b, 24px l/r
w3-the​me-​COLOR Set color theme
w3-pad​ding-16 Pad 16px t/b

w3-pad​ding-24 Pad 24px t/b

w3-pad​ding-32 Pad 32px t/b

w3-pad​ding-48 Pad 48px t/b

w3-pad​ding-64 Pad 64px t/b

Margin Classes

w3-margin 16px margin

w3-mar​gin-top 16px top margin

w3-mar​gin​-right 16px right margin

w3-mar​gin​- 16px bottom margin

bottom

w3-mar​gin​-left 16px left margin

w3-section 16px top and bottom

margin

Border Classes

w3-border Borders all sides

w3-bor​der-top Border on top

w3-bor​der​-right Border on right

w3-bor​der​-bottom Border on bottom

w3-bor​der​-left Border on left

By L3Home Published 27th April, 2017. Sponsored by Readability-Score.com

cheatography.com/l3home/ Last updated 28th April, 2017. Measure your website readability!
Page 3 of 3. https://readability-score.com