It tells the browser which version of HTML the the page is using.

The most important attribute of a link is **href**, which indicates the path or url that is accessed through it.

To achieve this, let's move our css outside of the head of the page and into a new file that we will link through the head.

We can change the the styling of some of these images by defining a more specific selector, which will superseed the `img` selector we just defined

Inspectors are development tools that help you view, edit and debug CSS, HTML and Javascript.

An element, can be visualised as a box. The box model tells browsers how the element and its attribtues relate to each other.

Order is **very** important. Always use the order descibed above if you want to apply differente styling for all of the states described above.

Add these to the `.sidebar` css

Now that the content is there, we can see that again, we need to tweak the element to display as an inline block and set its width to make sure it appears next to the siedbar.

Being the first paragraph a quote, so we can use `<blockquote>`, as it's more appropiate than a p tag.

Make the poem look different than the rest of the text. Add a css class `poem` to the span element and add styling

Within the footer, add an attribution to yourself and link to your twitter, facebook or any other place you want to.

Set a css class `portrait` to the `<div>` wrapping the image

and a css class `title` to the `<div>` wrapping the heading

Add a css class to the first image's wrapper

Add a css class to the second image's wrapper

Add space around the images so there is some separatin between them and the text

Add a css class `caption` to the description of each of the images

> Do you remember the padding shortcuts we disussed in the previous lessson? What does the above describe? Can you explain that to your coach?

This can be fixed by changin the `z-index`, who defines the order of overlapping.

Extend the css for the `header`

Before we continue any futher, format the existing content of the html file to use paragraphs `<p>`

You can also set different properties for your backgrounds, by defining them in a similar comma seperated way.

The name of an `em` doesn't really stand for anything. It was originaly used to describe that it was equal to the **M** character as it was commonly casted as the full-width of the square "block which are used in printing presses.

By using `em` insteaf of `px` to set the font-size, we are keeping it relative to the default font size. So 0.9em is 0.9 times the size that would have otherwise applied to that container.

Increase the `line-height` of all other pargraphs. We can do this with another very smart selector, The **not** selector.

Making it preetier

In the last lesson, we briefly introducted **HTML5** and **CSS3** with more focus on **CSS3**

A section is usually a blob of content. When you are considering using it, try and ask yourself if what you are thinking of defining as section has a natural heading. If not, you should propably avoid it. It is also used for sectioning elements.

aside can be used within different contexes. For example, if you are using it inside the page, the content needs to be related to the context of the page. Some example usage would be list of posts (if the page displays posts), advertising - if that is related to the page, or event additional navigation). If you use it within an article element, then the context should be specifically related to that article.

`<figcaption>` respresents a caption or legend for a picture.

When you include a video, if the browser used does not support it, it will fallback to the message you contain within the container

Also, dont forget to refer to the [previous tutorials](http://codebar.github.io/tutorials)

We'll start by just outputting some content on our browsr's inspector console.

Now let's output the current year, and autocalculate the value of the next year using **addition**

Let's section the output by outputing a title

In Javascript we can write conditions to control what we output

Functions are a major part of every programming language. They enable us to create meaningul snippets of code that we can rerun without having to define the same things again.

So far we've tried out functions with no and one argument. But noone limits how many we can use.

Besides outputing, which is nice when learning as it makes it easier to see the result, we can also `return` values.