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.
Oldest comments (68)
Hmm... Interested in how this framework compares with Bulma
Interesting enough, I will try it out
w3schools ;(
They don't deserve the hate they once did. It's a much better resource today than, say, 10 years ago.
Yeah, that's not really a feeling anymore. Look at the statement at top of W3Fools:
w3fools.com/
No, it’s still the most useless tool for developers. If you need an example, search for the css float property, and compare the result with MDN...
Yes. It’s one one of the most shitty resource for developers.
github.com/marmelab/universal.css ;-).
Hahahahhahahahahahahahahahahahahhahahahahahahahahahahahahaha
The dream of the semantic web is over, isn't it?
By which I mean, this is a mix of style and content which means that if you want to re-theme your website you'll have to change all the HTML :(
I think tailwindcss is a nice middle-ground - you can use the pure 'utility' approach like :
But you can also 'compose' classes out of the utilities in your css/sass by doing :
I've found it works quite well - those one-off things can keep their one-off utlities, but as you find common/re-used blocks and components you can style them as one thing.
That makes more sense to me because it's still keeping the presentation stuff in the presentation box.
Same here. I also can use Yogurt CSS to expose it's utility modules into a custom class for those who dislike to inline the styles in their HTML. And also, it is an easy and quick way to refactoring or migrating their existing stylesheet to Yogurt CSS.
That's true. They also offer something in regards to themes, but i haven't tried it: w3schools.com/w3css/w3css_color_th.... I think it all depends on the purpose of the development and what kind of pages you are creating. This is a quick win in many situations.
Indeed. I understand why some people choose this approach, but it defeats the purpose of classes. I want to define a class of objects which share attributes because those objects represent the same thing on the page (e.g., headings). Using, e.g., "w3-teal" on those headings is essentially just moving my CSS into my HTML, and making it more cumbersome to change that one color in the future. I'd rather just define my "heading" class with whatever shade of teal I want, then change that one color in one place in the future.
Again, I get why some people use libraries like this, but I've noticed a move toward this approach even when it creates more problems than it solves (it doesn't make sense for most enterprise web apps). And the unfortunate reality is that some developers just don't want to spend time understanding CSS to the degree that they do JavaScript.
The dream of semantic web is far from over; it's on the rise with an evergreen HTML spec and always-up-to-date browsers. More and more "web designers" are finally realizing that if they don't drop their
div
s and start using semantic standard components, they'll never be able to cover all the devices which will change too rapidly.Of course, you can always choose to ignore all that and use a ridiculous syntax like
w3-padding-large
, but then again, nobody can stop you from smashing your head against the screen either, right?I see you are totally missing the point of this article. I stated in the initial part how i came to use it, and what was the purpose for it. I had a specific requirement, and this is a solution to my requirement. Whereas you are free to express your dislike, and i'm sure you have better ways of doing things, please be respectful.
Class attributes aren't semantic content, so nothing wrong with this approach really. The problem with inline styles is that they're too limited: you can't constrain by media queries or other pseudo elements or pseudo classes. Atomic CSS can handle that, and it does so in a way that's much easier to use than fiddling with CSS manually. I recommend checking out the tachyons CSS toolkit.
Why would your content be in your markup files? :O
It should be in the API/DB/CMS.
You know there are static websites, right?
And I don't even mean generated static sites. I literally mean sites that don't need an API/DB/CMS because they are pure content and easy to manage in HTML?
Oh, say, for instance most sites hosted on GitHub Pages.
Resume sites. Portfolio sites. Restaurant sites. I can go on and on.
You don't need to over-engineer a 6 page restaurant site that hosts directions, menu, and simple things like that.
Don't overlook those pages -- they're still important and a big chunk of what the web is made of.
I find that unsustainable even for tiny restaurant sites.
For example, you likely have your contact info in the contact page and the footer of every page.
Assuming you at least keep your footers separate, that's still two places to change your phone number, working hours, etc.
And this isn't a root comment, this is a response to the person woeing over having to redo their markup for a restyle.
Well, guess what? CSS Garden doesn't work on real-life markup, only on intentionally superfluous one.
Hi Corina,
for quick and decent design i've also found w3.css a very lightweight, easy to learn & implement solution.
Now busy with Vue.js i am using bulma.io which has a similar simplicity/elegance out-of-the-box.
Might not matter much to you since you're using a CSS framework, but I wanna mention how awesome Vue Loader's "scoped" attribute is -- it removes the challenges of globally scoped CSS without requiring you to utilize actual web components with something like Polymer. We have unscoped global styles for things like dropdowns, forms, etc. in our root component, and we just scope/customize other components as necessary. We used to practice BEM but just don't need to anymore.
So instead of learning some CSS, which is an accepted standard, you're going to learn this, which is a random array of string leveraging the
class
attribute which is not supposed to be used for styles at all?"leveraging the class attribute which is not supposed to be used for styles at all?"
Classes are not meant for styles?
Srsly?
Yes, "srsly". Go ahead and click the link if you want to see the source.
which link are you referring to? Listen, this:
Is not a technically convincing argument - and it won't work to any future colleague.
Facebook is doing it. (check screenshot) Do they not know how to write CSS?
I think someone needs several years of hands on professional experience in big projects. Working and having a product owner/manager/boss who wants you to deliver is not the same as writing a thesis about semantic web for uni.
I learned CSS on a very good level and then decided to follow this pattern because I saw its' power and productivity. This technique has a big following of very VERY senior developers.
thepracticaldev.s3.amazonaws.com/i...
Alright, dude, keep rocking on.
No. From the WHATWG HTML spec, § 3.2.6 (emphasis mine):
It doesn't any sense for HTML, which is all about document semantics, to announce that an element is of type "padding-small". Use a class name to categorize an element such as "important-item", "feed-item", etc.
The article claims that you're not writing any CSS. Why in the world would you do
class="padding-small"
when you can dostyle="padding: var(--small)"
, which precisely describes what you want, and is a standardizes way of doing things?Everyone goes bananas over inline styles, repeating a mantra they've read somewhere about how "it's bad practice", "anti-pattern", and then they splash a
class="margin-top-medium"
. Totally not inlining styles. Nope, not at all.I never said anything about separation of concerns, not did I say that you shouldn't inline styles or that it's a bad thing to do.
There's nothing wrong with inlining styles.
But there's everything wrong with pretending you're not inlining styles when you add a class named
padding-small
which adds the style{ padding: var(--small) }
.Agreed.
Probably better off with a more mature toolkit that's been around awhile: tachyons.io
Wow, that article has literally no left margin.
I wonder what the author meant by that.
Probably that the curtains were blue.
Maybe he forgot to add
margin-left
to the classes? ;)Atomic CSS isn't a new thing. He's been around for several years and was born before all the new methodologies, and it's a bit obsolete in 2018 since CSS evolved and let us writing more maintainable CSS.
I tell you a thing.. each article about "How to do a THING" you will find an article telling "Don't do this THING"
I can't send you many links about semantic css, against functional CSS (ACSS). Maybe you are interested reading this for a different point of view.
maintainablecss.com/
ecss.io
robdodson.me/css-semantics/
Some comments may only be visible to logged-in visitors. Sign in to view all comments.