Design Blogger with W3.CSS

W3.CSS is a modern CSS framework to design Blogger blog.

Responsive, smaller and faster.
W3CSS is free, easier to learn and easier to use.
No jQuery or JavaScript library required.
Make Blogger blog super fast.
Provides CSS equality for all devices. PC, laptop, tablet, and mobile.

Add W3.CSS in Blogger

Go to Template > Edit HTML & past the code after <head> tag.

Use W3.CSS in Blogger

Add W3CSS classes for design your content.

<button class="w3-btn w3-light-grey w3-round w3-border">Button</button>

Background Color Classes

w3-redw3-pinkw3-purplew3-deep-purplew3-indigow3-bluew3-light-bluew3-cyanw3-aquaw3-tealw3-greenw3-light-greenw3-limew3-sandw3-khakiw3-yelloww3-amberw3-orangew3-deep-orangew3-blue-greyw3-brownw3-light-greyw3-greyw3-dark-greyw3-blackw3-pale-redw3-pale-yelloww3-pale-greenw3-pale-blue

Text Color Classes

w3-text-redw3-text-pinkw3-text-purplew3-text-deep-purplew3-text-indigow3-text-bluew3-text-light-bluew3-text-cyanw3-text-aquaw3-text-tealw3-text-greenw3-text-light-greenw3-text-limew3-text-sandw3-text-khakiw3-text-yelloww3-text-amberw3-text-orangew3-text-deep-orangew3-text-blue-greyw3-text-brownw3-text-light-greyw3-text-greyw3-text-whitew3-text-dark-greyw3-text-black

Padding Classes

w3-paddingw3-padding-tinyw3-padding-smallw3-padding-mediumw3-padding-largew3-padding-xlargew3-padding-xxlargew3-padding-jumbow3-padding-0w3-padding-4w3-padding-8w3-padding-12w3-padding-16w3-padding-24w3-padding-32w3-padding-48w3-padding-64w3-padding-128w3-padding-topw3-padding-bottomw3-padding-leftw3-padding-right

Margin Classes

w3-marginw3-margin-0w3-margin-topw3-margin-bottomw3-margin-leftw3-margin-right

Card Classes

w3-cardw3-card-2w3-card-4w3-card-8w3-card-12w3-card-16w3-card-24w3-hover-shadow

Round Classes

w3-roundw3-round-smallw3-round-mediumw3-round-largew3-round-xlargew3-round-xxlargew3-round-jumbow3-circle

Float & Align Classes

w3-leftw3-rightw3-centerw3-verticalw3-left-alignw3-right-alignw3-justifyw3-display-topleftw3-display-toprightw3-display-bottomleftw3-display-bottomrightw3-display-middlew3-display-topmiddlew3-display-bottommiddlew3-topw3-bottomw3-overlay

Show / Hide Classes

w3-hidew3-showw3-hide-smallw3-hide-mediumw3-hide-large

Text Size Classes

w3-tinyw3-smallw3-mediumw3-largew3-xlargew3-xxlargew3-xxxlargew3-jumbow3-slimw3-wide

Complete W3.CSS Guide

View complete W3.CSS guide from w3schools here.

☰ v5Tutorial Complete Blogger Tutorials