W3.CSS Code

W3.CSS provides several classes for displaying inline and multiline blocks of code.

Displaying Inline Code: Inline code should be wrapped in <code> tags with w3-codespan as the class. The resulting text will be displayed in a fixed-width font and given a red font color with a light grey background.

Note: The < and > tags should be replaced with < and > respectively.

Example:

HTML

<!DOCTYPE html>
<html>

<head>

    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">

</head>

<body>
    <!-- w3-container is used to add 16px 
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">

        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>

    <!-- Inline Code in W3.CSS -->
    <div class="w3-container">
        <h3 class="w3-text-blue">Inline Code:</h3>

        <p>
            We define paragraphs in HTML using the
            <code class="w3-codespan">&lt;p&gt;</code> tag.
        </p>
    </div>
</body>

</html>

Output:

Displaying Multiline Code Blocks: Multiline code should be wrapped in <div> tags with class w3-code. The resulting text will be displayed in a readable mono-spaced font with spaces and line breaks being preserved.

Note: The < and > tags should be replaced with < and > respectively.

Example:

HTML

<!DOCTYPE html>
<html>

<head>

    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">

</head>

<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">

        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>

    <!-- Multiline Code Block in W3.CSS -->
    <div class="w3-container">
        <h3 class="w3-text-blue">
            Multiline Code Block:
        </h3>
        
        <div class="w3-code notranslate w3-card">
            <!-- Lines of code starts -->
            &lt;h1&gt;Title One&lt;/h1&gt; <br> 
            &lt;p&gt;A line of sample text&lt;/p&gt; 
            <br> &lt;p&gt;Another line of sample 
            text&lt;/p&gt; <br> &lt;p&gt;Yet another 
            line of sample text&lt;/p&gt;
            <!-- Lines of code ends -->
        </div>
    </div>
</body>

</html>

Output:

Explore