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.
In order to style pages using this framework, you only need to import it by adding the following entry in your HTML page:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
To get an overall idea of what this framework offers, you can checkout their intro page. 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.
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 for all these values and all the possible styling you can apply.
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:
<div class="w3-display-middle w3-container w3-border-top w3-border-bottom w3-margin w3-border-teal">
- 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:
<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:
<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 for all the details and the options they offer for easily creating stylish web pages.