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:
<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. 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 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:
<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:
<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.
Latest comments (68)
I developed production-size websites and SPAs using functional CSS ( custom-made framework after years of writing CSS, following the logic of tachyons.io/ , and still adhering to principles of cssguidelin.es/ ) and the speed of dev/productivity but also Visual Consistency I was able to achieve with this system was unheard of. (before even Component based architecture was a thing)
The principles behind it?
-> Don't fight with CSS rules - write less of them
-> Semantic Classes are overrated and offer no real-world technical or business advantages (check Facebook's source code)
-> using functional/atomic CSS you can compose "visual components" (even when not using React or Vue) which are repeatable - maintainable - easily redesignable
-> seeing a design you can quickly abstract all the visually repeatable elements, code your base classes, use SASS variables, and have a first draft of your website literally in no time.
Sorry to generalise, but there was a mass influx of ex-backend devs when React et co became a cool thing, and many of them don't really know their shit when it comes to CSS. They just use CSS scoped CSS, repeat everything and think they're doing a cool job serving megabytes of code.
This is brilliant ! I love w3schools and it's amazing they built their own CSS framework !!
I am boycotting anything W3School.
The issue I have with W3School is how unfair they are with overloading the W3 symbol (it's reserved by w3.org, where Sir. Tim Berners-Lee and colleagues writes Specifications for the web).
So, w3css is like what Microsoft does with "SQL", when they. SQL has a Specification, not written by Microsoft. Here, W3School isn't contributing to standards. And aren't fair-play with the W3 name.
w3fools.com/
As someone who just wrote a quick project that produced a simple HTML page with no styling (I'm a backend guy, so CSS has always been a struggle for me), this is a nice intro that comes at a timely moment for me. Thanks for sharing!
Shouldn't a professional be able to use the right tool for the right job? Why is everyone judging this hammer for not being able to drive a screw? I'm definitely not going to over-tool a landing page and contact form with a huge CSS framework.
Yeah, same.
Yup, luckily he has no idea that changing styles means changing styles, and not changing markup. Ignorance is a bliss indeed!
Would it not be better just to use Bootstrap rather than use the W3C? Is there any extra feature that it has that Bootstrap does not?
How is this any better than just using inline
styleattributes?Tailwind CSS (tailwindcss.com) is a great alternative to this with many configuration and integration options, third-party plugins, and an established community.
Please feel free to drop me a pm or tweet about your conclusions
Welcome to the “Learning libraries instead of technologies” era.
I never said what is wrong or not. I wrote acss years ago and i just suggested you to see this thing from a different point of view...
Are you serious now?
Thats for learning css as a standard.
Not for developing!
Try Bootstrap! Or other CSS frameworks
Some comments may only be visible to logged-in visitors. Sign in to view all comments.