W3.CSS Tutorial
Selected Reading
- W3.CSS - Discussion
- W3.CSS - Useful Resources
- W3.CSS - Quick Guide
- W3.CSS - Utilities
- W3.CSS - Navigation
- W3.CSS - Colors
- W3.CSS - Icons
- W3.CSS - Images
- W3.CSS - Lists
- W3.CSS - Tables
- W3.CSS - Modal Dialog
- W3.CSS - Tooltips
- W3.CSS - Buttons
- W3.CSS - Forms
- W3.CSS - Grids
- W3.CSS - Responsive Design
- W3.CSS - Cards
- W3.CSS - Code Coloring
- W3.CSS - Containers
- W3.CSS - Environment Setup
- W3.CSS - Overview
- W3.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
W3.CSS - Quick Guide
W3.CSS - Quick Guide
W3.CSS - Overview
What is W3.CSS?
W3.CSS is a Cascading Style Sheet (CSS) developed by . It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.
Some of its sapent features are as follows −
In-built responsive designing
Standard CSS
Inspired by Google Material Design
Free to use
Responsive Design
W3.CSS has in-built responsive designing so that the website created using W3.CSS will redesign itself as per the device size.
W3.CSS has a 12 column mobile-first fluid grid that supports responsive classes for small, large, and medium screen sizes.
W3.CSS classes are created in such a way that the website can fit any screen size.
The websites created using W3.CSS are fully compatible with PC, tablets, and mobile devices.
Standard CSS
W3.CSS uses standard CSS only and it is very easy to learn.
There is no dependency on any external JavaScript pbrary such as jQuery.
Material Design
W3.CSS is inspired from Google Material Design.
It supports paper-pke design.
It supports shadows and bold colors.
The colors and shades remain uniform across various platforms and devices.
And most important of all, it is absolutely free to use.
W3.CSS - Environment Setup
How to Use W3.CSS?
There are two ways to use W3.CSS −
Local Installation − You can download the W3.CSS file on your local machine and include it in your HTML code.
CDN Based Version − You can include the W3.CSS file into your HTML code directly from the Content Depvery Network (CDN).
Local Installation
Go to to download the latest version available.
Then, put the downloaded w3.css file in a directory of your website, e.g. /css.
Example
Now you can include the css file in your HTML file as follows −
<html>
<head>
<title>The W3.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "css/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h1>Hello World!</h1>
</header>
</body>
</html>
It will produce the following result −
CDN Based Version
You can include the W3.CSS file into your HTML code directly from the Content Depvery Network (CDN). W3Schools.com provides content for the latest version.
Note − We are using W3Schools.com CDN version of the pbrary throughout this tutorial.
Example
Now let us rewrite the above example using jQuery pbrary from W3Schools.com CDN.
<html>
<head>
<title>The W3.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h1>Hello World!</h1>
</header>
</body>
</html>
It will produce the following result −
W3.CSS - Containers
HTML5 has the following container elements −
<span> − Provides a generic container to HTML content.
<header> − Represents the header section.
<footer> − Represents the footer section.
<article> − Represents articles.
<section> − Provides a generic container for various types of sections.
W3.CSS provides w3-container as a primary class to style all the above-mentioned containers. W3.CSS also has other classes pke w3-border, w3-red, w3-teal, w3-padding-32 to add further stypng attributes to the containers.
Example
The following example showcases the use of w3-container class to style various containers.
w3css_containers.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-red">
<h1>HTML5 Tutorial</h1>
</header>
<span class = "w3-container w3-border w3-teal">
<p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
</span>
<article class = "w3-container">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</article>
<section class = "w3-container">
<p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
</section>
<footer class = "w3-container w3-red">
<p>Copyright @TutorialsPoint.COM</p>
</footer>
</body>
</html>
Result
Verify the result.
W3.CSS also provides containers with hide/close capabipty. See the following example −
w3css_hide_container.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<span class = "w3-container w3-border w3-teal">
<span class = "w3-closebtn" oncpck = "this.parentElement.style.display = none ">X</span>
<p>Close container by cpcking on the X in the upper right corner.</p>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Code Coloring
W3.CSS provides excellent support for syntax highpghting of the following languages −
HTML − Use classes w3-code htmlHigh on the container having HTML Code.
CSS − Use classes w3-code cssHigh on the container having CSS Code.
JS − Use classes w3-code jsHigh on the container having CSS Code.
You have to include the following script to have a pnk to the js file to have the syntax highpghting support −
<script src = "https://www.w3schools.com/pb/w3codecolors.js"></script>
w3css_color_coding.htm
<html>
<head>
<title>The W3.CSS Syntax Highpghter</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>HTML Syntax Highpghted</h2>
</header>
<span class = "w3-code htmlHigh">
<html>
<head>
<title>The W3.CSS Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<pnk rel="stylesheet" href="css/w3.css">
</head>
<body>
<header class="w3-container w3-teal">
<h1>Hello World!</h1>
</header>
</body>
</html>
</span>
<header class="w3-container w3-teal">
<h2>CSS Syntax Highpghted</h2>
</header>
<span class = "w3-code cssHigh">
.bold {
font-weight:bold;
}
#boldLabel {
font-weight:bold;
}
table, th, td {
font-family:sans;
}
</span>
<header class = "w3-container w3-teal">
<h2>JS Syntax Highpghted</h2>
</header>
<span class = "w3-code cssHigh">
<script type="text/javascript">
function(message){
}
var message = "Hello, World!";
alert(message);
</script>
</span>
<script src="https://www.w3schools.com/pb/w3codecolors.js"></script>
</body>
</html>
Result
Verify the result.
W3.CSS - Cards
W3.CSS has several special classes to display containers as paper-pke cards with shadow.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-card Styles a container for any HTML content with border |
| 2 | w3-card-2 Styles a container for any HTML content with 2px bordered shadow |
| 3 | w3-card-4 Styles a container for any HTML content with 4px bordered shadow |
| 4 | w3-card-8 Styles a container for any HTML content with 8px bordered shadow |
| 5 | w3-card-12 Styles a container for any HTML content with 12px bordered shadow |
Example
w3css_cards.htm
<html>
<head>
<title>The W3.CSS Syntax Highpghter</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
<style>
span {
width : 200px;
height : 200px;
}
</style>
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Yellow Card Demo</h2>
</header>
<br/>
<span class = "w3-card w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</span>
<span class = "w3-card-2 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</span>
<span class = "w3-card-4 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</span>
<span class = "w3-card-8 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</span>
<br/>
<header class = "w3-container w3-teal">
<h2>White Card Demo</h2>
</header>
<br/>
<span class = "w3-card w3-white">
<p><b>TODO:</b> Learn W3.CSS</p>
</span>
<span class = "w3-card-8 w3-white">
<p><b>TODO:</b> Learn HTML5</p>
</span>
<br/>
<span class = "w3-card-4" style = "width:550px;">
<header class = "w3-container w3-blue">
<h1>HTML5 Tutorial</h1>
</header>
<span class = "w3-container" style = "width:550px;">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
</span>
<br/>
<header class = "w3-container w3-teal">
<h2>Image Card Demo</h2>
</header>
<br/>
<span class = "w3-card-12" style = "width:255px; height: 230px;">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
<span class = "w3-container">
<p>Learn HTML5</p>
</span>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Responsive Design
W3.CSS has several special classes to create a responsive design.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-half Sets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 2 | w3-third Sets the container to occupy 1/3rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 3 | w3-quarter Sets the container to occupy 1/4th of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
| 4 | w3-col Specifies a column in a 12 column grid. |
| 5 | w3-row Specifies a padding-less container to be used for responsive classes. This class is mandatory for responsive classes to be fully responsive. |
Example
w3css_responsive_design.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<br/>
<span class = "w3-row w3-border">
<span class = "w3-container w3-half w3-red">
<h2>w3-half</h2>
<p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</span>
<span class = "w3-container w3-half">
<h2>w3-half</h2>
</span>
</span>
<br/>
<span class = "w3-row w3-border">
<span class = "w3-container w3-third w3-red">
<h2>w3-third</h2>
<p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</span>
<span class = "w3-container w3-third">
<h2>w3-third</h2>
</span>
</span>
<br/>
<span class = "w3-row w3-border">
<span class = "w3-container w3-quarter w3-red">
<h2>w3-quarter</h2>
<p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</span>
<span class = "w3-container w3-quarter">
<h2>w3-quarter</h2>
</span>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Grids
W3.CSS provides a 12 column fluid responsive grid.
It uses the w3-row and w3-col style classes to define rows and columns respectively.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-row Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive. |
| 2 | w3-col Specifies a column with sub-classes |
w3-col has several sub-classes meant for different types of screens.
Columns for Small Screen Devices
Here is a pst of column-level styles for small screen devices, typically smartphones.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | s1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | s2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | s3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | s4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | s12 Defines 12 of 12 columns with width as 100%. Default class for small screen phones. |
Columns for Medium Screen Devices
Here is a pst of column-level styles for medium screen devices, typically tablets.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | m1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | m2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | m3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | m4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | m12 Defines 12 of 12 columns with width as 100%. Default class for medium screen phones. |
Columns for Large Screen Devices
Here is a pst of column-level styles for large screen devices, typically laptops.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | |1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | |2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | |3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | |4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | |12 Defines 12 of 12 columns with width as 100%. Default class for large screen devices. |
Usage
Each subclass determines the number of columns of the grid to be used based on the type of a device. Consider the following HTML snippet.
<span class = "w3-row">
<span class = "w3-col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</span>
</span>
Default columns to be used are 12 on a device if a sub-class is not mentioned in the class attribute of an HTML element.
Example
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<span class = "w3-row">
<span class = "w3-col m1 w3-center w3-grey">1</span>
<span class = "w3-col m1 w3-center">2</span>
<span class = "w3-col m1 w3-center w3-grey">3</span>
<span class = "w3-col m1 w3-center">4</span>
<span class = "w3-col m1 w3-center w3-grey">5</span>
<span class = "w3-col m1 w3-center">6</span>
<span class = "w3-col m1 w3-center w3-grey">7</span>
<span class = "w3-col m1 w3-center">8</span>
<span class = "w3-col m1 w3-center w3-grey">9</span>
<span class = "w3-col m1 w3-center">10</span>
<span class = "w3-col m1 w3-center w3-grey">11</span>
<span class = "w3-col m1 w3-center">12</span>
</span>
<span class = "w3-row">
<span class = "w3-col w3-container m4 l3 w3-yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</span>
<span class = "w3-col w3-container s4 m8 l9">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
</span>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Forms
W3.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used −
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-group Represents a bordered container. Can be used to group a label and input. |
| 2 | w3-input Beautifies an input control. |
| 3 | w3-label Beautifies a label. |
| 4 | w3-checkbox w3-checkmark Beautify a checkbox/ radio button. |
Example
w3css_forms.htm
<html>
<head>
<title>The W3.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<form class = "w3-container w3-card-8">
<span class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">User Name</label>
</span>
<span class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">Email</label>
</span>
<span class = "w3-group">
<textarea class = "w3-input" style = "width:90%" required></textarea>
<label class = "w3-label">Comments</label>
</span>
<span class = "w3-row">
<span class = "w3-half">
<label class = "w3-checkbox">
<input type = "checkbox" checked = "checked">
<span class = "w3-checkmark"></span> Married
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox">
<span class = "w3-checkmark"></span> Single
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox" disabled>
<span class = "w3-checkmark"></span> Don t know (Disabled)
</label>
<br>
<br>
</span>
<span class = "w3-half">
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "male" checked>
<span class = "w3-checkmark"></span> Male
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female">
<span class = "w3-checkmark"></span> Female
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female" disabled>
<span class = "w3-checkmark"></span> Don t know (Disabled)
</label>
</span>
</span>
</form>
</body>
</html>
Result
Verify the result.
W3.CSS - Buttons
W3.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used −
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-btn Represents a standard button. Can be used to style a pnk as button as well. |
| 2 | w3-btn-floating Represents a floating button being circular in design. |
| 3 | w3-btn-floating-large Represents a large floating button. |
Example
w3css_buttons.htm
<html>
<head>
<title>The W3.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>Standard Buttons</h2>
<button class = "w3-btn">Cpck Me</button>
<button class = "w3-btn w3-teal">Cpck Me</button>
<button class = "w3-btn w3-disabled">I am disabled</button>
<h2>Links as Buttons</h2>
<a class = "w3-btn">Link</a>
<a class = "w3-btn w3-teal">Link</a>
<a class = "w3-btn w3-disabled">Disabled Link</a>
<h2>Floating Buttons</h2>
<a class = "w3-btn-floating">+</a>
<a class = "w3-btn-floating w3-teal">+</a>
<a class = "w3-btn-floating w3-disabled">+</a>
<h2>Large Floating Buttons</h2>
<a class = "w3-btn-floating-large">+</a>
<a class = "w3-btn-floating-large w3-teal">+</a>
<a class = "w3-btn-floating-large w3-disabled">+</a>
</body>
</html>
Result
Verify the result.
W3.CSS - Tooltips
W3.CSS supports a different kind of tooltip using w3-tooltip class. Take a look at the following example. Here we ve put a tooltiptext within a span and an image and appped w3- tooltip on the parent span.
<span class = "w3-tooltip">
<span class = "w3-text w3-container w3-teal" style = "width:255px;">
<p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
</span>
<span>
<img src = "html5-mini-logo.jpg" alt = "html5">
</span>
</span>
Example
w3css_tooltips.htm
<html>
<head>
<title>The W3.CSS Tooltips</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>Hover Demo</h2>
<span class = "w3-tooltip">
<span class = "w3-text w3-container w3-teal" style = "width:255px;">
<p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
</span>
<span>
<img src = "html5-mini-logo.jpg" alt = "html5">
</span>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Modal Dialog
W3.CSS can be used to display a customizable modal dialog box instead of the standard JavaScript alert.
It uses w3-row and w3-col style classes to define rows and columns respectively.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | modal-dialog Represents the main parent window to define a dialog box. |
| 2 | w3-modal-dialog Represents the dialog content container. |
| 3 | w3-modal-content Represents dialog contents. |
Example
w3css_modal_dialog.htm
<html>
<head>
<title>The W3.CSS Modal dialog</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>Modal dialog Demo</h2>
<a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
<span id = "model-dialog" class = "w3-modal">
<span class = "w3-modal-dialog">
<span class = "w3-modal-content w3-card-8">
<header class = "w3-container w3-teal">
<a href = "#" class = "w3-closebtn">×</a>
<h2>TutorialsPoint</h2>
</header>
<span class = "w3-container">
<p>Hello World!</p>
</span>
<footer class = "w3-container w3-teal">
<p>@TutorialsPoint.COM</p>
</footer>
</span>
</span>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Tables
W3.CSS can be used to display different types of tables using various styles over w3-table.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-table Represents a basic table without any border. |
| 2 | w3-striped Displays a stripped table. |
| 3 | w3-bordered Draws a table with a border across rows. |
| 4 | w3-border Draws a table with borders. |
| 5 | w3-card Draws a table as a card. |
| 6 | w3-responsive Draws a responsive table to show a horizontal scrollbar, if the screen is too small to display the content. |
| 7 | w3-tiny Draws a table with very small font. |
| 8 | w3-small Draws a table with small font. |
| 9 | w3-large Draws a table with large font. |
| 10 | w3-xlarge Draws a table with extra large font. |
| 11 | w3-xxlarge Draws a table with very extra large font. |
| 12 | w3-xxxlarge Draws a table with very high extra large font. |
| 13 | w3-jumbo Draws a table with jumbo large font. |
Example
w3css_tables.htm
<html>
<head>
<title>The W3.CSS Tables</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class = "w3-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table with borders</h3>
<table class = "w3-table w3-striped w3-bordered w3-border">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Table as Card</h3>
<table class = "w3-table w3-card-4">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Responsive table</h3>
<span class = "w3-responsive">
<table class = "w3-table w3-card-4">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Data #1</th>
<th>Data #2</th>
<th>Data #3</th>
<th>Data #4</th>
<th>Data #5</th>
<th>Data #6</th>
<th>Data #7</th>
<th>Data #8</th>
<th>Data #9</th>
<th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</span>
<h3>Table with very small font</h3>
<table class = "w3-table w3-tiny">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
Result
Verify the result.
W3.CSS - Lists
W3.CSS can be used to display different types of psts using various styles over w3-ul.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-ul Represents a basic pst without any border. |
| 2 | w3-striped Displays a stripped pst. |
| 3 | w3-bordered Draws a pst with border across rows. |
| 4 | w3-border Draws a pst with border. |
| 5 | w3-card Draws a pst as a card. |
| 6 | w3-tiny Draws a pst with very small font. |
| 7 | w3-small Draws a pst with small font. |
| 8 | w3-large Draws a pst with large font. |
| 9 | w3-xlarge Draws a pst with extra large font. |
| 10 | w3-xxlarge Draws a pst with very extra large font. |
| 11 | w3-xxxlarge Draws a pst with very high extra large font. |
| 12 | w3-jumbo Draws a pst with jumbo large font. |
Example
w3css_psts.htm
<html>
<head>
<title>The W3.CSS Lists</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>List Demo</h2>
<hr/>
<h3>Simple List</h3>
<ul class = "w3-ul">
<p>Mahesh Parashar</p>
<p>Rahul Sharma</p>
<p>Mohan Sood</p>
</ul>
<h3>Stripped List with borders</h3>
<ul class = "w3-ul w3-striped w3-bordered w3-border">
<p>Mahesh Parashar</p>
<p>Rahul Sharma</p>
<p>Mohan Sood</p>
</ul>
<h3>List as Card</h3>
<ul class = "w3-ul w3-card-4">
<p>Mahesh Parashar</p>
<p>Rahul Sharma</p>
<p>Mohan Sood</p>
</ul>
<h3>List with very small font</h3>
<ul class = "w3-ul w3-tiny">
<p>Mahesh Parashar</p>
<p>Rahul Sharma</p>
<p>Mohan Sood</p>
</ul>
</body>
</html>
Result
Verify the result.
W3.CSS - Images
W3.CSS provides options to display images in beautiful and interesting ways using w3-image as the main class.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-image Represents a basic styled image without any border. |
| 2 | w3-circle Displays an image within a circle |
| 3 | w3-title Used to put text over an image. |
| 4 | w3-card Draws an image as a card. |
Example
w3css_images.htm
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel="stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>Images Demo</h2>
<hr/>
<h3>Simple Image</h3>
<span class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5">
</span>
<h3>Circled Image</h3>
<span class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
</span>
<h3>Text over image</h3>
<span class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
<span class = "w3-title w3-text-black">Learn HTML5</span>
</span>
<h3>Image as a card</h3>
<span class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Icons
W3.CSS supports the following popular icon pbraries −
Font Awesome Icons
Google Material Icons
Bootstrap Icons
Usage
To use an icon, put the name of the icon in the class of an HTML <i> element. To control the size of an icon, you can use the following classes −
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-tiny Draws an icon of very small size. |
| 2 | w3-small Draws an icon of small size. |
| 3 | w3-large Draws an icon of large size. |
| 4 | w3-xlarge Draws an icon of extra large size. |
| 5 | w3-xxlarge Draws an icon of very extra large size. |
| 6 | w3-xxxlarge Draws an icon of very high extra large size. |
Example
w3css_icons.htm
<html>
<head>
<title>The W3.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
<pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.4.0/css/font-awesome.min.css">
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<pnk rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class = "w3-container">
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud w3-large"></i>
<i class = "fa fa-cloud w3-xlarge"></i>
<i class = "fa fa-cloud w3-xxlarge"></i>
<i class = "fa fa-cloud w3-xxxlarge"></i>
<i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons w3-large">cloud</i>
<i class = "material-icons">cloud</i>
<i class = "material-icons w3-xlarge">cloud</i>
<i class = "material-icons w3-xxlarge">cloud</i>
<i class = "material-icons w3-xxxlarge">cloud</i>
<i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
<i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
</body>
</html>
Result
Verify the result.
W3.CSS - Colors
W3.CSS supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.
w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-pght-blue
w3-cyan
w3-teal
w3-green
w3-pght-green
w3-pme
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-pght-grey
w3-grey
w3-dark-grey
w3-black
Color Themes
W3.CSS provides excellent support for applying a theme to a website using its pubpc domain theme css. Some of the examples are given below −
| Sr. No. | CSS Name & Description |
|---|---|
| 1 | w3-theme-indigo.css CSS having Indigo variant colors |
| 2 | w3-theme-red.css CSS having Red variant colors |
In order to use themes, go to the to download the required CSS file.
Example
w3css_colors.htm
<html>
<head>
<title>The W3.CSS Color Themes</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
<pnk rel = "stylesheet" href = "css/w3-theme-red.css">
</head>
<body class = "w3-container">
<h2>Color Theme Demo</h2>
<hr/>
<span class = "w3-card-4">
<span class = "w3-container w3-theme w3-card-2">
<h1>Red Colored Theme</h1>
</span>
<span class = "w3-container w3-text-theme">
<h2>w3-text-theme - Theme for Text</h2>
</span>
<ul class = "w3-ul w3-border-top">
<p class = "w3-theme-l5" style = "position:relative">
<a class = "w3-btn-floating-large w3-theme-action w3-right"
style = "position:absolute;top:-28px;right:16px;">+</a>
<p>Using w3-theme-l5 / w3-theme-pght style</p>
</p>
<p class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></p>
<p class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></p>
<p class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></p>
<p class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></p>
<p class = "w3-theme"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d1"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d2"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d3"><p>Using w3-theme style</p></p>
<p class = "w3-theme-d4"><p>Using w3-theme style</p></p>
</ul>
</span>
</body>
</html>
Result
Verify the result.
W3.CSS - Navigation
W3.CSS has several special classes to display a navigation bar or a menu on a website quickly.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-topnav Styles a pst as a horizontal menu/navigation bar. |
| 2 | w3-sidenav Styles a pst as a vertical menu/navigation bar. |
Example
w3css_navigation.htm
<html>
<head>
<title>The W3.CSS Navigation</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
<pnk rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.4.0/css/font-awesome.min.css">
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class = "w3-container">
<h2>Navigation Demo</h2>
<hr/>
<h3>Horizontal top navigation bar</h3>
<nav class = "w3-topnav w3-red">
<a href="#">Home</a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using font awesome icons</h3>
<nav class = "w3-topnav w3-red">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using material icons</h3>
<nav class = "w3-topnav w3-red">
<a href="#"><i class="material-icons">home</i></a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using Side Navigation</h3>
<nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
<a href="#">Home</a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
</body>
</html>
Result
Verify the result.
W3.CSS - Utipties
W3.CSS has several utipty classes which are very useful for day-to-day designing needs.
Color utipty classes − Examples: w3-red, w3-yellow
Padding utipty classes − Examples: w3-padding-jumbo, w3-padding-16
Margin utipty classes − Examples: w3-margin-8, w3-margin-64
Border utipty class − Examples: w3-border-left, w3-border-right
Size utipty classes − Examples: w3-tiny, w3-small
Circle utipty class − Example: w3-circle
Center utipty class − Example: w3-center
Example
w3css_utipties.htm
<html>
<head>
<title>The W3.CSS Utipties</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body class = "w3-container">
<h2>W3.CSS Utipties</h2>
<hr/>
<h3>Color Utipties Demo</h3>
<span class = "w3-container w3-red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Padding Utipties Demo</h3>
<span class = "w3-container w3-red w3-padding-jumbo">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green w3-padding-16">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Margin Utipties Demo</h3>
<span class = "w3-container w3-margin-64">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-margin-8">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Border Utipties Demo</h3>
<span class = "w3-container w3-red w3-border-left w3-border-right">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty.</p>
</span>
<span class = "w3-container w3-green w3-border">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</span>
<h3>Size Utipties Demo</h3>
<span class = "w3-container">
<p class = "w3-small">Using w3-small font.</p>
<p>Using Default (medium).</p>
<p class = "w3-large">Using w3-large font.</p>
<p class = "w3-xlarge">Using w3-xlarge font.</p>
</span>
<h3>Circle Utipty Demo</h3>
<span class = "w3-container">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
</span>
<h3>Center Utipty Demo</h3>
<span class = "w3-container w3-center w3-black w3-card-2">
<img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
</span>
</body>
</html>
Result
Verify the result.
Advertisements