Style console.log() output with CSS

In this video, I’ll show you how to style console.log() output with CSS. We will use a CSS format specifier which allows us to customize the display in the console and we will also see few demos related to it.

Format specifier

A format specifier consists of a % symbol followed by a letter that indicates the formatting that applies to the value. The parameters following the string apply to the placeholders in order.

CSS Format specifier

The CSS format specifier allows us to customize the display in the console. We will need to start the string with the specifier (%c) and give the style you wish to apply as the second parameter.

Demo Code

If we try to copy-paste the below code in the Google Chrome dev tools console,

// Console output, but with green color
console.log("%cHello World", "color: green");

and we get an output like this in the console:

and if we try this:

// Same console output, but with green color & bold font weight
console.log("%cHello World", "color: green; font-weight: bold;");

Output:

and if we try this below code:

// Here is another example using multiple CSS style rules
console.log(
  "%cShare on Twitter",
  `color: #fff;
  background-color: #1da1f2;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;`
);

and we get an awesome output in the console like this:

I have a full video where this is explained in full details if you're interested.

Wrap Up

I hope you will find this video useful and learn something new in the process. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, please make sure to subscribe on YouTube.

Happy Coding!