<p>In this video, I’ll show you how to style <code>console.log()</code> output with CSS. We will use a <strong>CSS format specifier</strong> which allows us to customize the display in the console and we will also see few demos related to it.</p>
<h2 id="format-specifier">Format specifier</h2>
<p>A format specifier consists of a <code>%</code> 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.</p>
<h2 id="css-format-specifier">CSS Format specifier</h2>
<p>The CSS format specifier allows us to customize the display in the console. We will need to start the string with the specifier (<code>%c</code>) and give the style you wish to apply as the second parameter.</p>
<p>Please check out this video where this is explained in full details:</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/4RTBegxiE50">https://youtu.be/4RTBegxiE50</a></div>
<hr />

<h2 id="wrap-up">Wrap Up</h2>
<p>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 &amp; tricks, please make sure to <a target="_blank" href="https://www.youtube.com/channel/UCnnhIfN-A4JPs2ogiN59MRA?sub_confirmation=1">subscribe on YouTube</a>!</p>


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]

<hr/>

## 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](https://www.youtube.com/channel/UCnnhIfN-A4JPs2ogiN59MRA?sub_confirmation=1)!

How to style console.log() output with CSS

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!


Programmer • Technical Blogger • Positive Thinker

Code with Palash

Code with Palash

How to style console.log() output with CSS

Format specifier

CSS Format specifier

Wrap Up