It makes your HTML beautiful


There are demos of library capabilities. From skeleton to media.

If these're not enough take a look more at the end of the page.



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.

What about others?

figure with kitten for your pleasure

div isn't styled because it doesn't have semantic value (as well as span elements which aren't styled either).

But for example 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.

Linus Torvalds

Yeah! They almost have no custom styles :)


There's boring unordered list of jedi masters:

  • Obi-Wan Kenobi
  • Luke Skywalker
  • Yoda

Let's rank them!

  1. Luke Skywalker
  2. Yoda
  3. Obi-Wan Kenobi

And we also have description lists:

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.
The user charges at the target and may make it flinch. It can also be used to climb a waterfall.


Let's look at Apple, Microsoft & Google:

Title Revenue Number of employees CEO Founders
Apple US$ 215.639 billion 115,000 Tim Cook Steve Jobs, Steve Wozniak, Ronald Wayne
Microsoft US$ 85.32 billion 114,000 Satya Nadella Bill Gates, Paul Allen
Google US$ 74.54 billion 57,100 Sundar Pichai Larry Page, Sergey Brin
Total revenue: US$ 375.499 billion

This table looks fine on mobile. Resize browser window and check this out!


Surprised catThe library has styles for strong, emphasized text and so on.

Please note if you insert image inside p it'll be aligned to the right side. But if you insert image outside p it'll be aligned to the center. See example below.

There are many others stylized inline tags in lib, but it would be boring to list them all.

Sleepy cat


View of audio and video depends on your browser.


Mars vacation program

Be first



<h2>Code formatting</h2>
<p>If you need a good syntax highlight for your code, check the <a title="Good plugins" href="plugins.html#highlightjs-prismjs">Plugins</a> section.</p>

If you need a good syntax highlight for your code, check the Plugins section.


Show me the magic

This simple spoiler doesn't work in Internet Explorer / Edge yet. Coming soon :)

But now you can star the repo, why not? ^_^



Do you need more examples? Here they are:

  • Blog
  • Simple homepage
  • Project's page — just look at this site :)
  • How page looks without awsm.css? Check this out! For removing floating button just click on the link once again.
  • Find more examples on GitHub