Open In App

W3.CSS Code

Improve
Improve
Like Article
Like
Save
Share
Report

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 &lt; and &gt; respectively.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</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"><p></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 &lt; and &gt; respectively.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</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 -->
            <h1>Title One</h1> <br
            <p>A line of sample text</p
            <br> <p>Another line of sample 
            text</p> <br> <p>Yet another 
            line of sample text</p>
            <!-- Lines of code ends -->
        </div>
    </div>
</body>
  
</html>


Output:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads