Embedded Files
VIMALA GURUKUL
CSS Framework
A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid.
List of Popular CSS Framework
Bootstrap
Foundation
W3.CSS
Bulma
UIkit
Semantic UI
Susy
Materialize
Pure
Skeleton
Milligram
Introduction
W3.CSS is a free and modern CSS framework published by W3school for developing responsive, mobile-first websites.
W3.CSS is Smaller, Faster and Easier to Use.
W3.CSS is a modern, responsive, mobile first CSS framework.
W3.CSS provides equality for all browsers: Chrome. Firefox. Edge. IE. Safari. Opera.
W3.CSS provides equality for all devices: Desktop. Laptop. Tablet. Mobile.
W3.CSS is standard CSS only (No jQuery or JavaScript library).
How to use w3.css
Just add a link to “w3.css” from your web pages.
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
Or
Download w3.css from w3css downloads and add a link to w3.css:
<link rel=”stylesheet” href=”w3.css”>
W3.CSS Colors
There are following classes in W3.CSS:
w3-color It is used to specify the background color of the element.
Like, w3-red, w3-yellow, etc.
w3-text-color It is used to specify the text color
Like, w3-text-red, w3-text-yellow, etc.
w3-hover-color It is used to specify background color when mouse is moved over the element.
Like, w3-hover-red, w3-hover-yellow, etc.
w3-hover-text-color It is used to specify text color of the element when mouse is moved over the element.
Like, w3-hover-text-red, w3-hover- text-yellow, etc.
Example
<!doctype html>
<html>
<head>
<title>W3.CSS Colors </title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-purple">
<h1 class="w3-green w3-text-yellow w3-hover-blue w3-hover-text-orange"> VIMALA GURUKUL</h1>
<p> A World Class Computer Academy </p>
</div>
</body>
</html>
W3.CSS Containers
W3.CSS provides two classes w3-container, w3-panel that are used mostly with container elements (like <div>, <header>, <footer>, <article>, <section>, etc.) of HTML for providing common padding and margin to the elements.
W3-container: The w3-container class is used to add 16px left and right padding to HTML elements.
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-yellow">
<h1> ABC</h1>
<p> I am Container 1 </p>
</div>
<div class="w3-container w3-red">
<h1> DEF</h1>
<p> I am Container 2 </p>
</div>
</body>
</html>
w3-panel : The w3-panel class is used to add 16px left and right padding along with 16px top and bottom margin also to HTML elements.
Example
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-panel w3-aqua">
<h1> GHI</h1>
<p> I am Panel 1 </p>
</div>
<div class="w3-panel w3-teal">
<h1> JKL</h1>
<p> I am Panel 2 </p>
</div>
</body>
</html>
W3.CSS Borders
W3.CSS provides various numbers of classes for defining border of HTML elements.
These are:
w3-border: The w3-border class is used to define border at all side to HTML element.
w3-border-top : The w3-border-top class is used to define border at top side to HTML element.
w3-border-bottom : The w3-border-bottom class is used to define border at bottom side to HTML element.
w3-border-left : The w3-border-left class is used to define border at left side to HTML element.
w3-border-right : The w3-border-right class is used to define border at right side to HTML element.
w3-border-0 : The w3-border-0 class is used to remove all borders to HTML element.
Example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border">
I have border at all side.</h1> <br>
<h1 class="w3-panel w3-border-left">
I have border at left side. </h1> <br>
<h1 class="w3-panel w3-border-top w3-border-bottom">
I have border at top and bottom side. </h1> <br>
<h1 class="w3-panel w3-border-left w3-border-right">
I have border at left and right side. </h1>
</div>
</body>
</html>
Setting Color of the border
Following two classes are for setting color of the border:
w3-border-color : The w3-border-color class is used to define color of the border to HTML element. Color needs to be specified like w3-border-khaki, w3-border-yellow etc.
w3-hover-border-color : The w3-hover-border-color class is used to define color of the border when mouse is moved over the HTML element. Color needs to be specified like w3-hover-border-red, w3-border-aqua etc.
Example
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border w3-border-lime">
I have lime color border at all side.</h1> <br>
<h1 class="w3-panel w3-border-left w3-border-right
w3-border-red">
I have red color border at left and right side. </h1> <br>
<h1 class="w3-panel w3-border-top w3-border-bottom
w3-yellow w3-border-deep-purple">
I have deep purple color border at top and bottom side
and yellow background color. </h1> <br>
<h1 class="w3-panel w3-border w3-border-lime w3-
hover-border-green">
I have lime color border at all side, green color border
when mouse moved over me.</h1> <br>
</div>
</body>
</html>
Setting thick border
Following classes are for setting thick border:
w3-topbar : The w3-topbar class is used to define thick border at top side to HTML element.
w3-bottombar : The w3-bottombar class is used to define thick border at bottom side to HTML element.
w3-leftbar : The w3-leftbar class is used to define thick border at left side to HTML element
w3-rightbar : The w3-rightbar class is used to define thick border at right side to HTML element.
Example:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-leftbar w3-border-lime">
I have lime color thick border at left side.</h1> <br>
<h1 class="w3-panel w3-bottombar w3-border-red">
I have red color thick border at bottom side. </h1> <br>
<h1 class="w3-panel w3-topbar w3-yellow w3-border-deep-purple">
I have deep purple color thick border at top side and yellow background color. </h1> <br>
<h1 class="w3-panel w3-rightbar w3-border-lime w3-hover-border-green">
I have lime color thick border at right side, that changes
into green color when mouse moved over me.</h1>
<br>
</div>
</body>
</html>
Setting Rounded border
Following classes are used for setting rounded border:
w3-round : The w3-round class is used to define rounded border to HTML element.
w3-round-size : The w3-round-size class is used to define rounded border by specifying size. The size can be small, medium, large, xlarge, xxlarge.
Example:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1 class="w3-panel w3-border w3-border-lime w3-
round">
I have lime color rounded border.</h1> <br>
<h1 class="w3-panel w3-border w3-round-small w3-
border-red">
I have red color small rounded border. </h1> <br><h1 class="w3-panel w3-round-large w3-yellow w3-
border-deep-purple">
I have deep purple color large rounded border and
yellow background color. </h1> <br>
<h1 class="w3-panel w3-border w3-round-xlarge w3-
border-lime">
I have lime color xlarge rounded border.</h1> <br>
<h1 class="w3-panel w3-border w3-round-xxlarge w3-
border-deep-purple">
I have deep purple color xxlarge rounded border. </h1>
</div>
</body>
</html>
W3.CSS Fonts
W3.CSS provides default font size that are easier to read as following:
Default font: Verdana
Default font size: 15px
Default line spacing: 1.5
In W3.CSS, headings are styled as:Font for all heading level- “Verdana” and
font-size for <h1> - 36px,
<h2> - 30px,
<h3> - 24px,
<h4> - 20px,
<h5> - 18px,
<h6> - 16px
Example
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h1> Heading Level 1 </h1>
<h2> Heading Level 2 </h2>
<h3> Heading Level 3 </h3>
<h4> Heading Level 4 </h4>
<h5> Heading Level 5 </h5>
<h6> Heading Level 6 </h6>
</body>
</html>
Setting size of the fonts:
The w3-size class is used to set the size of the fonts. The size can take the value as:
w3-tiny
w3-small
w3-medium
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<p class="w3-tiny"> I am tiny size font. </p>
<p class="w3-small"> I am small size font.</p>
<p class="w3-medium"> I am medium size font. (Default size) </p>
<p class="w3-large"> I am large size font. </p>
<p class="w3-xlarge"> I am xlarge size font. </p>
<p class="w3-xxlarge"> I am xxlarge size font.</p>
<p class="w3-xxxlarge">I am xxxlarge size font.</p>
<p class="w3-jumbo"> I am jumbo size font. </p>
</div>
</body>
</html>
W3.CSS Text alignment
The following classes are available in W3.CSS to style the text:
w3-left-align : The w3-left-align class is used to left align the text.
w3-right-align : The w3-right-align class is used to right align the text.
w3-center : The w3-center class is used to center align the HTML element.
w3-wide : The w3-wide class is used to add extra space between the letters that makes wider look of the text.
w3.slim : The w3-slim class is used to add extra space between the characters that makes slim look of the text.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-xlarge">
<p class="w3-left-align"> I am left aligned paragraph. </p>
<p class="w3-right-align"> I am right aligned paragraph. </p>
<p class="w3-center"> I am centrally aligned paragraph. </p>
<p class="w3-wide"> I have wider look text. </p>
<p class="w3-slim"> I have slim look text. </p>
</body>
</html>
W3.CSS Table
W3.CSS provides various numbers of classes for styling table. These are:
w3-table : The w3-table class is used as container for HTML table.
w3-striped : The w3-striped class is used to create striped table.
w3-border : The w3-border class is used to make border around the table.
w3-bordered : The w3-bordered class is used to make bordered lines on the bottom of each row.
w3-centered : The w3-centered class is used to centrally align the contents of the table.
w3-hoverable : The w3-hoverable class is used to display hoverable table (Background color changes when mouse moved over table).
w3-table-all : The w3-table-all class is used to set all the above properties except w3-centered, w3- hoverable.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> List of Products </h1>
<table class="w3-table w3-striped w3-bordered w3-centered w3-hoverable">
<tr class="w3-red">
<th> Product Name</th>
<th> Make</th>
<th> Cost</th>
</tr>
<tr>
<td>Mouse</td>
<td>Dell </td>
<td>300</td>
</tr>
<tr>
<td>Keyboard</td>
<td>HP</td>
<td>400</td>
</tr>
<tr>
<td>Pen drive</td>
<td>Sony</td>
<td>800</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Images
Images are important factors in website. Effective use of images makes better user experience to the visitor of website. W3.CSS classes provide an excellent way to present and design stylish and attractive images.
w3-card class is give shadow effects just like card to the image.
w3-margin class adds 16px space around the outside of the image.
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-panel">
<img src="quote.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-4 w3-margin">
<img src="quote-freedom.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-2 w3-margin">
<img src="quote-happy.jpg" alt="Inspirational Quotes" width="300px" class="w3-card-4 w3-margin">
</div>
</body>
</html>
Classes for special effects to the image:
w3-sepia: This class gives sepia effects (brownish-reddish look) to the image. Two other related classes (that gives the level of sepia effects) are w3-sepia-min, w3-sepia-max.
w3-grayscale: This class gives grayscale effects (black & white look) to the image. Two other related classes (that gives the level of grayscale effects) are w3-grayscale-min, w3-grayscale-max.
w3-opacity: This class gives transparency effects to the image. Two other related classes (that gives the level of transparency effects) are w3-opacity-min, w3-opacity-max.
w3-opacity-off: This class removes the transparency effects.
w3-hover-sepia: This class gives the sepia effects when mouse is moved over the image.
w3-hover-grayscale: This class gives the grayscale effects when mouse is moved over the image.
w3-hover-opacity: This class gives the transparency effects when mouse is moved over the image.
w3-hover-opacity-off: This class removes the transparency effects when mouse is moved over the image.
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1> Sepia Effects </h1>
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-hover-sepia">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia-min">
<img src="quote.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-sepia-max">
</div>
<div class="w3-container">
<h1> Gray-scale Effects </h1>
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-hover-grayscale">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale-min">
<img src="quote-happy.jpg" alt="Inspirational Quotes" height="200px" width="200px" class="w3-border w3-grayscale-max">
</div>
</body>
</html>
W3.CSS Display
W3.CSS provides the following display classes:
Class Defines
w3-display-container Container for w3-display-classes
w3-display-topleft Displays content at the top left corner of the w3-display-container
w3-display-topright Displays content at the top right corner of the w3-display-container
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright Displays content at the bottom right corner of the w3-display-container
w3-display-left Displays content to the left (middle left) of the w3-display-container
w3-display-right Displays content to the right (middle right) of the w3-display-container
w3-display-middle Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle Displays content at the top middle of the w3-display-container
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container
w3-display-position Displays content at a specified position in the w3-display-container
w3-display-hover Displays content on hover inside the w3-display-container
w3-left Floats an element to the left (float: left)
w3-right Floats an element to the right (float: right)
w3-show Shows an element (display:block)
w3-hide Hides an element (display:none)
w3-mobile Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>The <strong>w3-display-container</strong> Class</h1>
<p>Position of text inside an image</p>
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle w3-xxlarge">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
</div>
</body>
</html>
Display Hover
The w3-display-hover class displays content on hover inside a w3-display-container (goes from hidden to shown).
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>The <strong>w3-display-hover</strong> Class</h1>
<div class="w3-display-container w3-hover-opacity" style="width:50%">
<img src="img_avatar3.png" alt="Avatar" style="width:100%">
<div class="w3-display-middle w3-display-hover w3-xlarge">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>
</div>
</body>
</html>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Floating Classes</h2>
<p>The w3-left class floats an element to the left, and the w3-right class floats an element to the right:</p>
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red w3-padding">w3-left</div>
<div class="w3-right w3-blue w3-padding">w3-right</div>
</div>
</div>
</body>
</html>
W3.CSS Buttons
W3.CSS provides the following classes for 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.
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">, <button>, and <a>:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Buttons (w3-button)</h2>
<input type="button" class="w3-button w3-black" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="#" class="w3-button w3-black">Link Button</a>
</div>
<div class="w3-container">
<h2>Buttons (w3-btn)</h2>
<input type="button" class="w3-btn w3-black" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="#" class="w3-btn w3-black">Link Button</a>
</div>
</body>
</html>
Button Colors
Black, Khaki, Yellow, Red, Purple, Aqua Blue, Indigo, Green, Teal
All the w3-color classes is used to add color to buttons:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Button Colors</h2>
<p><button class="w3-button w3-red">Red</button></p>
<p><button class="w3-button w3-pink">Pink</button></p>
<p><button class="w3-button w3-purple">Purple</button></p>
<p><button class="w3-button w3-deep-purple">Deep Purple</button></p>
<p><button class="w3-button w3-indigo">Indigo</button></p>
<p><button class="w3-button w3-blue">Blue</button></p>
<p><button class="w3-button w3-light-blue">Light Blue</button></p>
<p><button class="w3-button w3-cyan">Cyan</button></p>
<p><button class="w3-button w3-aqua">Aqua</button></p>
<p><button class="w3-button w3-teal">Teal</button></p>
<p><button class="w3-button w3-green">Green</button></p>
<p><button class="w3-button w3-light-green">Light Green</button></p>
<p><button class="w3-button w3-lime">Lime</button></p>
<p><button class="w3-button w3-sand">Sand</button></p>
<p><button class="w3-button w3-khaki">Khaki</button></p>
<p><button class="w3-button w3-yellow">Yellow</button></p>
<p><button class="w3-button w3-amber">Amber</button></p>
<p><button class="w3-button w3-orange">Orange</button></p>
<p><button class="w3-button w3-deep-orange">Deep Orange</button></p>
<p><button class="w3-button w3-brown">Brown</button></p>
<p><button class="w3-button w3-blue-grey">Blue Grey</button></p>
<p><button class="w3-button w3-light-grey">Light Grey</button></p>
<p><button class="w3-button w3-grey">Grey</button></p>
<p><button class="w3-button w3-dark-grey">Dark Grey</button></p>
<p><button class="w3-button w3-black">Black</button></p>
<p><button class="w3-button w3-pale-red">Pale-red</button></p>
<p><button class="w3-button w3-pale-yellow">Pale-yellow</button></p>
<p><button class="w3-button w3-pale-green">Pale-green</button></p>
<p><button class="w3-button w3-pale-blue">Pale-blue</button></p>
</div>
</body>
</html>
Navigation Bars
Button bars can easily be used as navigation bars:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Button Bars</h2>
<p>Buttons bars can easily be used as navigation bars:</p>
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
<br>
<div class="w3-bar w3-border">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
<br>
<div class="w3-bar w3-green">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
<br>
<div class="w3-bar w3-red">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
<br>
<div class="w3-bar w3-teal">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
</div>
</body>
</html>
The size of each items can be defined by using style=”width:”
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Button Bars</h2>
<p>The size of each items can be defined by using <strong>style="width:"</strong>:</p>
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-teal" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
</div>
</body>
</html>
Left and Right Buttons
Use the .w3-left class and the .w3-right class to float buttons to the left or to the right:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Left and Right Buttons</h2>
<div class="w3-bar w3-black">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
<p>Used to create "previous/next" buttons:</p>
<div class="w3-bar">
<button class="w3-button w3-left w3-light-grey">« Previous</button>
<button class="w3-button w3-right w3-green">Next »</button>
</div>
</div>
</body>
</html>
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Circular Buttons</h2>
<button class="w3-button w3-xlarge w3-circle w3-black">+</button>
<button class="w3-button w3-xlarge w3-circle w3-teal">+</button>
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4">+</button>
</div>
</body>
</html>
W3.CSS Lists
Stylish and attractive lists can be designed using W3.CSS classes.
w3-ul : The w3-ul class makes the stylish list. It removes the list marker and adds inner line in the list items.
Example:
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li>
</ul>
</div>
</body>
</html>
Other classes of W3CSS can also be used to give more stylish look to the list.
Some of classes are:
w3-hoverable: To give grey background color when mouse is moved over the list.
w3-color: To give background color to the list.
w3-hover-color: To give background color when mouse is moved over the list.
w3-border: To give border to the list. Other border classes also can be used.
w3-center: To centrally align the text of list.
w3-size: To set the size of text.
w3-card-number: To give shadow effects just like cards to the list. Number maybe 2 or 4.
w3-padding-number: To add padding to list items. Number may be 16, 24, 32, 48, and 64.
w3-hover-shadow: To give shadow effects on mouser hover.
Example:
<html>
<head><meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large w3-hoverable w3-center">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li>
</ul>
</div>
</body>
</html>
W3.CSS Input (form)
Example:
<! DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-blue">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<label>First Name</label>
<input class="w3-input" type="text"></p>
<p>
<label>Last Name</label>
<input class="w3-input" type="text"></p>
<p>
<label>Email</label>
<input class="w3-input" type="text"></p>
</form>
</body>
</html>
Input Cards
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Input Card</h2>
<div class="w3-card-4">
<div class="w3-container w3-green">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<input class="w3-input" type="text">
<label>First Name</label></p>
<p>
<input class="w3-input" type="text">
<label>Last Name</label></p>
</form>
</div>
</div>
</body>
</html>
Animated Inputs
The w3-animate-input class transforms the width of an input field to 100% when it gets focus:
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<form class="w3-container">
<h2>Animated Inputs</h2>
<p>The w3-animate-input class animates the width of an input to 100%. Click on the inputs below to see the effect:</p>
<input class="w3-input w3-animate-input" type="text" style="width:135px"><br>
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
</form>
</body>
</html>
Form Elements in a Grid
In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Form Elements in a Grid</h2>
<p>In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="Three">
</div>
</div>
</body>
</html>
Icon Labels
Example:
<! DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Contact Us</h2>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="first" type="text" placeholder="First Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="last" type="text" placeholder="Last Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="email" type="text" placeholder="Email">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="message" type="text" placeholder="Message">
</div>
</div>
<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Send</button>
</form>
</body>
</html>
W3.CSS Icons
Icon Libraries
With W3.CSS you can use the icon library you like, such as:
Font Awesome Icons
Google Material Design Icons
Bootstrap Icons
Using an Icon Library
To insert an icon:
Include the icon library from a CDN (Content Delivery Network) in the <head> section.
2. 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
Some Font Awesome Icons
Example 1
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h1>Using Font Awesome Icons</h1>
<div class="w3-padding w3-xlarge w3-teal">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="fa fa-home"></i> Home</li>
<li class="w3-large"><i class="fa fa-home"></i> Home</li>
<li class="w3-xlarge"><i class="fa fa-home"></i> Home</li>
<li class="w3-xxlarge"><i class="fa fa-home"></i> Home</li>
<li class="w3-xxxlarge"><i class="fa fa-home"></i> Home</li>
<li class="w3-jumbo w3-teal"><i class="fa fa-home"></i> Home</li>
</ul>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left fa fa-home"></i></button></p>
<p><i class="w3-jumbo w3-spin fa fa-home"></i></p>
</div>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.material-icons {vertical-align:-14%}
</style>
<body>
<div class="w3-container">
<h1>Using Google Icons</h1>
<div class="w3-padding w3-xlarge w3-teal">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="material-icons">home</i> Home</li>
<li class="w3-large"><i class="material-icons w3-large">home</i> Home</li>
<li class="w3-xlarge"><i class="material-icons w3-xlarge">home</i> Home</li>
<li class="w3-xxlarge"><i class="material-icons w3-xxlarge">home</i> Home</li>
<li class="w3-xxxlarge"><i class="material-icons w3-xxxlarge">home</i> Home</li>
<li class="w3-jumbo w3-teal"><i class="material-icons w3-jumbo">home</i> Home</li>
</ul>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left material-icons">home</i></button></p>
<p><i class="material-icons w3-spin w3-jumbo">home</i></p>
</div>
</body>
</html>
Example 3
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="w3-container">
<h1>Using Bootstrap Icons</h1>
<div class="w3-padding w3-xlarge w3-teal">
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
Welcome!
</div>
<div class="w3-padding w3-xlarge w3-text-orange">
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
Welcome!
</div>
<ul class="w3-ul">
<li><i class="glyphicon glyphicon-home"></i> Home</li>
<li class="w3-large"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class="w3-xlarge"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class="w3-xxlarge"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class="w3-xxxlarge"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class="w3-jumbo w3-teal"><i class="glyphicon glyphicon-home"></i> Home</li>
</ul>
<br>
<p><button class="w3-btn w3-orange w3-xlarge">Button<i class="w3-margin-left glyphicon glyphicon-home"></i></button></p>
<p><i class="glyphicon glyphicon-home w3-spin w3-jumbo"></i></p>
</div>
</body>
</html>
How TO - Social Media Buttons
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa-rss {
background: #ff6600;
color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
</body>
</html>
Responsive Images:
A responsive image is one which is resized by itself to be fit according to the screen size.
The w3-image class is used to make responsive image. The image scales down to be fit on smaller screen but not scale up more than original size of image on larger screen.
<img src="quote-happy.jpg" alt="Inspirational Quotes" class="w3-image">
To scale up and down both according to the screen size [set CSS width property 100%]:
<img src="quote-happy.jpg" alt="Inspirational Quotes" style="width:100%>
To scale down to be fit on smaller screen and scale up to specified on larger screen [Set CSS max-width property accordingly]
<img src="quote-happy.jpg" alt="Inspirational Quotes" style="width:100%; max-width:350px>
W3.CSS Responsive Fluid Grid
W3.CSS provides an efficient way to arrange elements properly in different size of screen display. It is very important to handle elements to make it looks better because websites are supposed to be accessed using different devices like mobiles/tablets/desktop and the screen size of these devices are vary from one another.
W3.CSS grid is combination of rows and columns. Grids are responsive, columns are arranged itself automatically on different screen size. On larger screen contents are organized into columns but on smaller screen the contents are stacked on the top of each other.
w3-row is container class used to define row. [w3-row-padding is used to define row with 08px left and right padding.]
w3-col is container class used to define each column in the row. Each row can have maximum 12 columns.
The subclasses are also used with w3-col class to define column width and number of column to be appeared on different screen size.
For small screen (Mobile phones)
s1, s2, s3, s4, ….., s12 sub classes are for defining column width and number of column on smaller screen [s1 means 8.33% width of display screen, s2 means 16.66% width of display screen and so on].
For medium screen (Tablets)
m1, m2, m3, m4, ….., m12 sub classes are for defining column width and number of column on medium screen. [m1 means 8.33% width of display screen, m2 means 16.66% width of display screen and so on].
For large screen (PC/Laptop)
l1, l2, l3, l4, ….., l12 sub classes are for defining column width and number of column on large screen [l1 means 8.33% width of display screen, l2 means 16.66% width of display screen and so on].
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-row w3-panel w3-large">
<p class="w3-aqua w3-padding"> There are 12 columns in this row, each having 8.33%
space of entire screen width:</p>
<div class="w3-col l1 w3-border w3-padding">col1 </div>
<div class="w3-col l1 w3-border w3-padding ">col2 </div>
<div class="w3-col l1 w3-border w3-padding ">col3 </div>
<div class="w3-col l1 w3-border w3-padding ">col4 </div>
<div class="w3-col l1 w3-border w3-padding ">col5 </div>
<div class="w3-col l1 w3-border w3-padding ">col6 </div>
<div class="w3-col l1 w3-border w3-padding ">col7 </div>
<div class="w3-col l1 w3-border w3-padding ">col8 </div>
<div class="w3-col l1 w3-border w3-padding ">col9 </div>
<div class="w3-col l1 w3-border w3-padding ">col10 </div>
<div class="w3-col l1 w3-border w3-padding ">col11 </div>
<div class="w3-col l1 w3-border w3-padding ">col12 </div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse