Style beautiful web pages without writing any CSS. Using W3.CSS.
Tags: css, w3css, html, style
Published: 2018-12-08 20:43:43

---
title: Style beautiful web pages without writing any CSS. Using W3.CSS.
published: true
description: A post on how to create beautiful HTML pages which are styled without writing a single line of CSS. Hello "W3.CSS". 
tags: css,w3css,html,style
cover_image: https://thepracticaldev.s3.amazonaws.com/i/c76lqlfwy77da42z74eq.png
---
Recently i was looking for a way to create some web pages to use in my upcoming technical workshops as demo pages. I did not want to spend too much time styling them, but at the same time i wanted them to look nice and modern. Using CSS at this point was out of the question, since that would have been too much effort for what i wanted to create. I stumbled on something that fit perfectly with my wishes, namely W3.CSS. 
W3.CSS is a modern, easy to learn CSS framework, that allows for responsiveness and works across a variety of browsers and platforms.

#Using it in your project
In order to style pages using this framework, you only need to import it by adding the following entry in your HTML page:
```xml
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
```

#OK, but what can you style?
To get an overall idea of what this framework offers, you can checkout their [intro page](https://www.w3schools.com/w3css/w3css_intro.asp). You can style buttons, navigation bars, dropdowns and lists, just to name a few. You can also apply predefined colors, or apply color tone effects on images. And of course you can easily apply padding or margins, or even set a layout on the page that will help items fall into the right place. Or left place, if you want.

#Hmmm, interesting, but how?
The summary of it is: to any HTML element that you want to style, you need to add a class attribute. The values of the class attributes will determine the styling. For example, to add a predefined color to an element, like cyan, the element's class needs to be "w3-cyan". To add a simple border, you need to add the "w3-border" class. Checkout the ["W3.CSS" site](https://www.w3schools.com/w3css/default.asp) for all these values and all the possible styling you can apply.

#What about the cover image of this article?
Ah yes. This image uses only "W3.CSS" for styling, just to give you a taste of this framework.  
Let me tell you what i used to create it. The button (on the left) and the image (on the right, together with the text below it) are placed in a _div_ element that looks like this:
```xml
<div class="w3-display-middle w3-container w3-border-top w3-border-bottom w3-margin w3-border-teal">
```
This means: 
* _w3-display-middle_ - the element will be placed in the middle of the page. Elements can be displayed: top left, top middle, top right, left, middle, right or bottom left, bottom middle and bottom right. 
* _w3-container_ - an element with a left and right padding of 16px to any other element.
* _w3-border-top_ and _w3-border-bottom_ - add the top and lower borders. The color of the border, teal, is given by _w3-border-teal_. You could also create round borders, or thick ones.
* _w3-margin_ - adds a 16px margin to all sides of this container.

The button on the left, inside the container, has the following HTML code:
```xml
<button class="w3-btn w3-border w3-teal w3-margin w3-padding-large w3-left w3-large w3-opacity">Who's
        stylish?</button>
```
Let's see what this all means:
* _w3-btn_ - creates a rectangular button, that, when hovered, shows a nice shadow. 
* _w3-border_ - provides a thin border to the button.
* _w3-teal_ - sets the button color to teal. See 'Colors' for other available colors.
* _w3-left_ - is the equivalent of _float:left_ from CSS.
* _w3-large_ - specifies that the buttons' text is larger than the default size of text.
* _w3-opacity_ - gives a transparency effect to the button. See 'Effects' for further details and other values. 

Now, for the right side, where the image is:
```xml
<div class="w3-card-4 w3-border w3-left w3-padding-large w3-margin w3-teal">
        <img src="https://farm2.staticflickr.com/1870/44322750771_d9eb2522f8_n.jpg"
             class="w3-sepia-min w3-round-xlarge">
        <div class="w3-container w3-center">
            <h4><b>We are. Yes we are.</b></h4>
        </div>
</div>
```
As you can see, the image (an _img_ tag) and the text below it are placed inside a styled _div_. The attribute that defines what this _div_ does is _w3-card-4_. It specifies that the _div_ is a sort of a container (it is used mostly to create 'paper card'-like containers), with a shadow border of 4px. The card _div_ element also has a border, float location, padding, margin and background color specified (which i already described in the above elements).

The image is styled with two attributes: there is a Sepia color effect applied on it, which is given by the _w3-sepia-min_ attribute, and its' corners are rounded quite a bit as per the _w3-round-xlarge_ attribute.

For the text displayed right below the image, another _div_ element is created to encompass it, of type _w3-container_. The attribute _w3-center_ specifies that all the text from inside the _div_ will be displayed in a centered position relative to the _div_. The text itself is then only a bolded _h4_ one.

Confused already? Don't hesitate to check out the [W3.CSS site](https://www.w3schools.com/w3css/default.asp) for all the details and the options they offer for easily creating stylish web pages.