W3.CSS Framework Guide

W3.
CSS
(a CSS Framework)
Ref: https://www.w3schools.com/ and
other internet based tutorials
W3.CSS
◼ W3.CSS is a modern CSS framework with support for desktop,
tablet, and mobile design by default.
◼ W3.CSS is smaller and faster than similar CSS frameworks.
◼ W3.CSS was designed to be a high quality alternative to
Bootstrap.
◼ It was designed to be smaller, faster, easier to learn, and easier
to use.
◼ W3.CSS is free to use. No license is necessary.
How to use W3.CSS
◼ To use W3.CSS in your web site, just add below link to

"w3.css" from your web pages:
❑ <link rel="stylesheet" href="https://www.w3schools.co
m/w3css/4/w3.css">
◼ Other way is to download w3.css
from w3css_downloads and add a link to w3.css:
❑ <link rel="stylesheet" href="w3.css">
W3.CSS Colors
◼ The w3-color and w3-text-color classes can be used to

color any HTML element:
◼ The w3-hover-color classes define the background hover
color for any HTML element
◼ The w3-hover-text-color classes define the text hover
color for any HTML element:
Container Class
◼ The w3-container class adds a 16px left and right padding to any
HTML element.
◼ The w3-container class is the perfect class to use for all HTML
container elements like: <div>, <article>, <section>, <header>,
<footer>, <form>, and more.
◼ To use a container, just add a w3-container class to any element:
◼ <div class="w3-container">
<p>The w3-container class is an important w3.CSS class.</p>
</div>
W3.CSS Panels
◼ The w3-panel class adds a 16px top and bottom margin and a 16px
left and right padding to any HTML element.
◼ The w3-panel class is perfect for displaying notes.
◼ The w3-panel class is perfect for displaying quotes. Like:
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
◼ Show or hide the panel is easy using panel.
W3.CSS Card
W3.CSS Card Classes
◼ W3.CSS provides the following classes for displaying paper-

like cards:
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)
◼ The w3-hover-shadow class adds a shadow effect on

hover
W3.CSS Buttons
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-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.CSS Buttons
◼ Both the w3-button class and the w3-btn class add button-
behavior to any HTML elements.
◼ The most common elements to use are <input type="button">
and <button>
<button class="w3-button w3-black">Button Button</button>

W3.CSS Quotes
◼ The w3-panel class is the perfect class to display quotes.

◼ Quotes are often displayed with a grey background, a left
border bar, and an italic font style:
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif"><i>"Make it as simple
as possible, but not simpler."</i>
◼ You can use standard HTML symbols for making
quotes:
Symbol Code
≪ #8810
✂ #9986
❝ #10077
❞ #10078
❠ #10080
✔ #10004
W3.CSS Tables
◼ W3.CSS provides the following classes for tables:
Class Defines
w3-table Container for an HTML table
w3-striped Striped table
w3-border Bordered table
w3-bordered Bordered lines
w3-centered Centered table content
w3-hoverable Hoverable table
w3-table-all All properties set
W3.CSS Icons
◼ To insert an icon:
❑ Include the icon library from a CDN (Content Delivery Network)
in the <head> section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l
ibs/font-awesome/4.7.0/css/font-awesome.min.css">
❑ Add the name of the icon class to any inline HTML element.
❑ Tip: The <i> and <span> elements are widely used to add icons.
◼ To control the size of the icon, change the font-size property of the
icon, or use one of the w3-size classes:
❑ w3-tiny
❑ w3-small
❑ w3-large
❑ w3-xxlarge
❑ w3-xxxlarge
❑ w3-jumbo
Example of some Icons
W3.CSS Icons
◼ Some Font Awesome Icons

❑ fa fa-home
❑ fa fa-bars
❑ fa fa-arrow-left
❑ fa fa-arrow-right
❑ fa fa-search
❑ fa fa-close
❑ fa fa-refresh
❑ fa fa-trash
❑ fa fa-male
❑ fa fa-car
❑ fa fa-truck
❑ fa fa-plan
W3.CSS Navigation
◼ W3.CSS provides the following classes for navigation bars:
Class Defines
w3-bar Horizontal container for HTML elements
w3-bar-block Vertical container for HTML elements
w3-bar-item Container bar elements
w3-sidebar Vertical sidebar for HTML elements
w3-mobile Makes any bar element mobile-first responsive
w3-dropdown-hover Hoverable dropdown element
w3-dropdown-click Clickable dropdown element (instead of hover)
<div class="w3-bar w3-black">

<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
W3.CSS Navigation
◼ Navigation Bar with Icons

<div class="w3-bar w3-light-grey w3-border">
<a href="#" class="w3-bar-item w3-button w3-green"> <i class="fa fa-home">
</i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"> </i> </a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> </a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"> </i> </a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"> </i> </a>
</div>
Vertical Navigation Bar
◼ The w3-bar-block class is a container for displaying
HTML elements vertically.
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
</div>
W3.CSS Sidebar
W3.CSS Vertical Navigation Bars
◼ With side navigation, you have several options:

❑ Always display the navigation pane to the left of the
page content
❑ Use a collapsible, "fully automatic" responsive side
navigation
❑ Open navigation pane over the left part of the page
content
❑ Open navigation pane over all of the page content
❑ Slide the page content to the right when opening the

navigation pane
❑ Display the navigation pane on the right side instead
of the left side

Always Display the Sidebar

<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
<h3 class="w3-bar-item">Menu</h3>
</div>

<div style="margin-left:25%">
<div class="w3-container w3-teal">
<h1>My Page</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
</div>
Slide the Page Content to the Right
W3.CSS SlideShow
◼ Manual Slideshow
◼ Displaying a manual slideshow with W3.CSS is very easy.
◼ Just create many elements with the same class name:
◼ Example
<img class="mySlides" src="img_snowtops.jpg">

<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
◼ Add two buttons to scroll the images:

◼ Example
<button class="w3-button w3-display-left" onclick="plusDivs(-1)"> ❮
</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)"> ❯
</button>

W3.CSS Framework Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

W3.CSS Framework Guide

Uploaded by

Copyright:

Available Formats

W3.

◼ To use W3.CSS in your web site, just add below link to

◼ The w3-color and w3-text-color classes can be used to

◼ W3.CSS provides the following classes for displaying paper-

◼ The w3-hover-shadow class adds a shadow effect on

w3-bar A horizontal bar that can be used to group buttons together.

w3-circle Can be used to define a circular button.

<button class="w3-button w3-black">Button Button</button>

◼ The w3-panel class is the perfect class to display quotes.

◼ W3.CSS provides the following classes for tables:

◼ Some Font Awesome Icons

<div class="w3-bar w3-black">

◼ Navigation Bar with Icons

◼ With side navigation, you have several options:

❑ Slide the page content to the right when opening the

of the left side

◼ Just create many elements with the same class name:

<img class="mySlides" src="img_snowtops.jpg">

◼ Add two buttons to scroll the images:

You might also like