How To Add Style CSS To Javascript Console Message Tutorial

Table of Contents

Share this Article
Reading Time: 3 minutes

Inside this article we will see the concept i.e How To add style css to javascript console message. Article contains classified information about the concept of adding css to console text message.

Adding style CSS to console text message is a very interesting topic to learn and implement into programming.

You can add all CSS available properties to your javascript console text message. Here, we will see to add background, color, padding, etc to text message.

Learn More –

Let’s get started.

Application Programming

For this console programming either you can create any file or direct you can do inside your console.

var message = "Welcome To Online Web Tutor";

console.log("%c" + message, "background-color:black;color:white;font-weight:bold;font-size:20px;padding:5px;");

Here, you can see these –

  • message is a variable which contains a string text message.
  • %c is a placeholder which tells console.log that it has a second parameter value as well in format of CSS.
  • CSS Code: background-color:black;color:white;font-weight:bold;font-size:20px;padding:5px;


Add Border with message Using Style

var message = "Welcome To Online Web Tutor";

console.log("%c" + message, "background-color:cyan;color:blue;font-weight:bold;font-size:20px;padding:5px;border: 2px solid black;");

CSS Code

background-color:cyan;color:blue;font-weight:bold;font-size:20px;padding:5px;border: 2px solid black;

We hope this article helped you to learn How To Add Style CSS To Javascript Console Message Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5