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.
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:
- Single Responsive Webpage Demo.
- Left Navigation Material Design Webpage.
- Single Page Responsive Demo 2.
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> <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.
|Black Button Style|
<input class="w3-btn" value="Input Button"> <button class="w3-btn">Button Button</button> <a class="w3-btn" href="http://www.w3schools.com">Link Button</a>
|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.
<div class="w3-container w3-orange w3-text-white"> <h3>Warning!</h3> <p>Orange often indicates a warning that might need attention.</p> </div> <div class="w3-container w3-yellow"> <h3>Warning!</h3> <p>Yellow often indicates a warning that might need attention.</p> </div>
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:
- Create Website Layout Using HTML Frameset.
- Top 10 Free PHP Hosting Sites to Host Your Website.
- Way2SMS PHP API Script to Send Free SMS.
- Opencric Opensource PHP Script to Show Live Cricket Score on Websites.
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