Styleguide with link

This is a Styleguide containing styling of all default elements on this site.

Heading examples with link

The following is examples of how headings are displayed on this site. Heading level 2 which is the one above, is used after h1 which just explains itselfs, isn’t it?

Heading level 3 with link

Heading level 4 with link

Unordered lists

Ordered lists

  1. list item one
  2. list item two
    1. nested
      1. even more nested
        1. four levels in fact
  3. now normal again

Defintion lists

Definition
This is some description of the definition
This is a second one
And some text that goes under it

Paragraphs

Here follows a lorem ipsum paragraph.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Blockquotes

And here is a blockquote with two paragraphs.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.

Lorem Ipsum

Links

You can follow this link to Google. Or this one to go back home.

This is a paragraph with a footnote1. It’s like a link, well it uses a link.

1 The footnote goes here, and there’s nothing useful here!

Standard table

a b c
1 2 3

Table with headings

header 1 header 2 header 3
cell cell cell

Table complete table markup

Caption
abc abc abc
ijk ijk ijk
def def def

Code

This paragraph contains some inline <code>.

The following code is css.

selector {
margin: 0;
padding: 0;
}

.second { position: absolute; }

And here is some javascript.

function foo(param) {
  var bar = param + 1;
  return bar;
}

Here’s some html.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<!-- Let's code shall we? -->

</body>
</html>

Pre formatted text.

Here follows a poem by Edgar Allan Poe to display how the pre element might be used.

From childhood's hour I have not been
As others were; I have not seen
As others saw; I could not bring
My passions from a common spring.
From the same source I have not taken
My sorrow; I could not awaken
My heart to joy at the same tone;
And all I loved, I loved alone.
Then- in my childhood, in the dawn
Of a most stormy life- was drawn
From every depth of good and ill
The mystery which binds me still:
From the torrent, or the fountain,
From the red cliff of the mountain,
From the sun that round me rolled
In its autumn tint of gold,
From the lightning in the sky
As it passed me flying by,
From the thunder and the storm,
And the cloud that took the form
(When the rest of Heaven was blue)
Of a demon in my view. 

Edgar Allan Poe

Images

Inline text elements

Here are some elements that usually is contained within other elements.

It’s also possible to combine some of the elements for fun effects, for example ins together with strong and i.

This is totally awesome

Horizontal rule