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= </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 < and > 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:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.
