THE WORLD'S LARGEST WEB DEVELOPER SITE

×

HTML and CSSLearn HTMLLearn CSSLearn BootstrapLearn W3.CSSLearn ColorsLearn IconsLearn GraphicsLearn SVGLearn CanvasLearn How ToLearn Sass
            XML
            Learn XML
            Learn XML AJAX
            Learn XML DOM
            Learn XML DTD
            Learn XML Schema
            Learn XSLT
            Learn XPath
            Learn XQuery
          
JavaScriptLearn JavaScriptLearn jQueryLearn ReactLearn AngularJSLearn JSONLearn AJAXLearn W3.JSProgrammingLearn PythonLearn JavaLearn C++Learn C#Learn Machine Learning


          Server Side
          Learn SQL
          Learn PHP
          Learn ASP
          Learn Node.js
          Learn Raspberry Pi          
          Web Building
          Web Templates
          Web Statistics
          Web Certificates
          Web Editor
          Web Development
        

          XML
          Learn XML
          Learn XML AJAX
          Learn XML DOM
          Learn XML DTD
          Learn XML Schema
          Learn XSLT
          Learn XPath
          Learn XQuery
        

×

          HTML
          HTML Tag Reference
          HTML Event Reference
          HTML Color Reference
          HTML Attribute Reference
          HTML Canvas Reference
          HTML SVG Reference
          HTML Character Sets
          Google Maps Reference
          CSS
          CSS Reference
          CSS Browser Support
          CSS Selector Reference
          Bootstrap 3 Reference
          Bootstrap 4 Reference
          W3.CSS Reference
          Icon Reference
          Sass Reference
       

          JavaScript
          JavaScript Reference
          HTML DOM Reference
          jQuery Reference
          AngularJS Reference
          W3.JS Reference
          Programming
          Python Reference
          Java Reference
        

          Server Side
          SQL Reference
          PHP Reference
          ASP Reference
          XML
          XML Reference
          XML Http Reference
          XSLT Reference
          XML Schema Reference
        

          Character Sets
          HTML Character Sets
          HTML ASCII
          HTML ANSI
          HTML Windows-1252
          HTML ISO-8859-1
          HTML Symbols
          HTML UTF-8
        

×

          Exercises
          HTML Exercises
          CSS Exercises
          JavaScript Exercises
          SQL Exercises
          PHP Exercises
          Python Exercises
          jQuery Exercises
          Java Exercises
          Bootstrap Exercises
          C++ Exercises
          C# Exercises
        

          Quizzes
          HTML Quiz
          CSS Quiz
          JavaScript Quiz
          SQL Quiz
          PHP Quiz
          Python Quiz
          jQuery Quiz
          Java Quiz
          Bootstrap Quiz
          XML Quiz
        

         Certificates
         HTML Certificate
         CSS Certificate
         JavaScript Certificate
         SQL Certificate
         PHP Certificate
         Python Certificate
         jQuery Certificate
         Bootstrap Certificate
         XML Certificate
        

W3.CSS Metro UI Colors

❮ Previous Next ❯

Windows Metro UI

Metro is the nickname of Microsoft Design Language (MDL).

Metro is focused on typography, simplified icons, and modern colors.

This example shows how to use Windows Metro colors with W3.CSS:

Example

<div class="w3-metro-light-green">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

Try It Yourself » Download the CSS »

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-light-green

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-green

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-dark-green

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-magenta

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-light-purple

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-purple

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-dark-purple

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-darken

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-teal

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-light-blue

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-blue

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-dark-blue

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-yellow

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-orange

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-dark-orange

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-red

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

w3-metro-dark-red

❮ Previous Next ❯

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.