W3CSS Tutorial – Introduction to W3CSS

W3CSS is currently one of the most famous and widely used CSS framework for building responsive websites. W3CSS is based on plain CSS which makes it extremely fast. It doesn’t use JavaScript or JQuery which saves it from additional overhead which slows a website. W3CSS is compatible with all the browsers including chrome, firefox, safari, opera etc. It is also compatible with most of the devices currently in use ranging from small screen mobile phones to large-sized desktops. Enough of W3CSS Introduction. Lets delve a bit into technical side.

How to use W3CSS

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>

Download the code Try the code

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.

W3CSS Colors Basics >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .