Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.CSS Code


Display Examples

The w3-panel class is used to display examples in a grey container:

Example

  • Jill
  • Eve
  • Adam

Try It Yourself »


Display Code

The w3-code class is used to display code in a readable mono-spaced font.

Example

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";

Try It Yourself »


Highlight Inline Code

The w3-codespan class is used to highlight inline code:

The html element defines an HTML page.

Example

The <code class="w3-codespan">html</code> element defines an HTML page.
Try It Yourself »


Coloring Code

W3Schools provides a JavaScript library for coloring code.

Example

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";

You can download the library from here: https://www.w3schools.com/lib/w3codecolor.js

If you use the w3codecolor.js library, you can also use the code classes described below:


Highlight JavaScript Code

The jsHigh class is used to highlight JavaScript code:

Example

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Try It Yourself »

Highlight HTML Code

The htmlHigh class is used to highlight HTML code:

Example

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Try It Yourself »

Highlight CSS Code

The cssHigh class is used to highlight CSS code:

Example

<div class="w3-code cssHigh">

.. CSS code here

</div>
Try It Yourself »