awsm.css contains styles for all really useful HTML5 skeleton tags. If you open the source code of this page you'll see all of them (except article but there are styles for it too).
What about others?
figure with kitten for your pleasure
div blocks are not styled because they don't have semantic value (as well as span elements which aren't styled either)
But quotes are really nice:
See, you not only have to be a good coder to create a system like Linux, you have to be a sneaky bastard too.
Yeah! They have absolutelly no custom styles :)
Lists
There's boring unordered list of jedi masters:
Plo Koon
Qui-Gon Jinn
Obi-Wan Kenobi
Luke Skywalker
Aalya Secura
Kit Fisto
Ahsoka Tano
Anakin Skywalker
Mace Windu
Yoda
Let's rank them on impact on the saga and personal accomplishments!
Luke Skywalker
Yoda
Obi-Wan Kenobi
Anakin Skywalker
Qui-Gon Jinn
Mace Windu
Ahsoka Tano
Plo Koon
Kit Fisto
Aalya Secura
You may see list wrapped by nav in the header of this page. And we also have description lists:
Blizzard
A howling blizzard is summoned to strike the opposing team. It may also freeze them solid.
Hidden Power
A unique attack that varies in type depending on the Pokémon using it.
Waterfall
The user charges at the target and may make it flinch. It can also be used to climb a waterfall.
Tables
For instance let's look at Apple, Microsoft & Google:
Comparison of IT giants
Title
Revenue
CEO
Founders
Apple
US$ 182.795 billion
Tim Cook
Steve Jobs, Steve Wozniak, Ronald Wayne
Microsoft
US$ 93.58 billion
Satya Nadella
Bill Gates, Paul Allen
Google
US$ 66.001 billion
Larry Page
Larry Page, Sergey Brin
Total revenue: US$ 342.376 billion
Inlines
awsm.css contains many styles for inline elements. For example omfg is abbreviation which means “Oh my fucking God!”. It's one of the most popular WWW abbreviation.
Of course the library has styles for strong and emphasized text. It doesn't have something special for b and i because in HTML5 they are only semantical elements. So they are same as strong and em.
If some part of the text is outdated you can delete this and insert actual version. You also can mark important thought.
Please note if you insert image inside p it'll be aligned to the right. And all paragraphs after it will flow around the picture on the left. But if you insert image outside p it'll be aligned to the center. You may see example below.
Above you've seen examples of using tags for quoting (blockquote & cite). There is another one tag. It's q. Imagine that we hear the song: Soft Kitty, Warm Kitty, little ball of fur.. Happy Kitty, Sleepy Kitty, purr, purr, purr.
And don't forget about attribute lang of this tag. Quotes depend on it. For instance in Russian quotes are different: Теплый пушистый котенок спит, свернулся в клубочек и мурчит.
Media
View of audio and video depends on your browser. You can see examples below.
Forms
Code formatting
sub and sup are supported too: tn = n3.
Also it has support of kbd: Ctrl+F; samp:
[22:13:57] Starting 'scss'...
[22:13:57] Finished 'scss' after 2.16 ms
[22:13:57] Starting 'css'...
[22:13:57] Finished 'css' after 1.99 ms
[BS] 1 file changed (awsm.min.css)
..and the block of code:
<h2>Code formatting</h2>
<p><code>sub</code> and <code>sup</code> are supported too: <var>t<sub>n</sub> = n<sup>3</sup></var>.</p>
If you need a good syntax highlight for your code, check the Plugins section.
Misc.
Show me the magic
This simple spoiler does not work in Internet Explorer and Firefox yet. Coming soon :)