Typography
This is an example page on how to use HTML markup elements and CSS styles included in the Metro UI Template. It is recommend to view the source of this file.
HTML markup
Basic tags
Use the <p> tag to create a new paragraph with some space before and after it.
Use the <br/> tag to go to the next line. (aka linebreak).
Use the <em> tag to put your text in italic
Use the <strong> tag to make it bold
Use the <u> tag to underline it
Use the <mark> tag to mark your text
Use the <del> tag to line-trough your text
Use the <small> tag for some sidenotes
Use the <abbr> tag to define an abbreviation and use the <dfn> element to define a definition term.
Quotes
You can use the<q> tagfor short
quotesor you can use the <blockquote> tag for longer quotes.
A longer quote to demonstrate the styling of the Metro UI Template
List
- Item 1
- Item 2
Code
Use the <code> tag to display something ascode. To display blocks of code, use the pre and the code tag;
hr.dotted {
border-top:1px #666 dashed;
}
hr.light{
border-color:#999;
}
CSS styles
Tables
Zebra tables, check source| Heading | Heading | Heading |
|---|---|---|
| Info | Info | Info |
| Info | Info | Info |
| Info | Info | Info |
| Footer | Footer | Footer |
Boxes
box-content
box-hint
box-info
box-download
box-warning
Forms
Definition list
- DEFENITION TERM
- A defenition description
- DEFENITION TERM
- A definition description.
- DEFENITION TERM
- A definition description.
- Another definition description.
