Thursday, March 16, 2017

W3.CSS - Quick Guide

W3.CSS - Overview

What is W3.CSS?

W3.CSS is a Cascading style sheet, CSS developed by w3schools.com. It helps in creating faster, beautiful and responsive websites. It is inspired from Google Material Design.
Following are its some of the salient features:

In-built responsive designing
Standard CSS
Inspired by Material Desiging
Free to use

Responsive Design

W#.CSS has in-built responsiveness 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 with support of 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.
Website created using W3.CSS are fully compatible with PC, Tablets and mobile devices.

Standard CSS

W#.CSS uses standard CSS only and is very easy to learn.
There is no dependency on any external javaScript library such as jQuery.

Material Design

W#.CSS is inspired from Google Material Design.
It suports paper like design.
It suports shadows and bold colors.
The colors and shades remains same across the various platforms and devices.

And most important, 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 W3.CSS file on your local machine and include it in your HTML code.
CDN Based Version - You can include W3.CSS file into your HTML code directly from Content Delivery Network (CDN).

Local Installation

Go to the https://www.w3schools.com/w3css/w3css_downloads.asp to download the latest version available.
Now put downloaded w3.css file in a directory of your website, e.g. /css.

Example

Now you can include 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">
      <link rel="stylesheet" href="css/w3.css">
   </head>
   <body>
      <header class="w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

This will produce following result −

CDN Based Version

You can include W3.CSS file into your HTML code directly from Content Delivery Network (CDN). W3Schools.COM provides content deliver for the latest version.

We are using W3Schools.COM CDN version of the library throughout this tutorial.

Example

Now let us rewrite above example using jQuery library from W3Schools.COM CDN.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body>
      <header class="w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

This will produce following result −

W3.CSS - Containers

HTML5 has following container elements:

<div> - Used to provide a generic container to html content.
<header> - Used to represent the header section.
<footer> - Used to represent the footer section.
<article> - Used to represent articles.
<section> - Used to provide a generic container for various types of sections.

W3.CSS provides w3-container as a primary class to style all of the above mentioned containers. W3.CSS also has other classes like w3-border, w3-red, w3-teal, w3-padding-32 to add further styling atttributes to the containers.

Example

Following example showcases the use of w3-container class to styles various containers.
w3css_containers.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body>
      <header class="w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      <div 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>
      </div>
      <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 functionality. 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 capability. See the below example:
w3css_hide_container.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body>     
      <div class="w3-container w3-border w3-teal">
         <span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
            <p>Close container by clicking on the X in the upper right corner.</p>         
      </div>      
   </body>
</html>

Result

Verify the result.

W3.CSS - Code Coloring

W3.CSS has an execellent supports for syntax highlighting of following langauges:

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 following script to have a link to js file to have syntax highlighting support:

<script src="https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body>   
      <header class="w3-container w3-teal">   
         <h2>HTML Syntax Highlighted</h2>   
      </header>
      <div class="w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html> 
      </div>      
	  <header class="w3-container w3-teal">   
         <h2>CSS Syntax Highlighted</h2>   
      </header>
      <div class="w3-code cssHigh">
         .bold {
            font-weight:bold;
         }   
         #boldLabel {
            font-weight:bold;
         }  
         table, th, td {
            font-family:sans;
         }  		 
      </div>      
	  <header class="w3-container w3-teal">   
         <h2>JS Syntax Highlighted</h2>   
      </header>
      <div class="w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>      
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Result

Verify the result.

W3.CSS - Cards

W3.CSS has several special classes which helps in displaying container as paper like cards with shadow.

Class Name	Description
w3-card	Styles a container for any HTML content with border
w3-card-2	Styles a container for any HTML content with 2px bordered shadow
w3-card-4	Styles a container for any HTML content with 4px bordered shadow
w3-card-8	Styles a container for any HTML content with 8px bordered shadow
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 Highlighter</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
	  <style>
	     div {
		    width : 200px;	
			height : 200px;	
			
		 } 
	  </style>
   </head>
   <body>   
      <header class="w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <br/>
	  <header class="w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
	  <div class="w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <br/>
      <div class="w3-card-4" style="width:550px;">
         <header class="w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         <div 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 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
	  <br/>
	  <header class="w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card-12" style="width:255px; height: 230px;">
        <img src="/html5/images/html5-mini-logo.jpg" alt="html5">
           <div class="w3-container">
              <p>Learn HTML5</p>
           </div>
      </div>
   </body>
</html>

Result

Verify the result.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews

Thursday, March 16, 2017

W3.CSS - Quick Guide

W3.CSS - Overview

What is W3.CSS?

Responsive Design

Standard CSS

Material Design

W3.CSS - Environment Setup

How to use W3.CSS?

Local Installation

Example

CDN Based Version

Example

W3.CSS - Containers

Example

Result

Result

W3.CSS - Code Coloring

Result

W3.CSS - Cards

Example

Result

No comments:

Post a Comment