How to style console.log() output with CSS

UpdatedJuly 23, 2021

•1 min read

How to style console.log() output with CSS

Hi everyone 👋

I am Palash, a passionate programmer & front-end developer. I like to share HTML, CSS, JavaScript and web development tips & tricks and try to explain them in a simple manner.

Happy Coding!

Part of seriesHow To Series

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.

Please check out this video where this is explained in full details:

https://youtu.be/4RTBegxiE50

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!

#coding #javascript #console #css #tips

568 views

Comments (1)

Join the discussion

Chirag Dev4y ago

Nice blog post, Palash!

How To Series

Part 2 of 5

This is a collection of all my how-to articles in one place. I hope this series will help you. Happy Coding!

Up next

How to style console.log() output with CSS - Part 2

This video is part 2 of How to style console.log() output with CSS. In this video, I am going to explain about how can we create a generic logic so that we can easily style console log output and do it bit faster. Issue Faced So, right now in order ...

More from this blog

🔥 7 Awesome JavaScript Carousel Libraries

In this article, we will see 7 Awesome lightweight and dependency-free JavaScript Carousel Libraries for your projects.

Aug 23, 20213 min read9.0K

🔥 7 Awesome JavaScript Carousel Libraries

🔥 Top 7 JavaScript Array sort() Method Use Cases

In this article, we will see the most common use cases for the Array sort() method and how we can utilise its power to the fullest. 🚀

Aug 20, 202110 min read8.9K

🔥 Top 7 JavaScript Array sort() Method Use Cases

🔥 6 Awesome CSS Layout Generators

Hi everyone 👋 Today I wanted to share with you 6 awesome CSS layout generators/tools that will help you in rapid prototyping and front-end development of CSS layouts for your projects. I hope you will find it useful and bookmark it so that you can r...

Aug 13, 20213 min read17K

Awesome JavaScript Posts (Week 29)

Here is a curated list of the latest posts, blogs and repositories related to JavaScript from last week (week 29). I hope you will find it useful and it will help you to gain more knowledge about what's latest happening in the world of JavaScript. Le...

Jul 30, 20214 min read432

🔥 10 Awesome JavaScript Shorthands

Hi everyone 👋 Today I wanted to share with you 10 awesome JavaScript shorthands that will increase your speed by helping you to write less code and do more. Let's start! 1. Merge Arrays Longhand: We usually merge two arrays using Array concat() meth...

Jul 25, 20217 min read6.9K

Code with Palash

11 posts

Hi 👋 I am Palash, a passionate programmer & front-end developer. I like to share HTML, CSS, JavaScript and web development tips & tricks and try to explain them in a simple manner. Happy Coding!

Command Palette