W3.CSS Code Last Updated : 02 Mar, 2021 Summarize Comments Improve Suggest changes Share Like Article Like 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 < 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"><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= "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 --> <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: Comment More infoAdvertise with us Next Article W3.CSS Lists A aditya_taparia Follow Improve Article Tags : CSS W3.CSS Similar Reads W3.CSS Cards A card is a flexible and extensible content container. It can include header, footer and a wide variety of content. W3.CSS helps the developers to add paper-like effects to the elements. It contains three types of classes: Sr. No. Class Name Description 1. w3-card It is used to add a box shadow of 2 3 min read W3.CSS Badges The .w3-badge class is used to add additional information to the content. For example, some websites associate some number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it. This 4 min read W3.CSS Lists Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list. Example: Adding a list on a webp 5 min read How to Add CSS Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios 3 min read W3.CSS Effects W3.CSS provides web developers with various effects. They can broadly be classified into three divisions. They are: OpacityGrayscaleSepiaOpacity Effects:There are four opacity effect classes: Sr. No. Class Name Description 1. w3-opacity-min The opacity of the targeted element is set to 0.75. 2. w3-o 4 min read W3.CSS Tags The .w3-tag is used to add additional information to the content. For example, some website highlights some sections to be new or when they have updated a section they add updated tag with that division so that user can see that they have updated to added new divisions on their site. This class when 4 min read Like