Semantic Tags

All HTML5 tags are styled learn them and use them.

Heading

Your text may use emphasis, or be stronger. You may strikethrough, underline or highlight it. You may want to indicate inserted or deleted text. Show code or keyboard entry, _subscript or ^superscript.

You may start another paragraph and include an image.

An image on a link will hightlight as you hover over it like this one.

Links try to be on one line even if they are long like this one.

You may have a block quote to show.

Use some lists

• Unordered list item 1
• Unordered list item 2

1. Ordered list item 1
2. Ordered list item 2

Definition list title 1

This is the first definition

Definition list title 2

This is the second definition

Use Tables

Here is an example table.

a table

Heading 1	Heading 2	Heading 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Buttons

Buttons align correctly next to text and other buttons, no matter what type of button.

Only one class is supplied with flat.css, apply class="button" to an <a> tag (or virtually any other tag) to make it appear as a button.

Buttons have different colours for submit, reset and disabled.

Buttons size can be adjusted by altering the font size. Either by setting the wrapping with a <small> tag; or you can alter the font-size in your stylesheet.

Forms

All HTML form tags are styled to look fairly similar cross browser. All will sit neatly aligned when next to each other.

To layout forms in other ways use <div> tag to separate elements, or simply extend with your own stylesheet.

Anything else?

flat.css is all about making the best of HTML5 without using javascript; there is nothing else really. This allows you to include this stylesheet in any project no matter what scripting framework you use - there is no need to add a framework specific module for flat.css. If you need grids, icons, more complex controls make or find your own. This project aims to style HTML elements only.

The most common HTML5 components are listed on this page. The test pages below have all of the others tags in many combinations.

• Tags - All HTML5 Tags on one page.
• Forms - All Forms components in many combinations.
• Tests - A page to check things are working.

Some other classes exist too:

• class="button" - to make non-buttons look like buttons.
• class="standard" - to make a submit or reset button look like a standard button.
• class="primary" - to make a standard button look like a submit button.
• class="negative" - to make a standard button look like a reset button.

flat.css is easily extended, suggestions welcome.

Acknowledgments

• Picnic CSS is great and heavily inspired me. It has got more controls than I wanted and not quite how I wanted them.
• Skeleton is also great and very similar to flat.css. It doesn't attempt to style so many things or be so pedantic with control alignment, but is much simpler.
• sanitize.css is included to make things easier for me.
• Open source code for you to use, share, extend; get in touch with suggestions for improvements.