#SIMPLE CSS FONT STRING HOW TO#
#SIMPLE CSS FONT STRING CODE#

Some people go as far as applying animations to the console. This goes to show that we can apply as much style as we want to our console output to produce any desired effect. Now we have four lines of text with same color but different font styles.

#SIMPLE CSS FONT STRING CODE#

If we paste this code in the console and run it, we will get this output: log ( '%cThis is a custom font style', 'color: blue font-family:sans-serif font-size: 20px' ) log ( '%cThis is a custom font style', 'color: blue font-family:monospace font-size: 20px' ) Ĭonsole. log ( '%cThis is a custom font style', 'color: blue font-family:serif font-size: 20px' ) Ĭonsole. log ( '%cThis is a default font style', 'color: blue font-size: 20px' ) Ĭonsole. In the earlier example, we changed up the text colors here, let’s see how we can change the fonts. In development and maybe for debugging purposes, we might need to print out similar contents to the console but need a way to tell them apart. The same way we applied the text color styles to the console output, we can more or less apply all CSS styles to the output. This will print all the texts we have written to the console in their specified color styles like this: log ( '%cThis is a red text', 'color:red' )

log ( '%cThis is a yellow text', 'color:yellow' ) Ĭonsole. log ( '%cThis is a blue text', 'color:blue' ) Ĭonsole. log ( '%cThis is a green text', 'color:green' ) Ĭonsole. As we have shown in the Syntax example, we can add colors to texts in the console by using the %c specifier like so: console. Let’s find out how we can replicate this feature in our usual console.log() messages. If we check the console now, we should get the String printed with green color.īy default, some console methods like console.warn() and console.error() log contents with certain color differences to draw attention to important messages for the user. Here, we have used the %c format specifier to declare that we’ll be applying CSS styles to the console output, we have written a String we’d like to print to the console, and finally we have defined the CSS effect we’d like to apply to the String. log ( '%cThis is a green text', 'color:green' ) Then we start the console message, which is usually a String with the specifier followed by the message we intend to log, and, finally, the styles we want to apply to the message: console. To add CSS styling to the console output, we use the CSS format specifier %c. As seen in the Elements panelįormats the value as an expandable JavaScript objectĪpplies CSS style rules to the output string as specified by the second parameter Specifierįormats the value as a floating point valueįormats the value as an expandable DOM element. This is a list of CSS format specifiers and their respective outputs. We can pass in properties as the second parameter to effect changes on the String (console message) in respective order or to insert values into the output String. Format specifiers contain the % symbol, followed by a letter that specifies the kind of formatting that should apply to the value. Format Specifierīefore we dive into it, let’s take a moment to understand exactly how it works. Without further ado, let’s start by logging a simple “Hello World!” and applying styles to it. We hope that by the end of this article, you would have learned all you need to know to style your console contents.

#SIMPLE CSS FONT STRING HOW TO#

In this post, we’ll be demonstrating how to apply styles when logging items to the console. As a result, it is only right that we find a way to give it an appealing look and feel, given how constantly we interact with it directly and indirectly. We use it to log items for various reasons, to view data, to keep certain data for later use, and so on. The console is a very useful part of every development process. We'll also touch on manipulating console.log output colors and fonts. Learn how the console.log output can be styled in DevTools using the CSS format specifier.

Simple css font string