W3CSS is open source and is absolutely free to use. To use W3CSS in your programs, simple add following stylesheet document to your programs “href=”http://www.w3schools.com/lib/w3.css””. This is basically CDN for W3CSS. Now let’s take a look at our first simple example to see how W3CSS can actually be used in your website.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <div class="w3-container w3-red"> <h1>Nature</h1> </div> <img src="http://images.freeimages.com/images/previews/de2/boats-on-the-lake-1380939.jpg" alt="Car" style="width:100%"> <div class="w3-container"> <p>This is a smallship in the middle of a river</p> </div> <div class="w3-container w3-red"> <p>Foote Info can be added here</p> </div> </body> </html>
The above code is extremely simple yet it reveals many important features of W3CSS. In the header section the link to W3CSS CDN has been added. Next inside the body, we created a div and assigned it classes w3-container and w3-red. Both of these classes are builtin classes of W3CSS. The first class i.e. w3-container gives full width and specific height to the div. It also styles the text inside the div. Similarly, the class w3-red is a color class which changes background color of the div to red. We shall study these classes in detail in upcoming articles.
Next, we some random image the web page followed by a simple div again. Finally we add another div with class w3-container and w3-red at the end to create a footer effect. Inside the div we add a paragraph with some random text.
Now open the above webpage in browser, you shall see a header with red background, a full width image, an image caption, followed by a red footer. This article provided W3CSS introduction. In the next article, we shall study W3CSS colors in detail.