Somebody wants the console of their website to look cool, don’t you? 😎
So in this article we will have a quick look, how to style console output with CSS.
Table of contents:
- How does it work
- What are my options
- How to do it <<<<—– here’s the actual guide!
First of all, it is not complicated at all. It is just a bit of css code applied to a
console.log call. That’s it.
You can not use obviously all of the CSS properties, but with the ones you can use, you can accomplish a lot.
- float + clear
- margin (must use also display: inline-block)
- padding (must use also display: inline-block)
- text* (text-transform for example)
In the end, you can accomplish a lot, can’t you? 😉
It works with any of the
console.* calls (
It works based on
So you put
%c into your text and for every
%c you need to put another string parameter that contains style into
The styles have the format exactly as if you were to write styles in your
*.css files, you put a casual “kebab case” properties (font-family: Roboto; color: #ccaa44, …) separated by a semicolon.
Here’s an example: (try it now!)
console.log("And %cthis%c is %chow%c %cyou%c can style your console logs", "color: red; font-family: monospace", "" ,"background-color: orange", "", "font-weight: 900", "");
A simple example: (try it now!)
console.log("%cThis will be styled%c and this won't", "color: blue; background-color: orange; font-weight: 900", "");
Once you use
%c directive, every character that follows will be styled.
Therefore don’t forget to put a closing
%c character into your text and also another argument to the console log as empty string as within the example above – so as “empty style object” can be applied.
There you have it guys, it was this easy. Also, one more important note, if you have implemented some funny console message that shows up when a visitor loads your website, just make sure the console.log call will not get removed by babel or any other code preprocessor or minifier 😂 .
If you want to study this in a more detail, checkout an official Console API documentation on MDN explaining a bit more.
And also if you liked this article, don’t forget to share it with people you like (or maybe also people you don’t like, maybe you’ll became friends! 😆 ).
It is only matter of time ’till we see some exciting news again so if you want to be amongst the very first ones to hear about them, subscribe to my newsletter right here.
Anyways, thanks for reading and I’ll see you in the next article! 🤓
Yours in coding,
p.s. thanks for the cover image goes to Photo by Oskar Yildiz on Unsplash