Design Website Using W3.CSS Framework


It is very hard to design a website by coding CSS and Html. Almost everyone was now downloading website Templates from Template Market and re-design them. But in some cases, we don't get suitable templates, and we forced to code the web. If we started to code the web, It is too hard to design each element of the site such as Buttons, Containers, Labels, Heading Tags, Etc. 

After the introduction of Framework, It is very easy to design websites and to code programs. In the case of PHP, it also has Frameworks such as CodeIgniter, Laravel, Etc. Several CSS and Javascript Frameworks are available on the online today. Some of the major Frameworks are Bootstrap, W3.CSS, Foundation, Etc

Today I am going to introduce a Framework that I listed second on the above list W3.CSS. It was developed by the famous Tutor website called W3schools. I love this development made by W3school because of its simplicity. 

Demos of W3.CSS FrameWorks:

W3.CSS was providing a various material color combination that makes every design look awesome. We can use the color on Buttons, Heading Tag, and on any other Html elements that we use in the design simply by calling the class name of the color.

How to Use W3.CSS During Designing Website:

It is very easy to use W3.CSS during design website. You just have to download the latest version of W3.CSS Framework from the official site of W3Schools. 
  • Download Latest Version of W3.CSS Framework: Download Now.
  • Now you have to add the import code <head> inside your head tag </head>.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
  • You just finished. Now you can start design website using W3.CSS Framework. 

Class for Buttons:

W3.CSS has a lot of buttons styles. You can find more on the official site of W3school. Below this paragraph I posted two screenshots of stylish buttons. After import the style, Use the below script for test the Framework.
W3.CSS Framework Button
Black Button Style
<input class="w3-btn" value="Input Button">

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

<a class="w3-btn" href="">Link Button</a>
W3.CSS Framework Button
Mixed Color Design
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>

Class for Table Design:

Below I posted a example Html Element that will help you to show Error, Sucess, Alert, Etc messages on your website. You can find more like this on the official website of W3.CSS.
W3.CSS Framework Alerts

<div class="w3-container w3-orange w3-text-white">
  <p>Orange often indicates a warning that might need attention.</p>

<div class="w3-container w3-yellow">
  <p>Yellow often indicates a warning that might need attention.</p>

Collect all Html & CSS Elements Like This:

I can't post whole the Html Elements that developed by W3Schools on this article because of the limit. You can access more at W3School official website of W3.CSS Framwork. 

Suggested Article for Web Designers:

I hope you well enjoyed this article, If you have any doubts or suggestions related to this article. Please let me know by using the comment box that given below. Thanks


  1. But it is best to use < * link rel="stylesheet" href ="" * /> this code.Please Edit post.

    1. But it will not work offline. Most of the designers like me design website offline. When we host we can change it. Hosted package always make website slow. So always download and use them. Thanks for the report anyway (h)


Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .