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>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</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>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</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
<!-- Sidebar -->
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
<h3 class="w3-bar-item">Menu</h3>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<!-- Page Content -->
<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>
