Introduction
This chapter demonstrates about the W3CSS Tutorials These are the Cascading Style Sheets which are developed by W3schools.com and following are the concepts covered in this chapter.
- About W3.CSS
Description
W3.CSS are Cascading Style Sheets which are developed by the W3schools.com. These style sheets are more useful to create faster, beautiful and responsive websites and these Style Sheets are very smaller and very faster when compared to the other frameworks. W3.CSS use only standard frameworks and these are very easy to learn when compared to the other frameworks.
W3.CSS speedups the processes and simplify the web development and which supports responsive designs by default and provides equality for all browsers and all devices. The image below demonstrates to adding the w3.CSS link to the HTML elements as shown below.
User can easily use the W3.CSS which is demonstrated in below example as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container w3-blue">
<h1>My Tutorial</h1>
</div>
<img src="splessons.jpg" alt="tutorials" style="width:50%">
<div class="w3-container">
Simple Programming Lessons Tutorials.
</div>
<div class="w3-container w3-blue">
My footer information
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can also use these W3.CSS style sheets in websites by adding links to the web pages like as shown in below example.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<body>
<header class="w3-container w3-blue">
<h1>SPLESSONS</h1>
</header>
<img src="splessons.jpg" alt="Tutorials" style="width:50%">
<div class="w3-container">
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.
<table class="w3-table w3-bordered w3-striped">
<tr class="w3-blue">
<th>JAVA TECHONOLOGIES</th>
<th>DATABASE</th>
<th>WEB DEVELOPEMENT</th>
</tr>
<tr>
<td>Apache ANT</td>
<td>MongoDB</td>
<td>HTML</td>
</tr>
<tr>
<td>Java.io</td>
<td>MySQL</td>
<td>HTML5</td>
</tr>
<tr>
<td>Junit</td>
<td>Oracle</td>
<td>SVG</td>
</tr>
<tr>
<td>Spring</td>
<td>SQL</td>
<td>CSS</td>
</tr>
</table>
</div>
<div class="w3-row-padding w3-section">
<div class="w3-half">
<div class="w3-card-2">
<img src="splesson.png" alt="Tutorial" style="width:100%">
<div class="w3-container">
www.splessons.com was established on Nov-01-2013.
<h2>About US</h2>
To enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.
</div>
</div>
</div>
<div class="w3-half">
<div class="w3-card-2">
<img src="splesson.png" alt="Tutorial" style="width:100%">
<div class="w3-container">
www.splessons.com was established on Nov-01-2013.
<h2>Contact US</h2>
Support : support@splessons.com</br>
Careers : careers@splessons.com</br>
Subscribe: Subscribe</br>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-blue">
© 2013 - 2016 SPLessons.com
</footer>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Standard CSS
Standard CSS Means Which use standard style sheets only because which are easy to learn and these are not dependent on external JavaScript libraries. Whatever the websites created using W3.CSS these are fully compatible with all the devices.
Key Points
- W3.CSS Uses only standard CSS.
- W3.CSS inspired from Google Material Design.
- W3.CSS have no dependency.