THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY XML MORE FORUM EXERCISES REFERENCES

W3.CSS Code

❮ Previous Next ❯

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 »

❮ Previous Next ❯