Main blocks
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 pleasurediv
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:
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 |
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] 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 :)