W3.CSS has several utility classes which are very useful for day-to-day designing needs.
Color utility classes − Examples: w3-red, w3-yellow
Padding utility classes − Examples: w3-padding-jumbo, w3-padding-16
Margin utility classes − Examples: w3-margin-8, w3-margin-64
Border utility class − Examples: w3-border-left, w3-border-right
Size utility classes − Examples: w3-tiny, w3-small
Circle utility class − Example: w3-circle
Center utility class − Example: w3-center
<html> <head> <title>The W3.CSS Utilities</title> <meta name = "viewport" content = "width=device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css"> </head> <body class = "w3-container"> <h2>W3.CSS Utilities</h2> <hr/> <h3>Color Utilities Demo</h3> <div class = "w3-container w3-red"> <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p> </div> <div class = "w3-container w3-green"> <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p> </div> <h3>Padding Utilities Demo</h3> <div class = "w3-container w3-red w3-padding-jumbo"> <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p> </div> <div class = "w3-container w3-green w3-padding-16"> <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p> </div> <h3>Margin Utilities Demo</h3> <div class = "w3-container w3-margin-64"> <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p> </div> <div class = "w3-container w3-margin-8"> <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p> </div> <h3>Border Utilities Demo</h3> <div class = "w3-container w3-red w3-border-left w3-border-right"> <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p> </div> <div class = "w3-container w3-green w3-border"> <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p> </div> <h3>Size Utilities Demo</h3> <div class = "w3-container"> <p class = "w3-small">Using w3-small font.</p> <p>Using Default (medium).</p> <p class = "w3-large">Using w3-large font.</p> <p class = "w3-xlarge">Using w3-xlarge font.</p> </div> <h3>Circle Utility Demo</h3> <div class = "w3-container"> <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle"> </div> <h3>Center Utility Demo</h3> <div class = "w3-container w3-center w3-black w3-card-2"> <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5"> </div> </body> </html>
Verify the result.