Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-row w3-large"> <div class="w3-third w3-container w3-black"> <h2>On Black</h2> <p class="w3-text-red">w3-text-red</p> <p class="w3-text-pink">w3-text-pink</p> <p class="w3-text-purple">w3-text-purple</p> <p class="w3-text-deep-purple">w3-text-deep-purple</p> <p class="w3-text-indigo">w3-text-indigo</p> <p class="w3-text-blue">w3-text-blue</p> <p class="w3-text-light-blue">w3-text-light-blue</p> <p class="w3-text-cyan">w3-text-cyan</p> <p class="w3-text-aqua">w3-text-aqua</p> <p class="w3-text-teal">w3-text-teal</p> <p class="w3-text-green">w3-text-green</p> <p class="w3-text-light-green">w3-text-light-green</p> <p class="w3-text-lime">w3-text-lime</p> <p class="w3-text-sand">w3-text-sand</p> <p class="w3-text-khaki">w3-text-khaki</p> <p class="w3-text-yellow">w3-text-yellow</p> <p class="w3-text-amber">w3-text-amber</p> <p class="w3-text-orange">w3-text-orange</p> <p class="w3-text-deep-orange">w3-text-deep-orange</p> <p class="w3-text-blue-gray">w3-text-blue-gray</p> <p class="w3-text-brown">w3-text-brown</p> <p class="w3-text-light-gray">w3-text-light-gray</p> <p class="w3-text-gray">w3-text-gray</p> <p class="w3-text-dark-gray">w3-text-dark-gray</p> <p class="w3-text-black">w3-text-black</p> <p class="w3-text-white">w3-text-white</p> </div> <div class="w3-third w3-container w3-gray"> <h2>On Gray</h2> <p class="w3-text-red">w3-text-red</p> <p class="w3-text-pink">w3-text-pink</p> <p class="w3-text-purple">w3-text-purple</p> <p class="w3-text-deep-purple">w3-text-deep-purple</p> <p class="w3-text-indigo">w3-text-indigo</p> <p class="w3-text-blue">w3-text-blue</p> <p class="w3-text-light-blue">w3-text-light-blue</p> <p class="w3-text-cyan">w3-text-cyan</p> <p class="w3-text-aqua">w3-text-aqua</p> <p class="w3-text-teal">w3-text-teal</p> <p class="w3-text-green">w3-text-green</p> <p class="w3-text-light-green">w3-text-light-green</p> <p class="w3-text-lime">w3-text-lime</p> <p class="w3-text-sand">w3-text-sand</p> <p class="w3-text-khaki">w3-text-khaki</p> <p class="w3-text-yellow">w3-text-yellow</p> <p class="w3-text-amber">w3-text-amber</p> <p class="w3-text-orange">w3-text-orange</p> <p class="w3-text-deep-orange">w3-text-deep-orange</p> <p class="w3-text-blue-gray">w3-text-blue-gray</p> <p class="w3-text-brown">w3-text-brown</p> <p class="w3-text-light-gray">w3-text-light-gray</p> <p class="w3-text-gray">w3-text-gray</p> <p class="w3-text-dark-gray">w3-text-dark-gray</p> <p class="w3-text-black">w3-text-black</p> <p class="w3-text-white">w3-text-white</p> </div> <div class="w3-third w3-container"> <h2>On White</h2> <p class="w3-text-red">w3-text-red</p> <p class="w3-text-pink">w3-text-pink</p> <p class="w3-text-purple">w3-text-purple</p> <p class="w3-text-deep-purple">w3-text-deep-purple</p> <p class="w3-text-indigo">w3-text-indigo</p> <p class="w3-text-blue">w3-text-blue</p> <p class="w3-text-light-blue">w3-text-light-blue</p> <p class="w3-text-cyan">w3-text-cyan</p> <p class="w3-text-aqua">w3-text-aqua</p> <p class="w3-text-teal">w3-text-teal</p> <p class="w3-text-green">w3-text-green</p> <p class="w3-text-light-green">w3-text-light-green</p> <p class="w3-text-lime">w3-text-lime</p> <p class="w3-text-sand">w3-text-sand</p> <p class="w3-text-khaki">w3-text-khaki</p> <p class="w3-text-yellow">w3-text-yellow</p> <p class="w3-text-amber">w3-text-amber</p> <p class="w3-text-orange">w3-text-orange</p> <p class="w3-text-deep-orange">w3-text-deep-orange</p> <p class="w3-text-blue-gray">w3-text-blue-gray</p> <p class="w3-text-brown">w3-text-brown</p> <p class="w3-text-light-gray">w3-text-light-gray</p> <p class="w3-text-gray">w3-text-gray</p> <p class="w3-text-dark-gray">w3-text-dark-gray</p> <p class="w3-text-black">w3-text-black</p> <p class="w3-text-white">w3-text-white</p> </div> </div> </body> </html>
