learning-materials.html

---
layout: page
title: Learning Materials
permalink: /learning-materials/
---

<p>These are the learning materials to the CSSclasses beginners workshop. In this workshop, you’ll learn the very basics of creating a website. We’ll walk through every step together, and our coaches will assist you when you run into any problems or have questions. At the end of the workshop, you’ll find tips and links on how to educate yourself further, and ideas and suggestions on what to try out and experiment with.</p>

<section id="basics">
    <h3>The Basics</h3>
    <ul>
        <!-- <li><a href="#browser">What is a browser</a></li> -->
        <li><a href="#index">How to create a file called index.html</a></li>
        <li><a href="#open_index">How to open it in the browser</a></li>
        <li><a href="#edit_save_refresh">Edit, Save and refresh workflow</a></li>
    </ul>

    <!-- <h4 id="browser">What is a browser</h4>
    <p>So. What is a browser? Chances are pretty high you already know a browser because you are using one to look at this page. The browser is the tool that <i>renders</i> your website. It loads HTML files and shows their content to you using layout rules that were written in CSS to figure out <i>how the content should look</i>. There are standards for how HTML and CSS work, so theoretically websites should be rendered the same way in every browser if they were created following those standards.</p>
    <p>The browser also handles all the nasty networking stuff for you and loads files from the internet to your computer to show them to you. And it knows how to deal with links so you can just click something and get a whole different website without having to type a different website address.</p>
    <p>There are many browsers. Popular choices (or pre-installed by the software company) for desktop and laptop computers are Firefox, Chrome, Opera, Safari and Internet Explorer. Also there are a lot of browsers for mobile phones like iOS Safari, Opera Mini, Android Browser, Blackberry Browser, Chrome and Firefox for Android and Internet Explorer Mobile. There are even more browsers for gaming devices, "smart" tvs, cars, fridges, watches… you get the idea.</p> -->
    <h4 id="index">How to create a file called index.html</h4>
    <p>Now it is time for you to create your first website! Open your text editor and create a new file. In your text editor (e.g. Sublime Text), click the "File" menu and then click "New File". Now type "Hello World!" or any other sentence you always wanted to read in your favorite browser. Now click "File -> Save as…" and navigate to a folder you know how to find on your computer. It could be a good idea for now to just create a folder on your desktop or in your home folder called "cssclasses" and save your file in it. As a filename choose "index.html" and click "save".</p>
    <img src="../images/create-index.png" alt="">
    <h4 id="open_index">How to open index.html in your browser</h4>
    <p>So now you have an HTML file, sort of. To open it in your browser, use Windows Explorer, your Linux file manager or Finder on Mac to find your index.html file where you just saved it. By just double-clicking it, your system’s default browser should open this file and show your sentence on the screen. Hooray!</p>
    <h4 id="edit_save_refresh">Edit, Save and refresh workflow</h4>
    <p>Leave this browser window open and go back to your text editor. Edit your index.html by adding a second sentence. For example, you might edit your text to look like this: "Hello world! How are you?". Click "File -> Save" again (or use the keyboard shortcut to save some time: CMd + S). Now go back to your browser. No change showing? Sad face? You’ll have to click the "Refresh" button (or use the shortcut: CMD + R) in your browser to see the change on screen. All there? Great! Now let’s make this a <i>real</i> website.</p>
    <img src="../images/save-reload.png" alt="">
</section>

<section id="html_boilerplate">
    <h3>Basic HTML &amp; HTML boilerplate</h3>
    <ul>
        <li><a href="#elementstags">Elements and Tags</a></li>
        <li><a href="#boilerplate">HTML Boilerplate</a></li>
        <li><a href="#pageflow">Pageflow (block, inline and inline-block )</a></li>
        <li><a href="#images">Images</a></li>
        <li><a href="#links">Links</a></li>
    </ul>

    <h4 id="elementstags">Elements and Tags</h4>
    <p>Elements and Tags are the building blocks of HTML.</p>

    <p>Elements are what makes up a HTML document. You can put elements inside of other elements. An element can include three things: a tag, attributes, and content.</p>

    <p>A Tag is the thing that indicates an element’s purpose. For example, the <code>&lt;p&gt;</code> tag indicates a paragraph of text is in that element, and the <code>&lt;li&gt;</code> represents a ‘list item’. You’ll notice they’re always surrounded by angle brackets. Opening and Closing tags mark the beginning and end of an element and wrap its content, like so:</p>

    {% highlight HTML %}
        <p>This is a paragraph.</p>
    {% endhighlight %}

    <p>You can see the closing tag includes a <code>/</code> before its name; otherwise it would be another opening tag!</p>

    <p>Always double-check that you’ve closed all your elements; otherwise, a browser can and will get mixed up trying to understand your HTML document.</p>

    <p>Lastly, having elements inside of each other (“nesting”) looks just like this:</p>

    {% highlight HTML %}
        <p>This is a sentence, with an <em>em</em> element ("emphasize") inside of it.</p>
    {% endhighlight %}

    <p>or this:</p>

    {% highlight HTML %}
<div id="main-container">
  <h1>The h1 tag indicates the primary header of the document.</h1>
  <p>Some text.</p>
</div>
    {% endhighlight %}
    <p>In the above example, you can see our first case of an attribute. It starts with a lowercase name, and then is almost always followed by an = and a ‘value’ that’s surrounded in double quotes, "like this". An element can have many attributes, in which case you separate them by spaces, as you’ll see soon. Attributes give information about an element in particular.</p>
    <h4 id="pageflow">Pageflow</h4>
    <p>In most circumstances "normal flow" is the way that elements are laid out on a web page. Every element in HTML is inside a rectangular box. Shown on the picture below.</p>
    <img src="../images/pageflow-boxes.png" alt="">
    <p>In our example, each of these boxes are one of two different types: <strong>inline boxes</strong> or <strong>block boxes</strong>. So what exactly does this mean? Let’s start with block boxes.</p>

    <p><strong>Block boxes</strong> are stacked vertically one after the other in order they’ve been written in the HTML file, and they usually occupy the whole width of the page. They normally start in the upper left corner and go down to the bottom.</p>
    <p>Here is a simple example. Don’t get confused by the additional CSS. It’s just there for the purpose of making the boxes visible.</p>
    <p data-height="404" data-theme-id="0" data-slug-hash="tmcHC" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/verpixelt/pen/tmcHC/'>CSSClasses Block Boxes</a> by Kevin Lorenz (<a href='http://codepen.io/verpixelt'>@verpixelt</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//codepen.io/assets/embed/ei.js"></script>
    <p><strong>Inline Boxes</strong> work a bit different. These boxes will also start at the upper left corner, but will arrange itselfs horizontal.</p>
    <p>Here’s an example for that as well.</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="rtvGu" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/verpixelt/pen/rtvGu/'>CSSClasses inline box</a> by Kevin Lorenz (<a href='http://codepen.io/verpixelt'>@verpixelt</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//codepen.io/assets/embed/ei.js"></script>
    <p>So HTML elements are by default either <strong>block boxes</strong> or <strong>inline boxes</strong> (of course, there are exceptions to this rule, but we don’t have to worry about that for now). For example, <code>div</code> is a block element, and so are headings like <code>h1</code> or <code>h2</code>. <code>span</code> or <code>strong</code> on the other hand are <strong>inline elements</strong>. Here are lists for the different elements:</p>
    <ul>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente">Inline elements</a></li>
    </ul>
    <p>For now just keep in mind, that every box has some sort of display value.</p>
    <h4 id="boilerplate">HTML Boilerplate</h4>
    <p>There is some basic structure you should not spend too much time on that is always there. Lets handle this in a very quick walkthrough (code right, line-by-line comments left):</p>
    <div class="sidebyside">
        <div class="description">
            This is a <code>doctype</code>. Every HTML file should have one. Basically you only need this one nowadays, as this means <code>HTML5</code> (what you learn here) for modern browsers but old browsers still pick up on your file to be some kind of HTML.
        </div>
        {% highlight HTML %}
            <!DOCTYPE html>
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            Here the HTML starts, so we put an opening <code>html</code> tag here…
        </div>
        {% highlight HTML %}
            <html>
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            Inside of the <code>head</code> we can put some meta-information…
        </div>
        {% highlight HTML %}
            <head>
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            …like the <code>charset</code>. This one is important, it will tell the browser which set of characters to use so all your Ûmlåute or ♥s will be shown correctly. If something seems wrong, make sure your editor saves HTML files with UTF-8 encoding.
        </div>
        {% highlight HTML %}
            <meta charset="UTF-8">
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            …or the <code>title</code>. You will see the title on your browser tab.
        </div>
        {% highlight HTML %}
            <title>Our Page Title</title>
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            And then we’ll close our <code>head</code> element and open our <code>body</code>, where the actual content goes (finally!).
        </div>
        {% highlight HTML %}
</head>
<body>
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            Here is just a <code>&lt;h1&gt;</code> that is a <em>heading</em> and a <em>comment</em> that will not be rendered in the browser. Even if it is many lines of actual HTML between <code>&lt;!--</code> and <code>&gt;--></code>.
        </div>
        {% highlight HTML %}
<h1>Hello world!</h1>
<!-- put all the cat content here :) -->
        {% endhighlight %}
    </div>
    <div class="sidebyside">
        <div class="description">
            And finally we close our <code>body</code> and <code>html</code> elements.
        </div>
        {% highlight HTML %}
</body>
</html>
        {% endhighlight %}
    </div>
    <p>And there we are, this is our first <em>valid</em> HTML file! Here it is again, so you can neatly copy&paste it:</p>
{% highlight HTML %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Our Page Title</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <!-- put all the cat content here :) -->
  </body>
</html>
{% endhighlight %}
</section>
<section id="elements">
    <p>Here are some practical elements:</p>
    <h4>Headings (h1-h6)</h4>
    <p>There is a hierarchy of heading elements that you can use for headlines. They start with h1 and end with h6.</p>
{% highlight HTML %}
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
{% endhighlight %}
    <h4>Paragraph</h4>
    <p>This is the perfect tag if you want to markup text. Even this text is wrapped in a p.</p>
{% highlight HTML %}
<p>Some text</p>
{% endhighlight %}
    <h4>Strong, em, break</h4>
    <p>These are some inline Elements that you can nest inside a paragraph. <strong>Strong</strong> and <em>emphasis</em> give some meaning to pieces of text, while break forces a<br> linebreak.</p>
{% highlight HTML %}
<strong>Strong</strong> and <em>emphasis</em>,
<br>break
{% endhighlight %}
    <h4 id="images">Images</h4>
    <p>The image tag is special as it is self-closing, it has no closing tag (like the break tag). It also has a special attribute the src which carries the path to the actual image. The alt attribute is a placeholder, if the image does for some reason not load.</p>
{% highlight HTML %}
<img src="http://placekitten.com/500/200" alt="cat content">
{% endhighlight %}
    <img src="//placekitten.com/500/200" alt="cat content">
    <h4 id="links">Links</h4>
    <p>Links take the user to another page. The tag is simply an a which stands for anchor. It comes with the href (hyper reference) attribute, that tells the browser where to go to. You can also add a title attribute that shows once the user hovers over it.</p>
{% highlight HTML %}
<a href="http://cssconf.eu" title="CSS Conf EU">CSSConfEU</a>
{% endhighlight %}
    <h4>Div</h4>
    <p>The div element is an element that does not have a special meaning or special styling. It’s perfect for grouping other elements together and assigning them a class or an id.</p>
{% highlight HTML %}
<div>I do nothing special</div>
{% endhighlight %}
</section>

<section id="css">
    <h3>CSS</h3>
    <ul>
        <li><a href="#whatiscss">CSS - What is that?</a></li>
        <li><a href="#inlinecss">Where do I put my CSS?</a></li>
        <li><a href="#basiccsssyntax">Basic CSS syntax</a></li>
        <li><a href="#properties">Useful properties</a></li>
        <li><a href="#shorthand">Shorthand</a></li>
        <li><a href="#font-family">Font-Family</a></li>
        <li><a href="#font-size">Font-Size</a></li>
        <li><a href="#border">Border</a></li>
        <li><a href="#boxmodel">The Box Model</a></li>
        <li><a href="#hover">Hover</a></li>
        <li><a href="#classes">Class Selectors</a></li>
        <li><a href="#transitions">Transitions</a></li>
    </ul>

    <h4 id="whatiscss">CSS - what is that?</h4>
    <p>CSS is used to <em>style</em> your HTML elements. You can manipulate the colors, margins, positions and many other <em>properties</em> of elements. This is done through the rules you write. Sometimes more than one rule applies to an element, so CSS decides which properties are actually applied to the element in case the two rules conflict with each other. This is the "cascading" part of our <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heet.</p>

    <h4 id="inlinecss">Start with inline styles</h4>
    <p>To get you started, you can just insert a <code>style</code> tag inside of your <code>head</code> tag:</p>
{% highlight HTML %}
<head>
  <meta charset="UTF-8">
  <title>Our Page Title</title>
  <style type="text/css">
    /* CSS styling rules here. Yes, comments are different in CSS. It’s not our fault! */
  </style>
  </head>
{% endhighlight %}

    <h4 id="basiccsssyntax">Basic CSS syntax</h4>
    <p>CSS has a simple syntax. The file consists of a list of rules. Each rule consists of one or more <em>selectors</em> and a declaration block. Your selectors identify your HTML elements, so they are used to declare which part of the markup a style applies to. Let’s take the h1 title we wrote in our HTML file and give it a nice red color:</p>
{% highlight CSS %}
h1 {
  color: red;
}
{% endhighlight %}
    <p><code>h1</code> is the selector, the HTML element we want to style. <code>color</code> is one of the properties that we can give to our selector, and <code>red</code> is the value of this property. The right syntax is:</p>
{% highlight CSS %}
selector {
  property: value; /* remember always to write a ; after your value. */
  property: value;
}
{% endhighlight %}
    <p>Refresh your browser (CMD + R) and see how the color of your title has changed. Wow, so red! Isn’t this nice?</p>

    <h4 id="properties">Useful CSS properties</h4>
    <p>Now, let us insert a <code>div</code> and style it a little bit. So parts of your file should look like this:</p>
{% highlight HTML %}
<head>
<!-- ... -->
  <style type="text/css">
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>
{% endhighlight %}
    <p>So now if you save and hit refresh, you should see a green block with some white text stating "I’m a div" on it. So here you see some properties, you already know <code>color</code>. There is also <code>background-color</code>, <code>width</code> and <code>height</code>.</p>

    <h4 id="shorthand">Shorthand</h4>
    <p>On some occasions you might see properties defined in different ways but doing the same thing, such as:</p>
{% highlight CSS %}
selector {
  border-width: 1px;
  border-style: dotted;
  border-color: green;
}

anotherselector {
  border: 1px dotted green;
}
{% endhighlight %}

<p>This is what we call shorthand. Some properties have a shorthand format that allows us to define more properties at once, but just in one line. The order and the way it works is not always very obvious so you might need to look it up on a <a href="http://devdocs.io/css">reference</a>, but don't worry too much about it for now. It's just good that you know that it exists in case you see it. If you think it's confusing, just use the non shorthand format for your own code and specify each property at a time.</p>

    <h4 id="font-family">Font-family</h4>
    <p>The <code>font-family</code> CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded.</p>
    <p>You should always add at least one generic family in a font-family list, since there’s no guarantee that a specific font is installed on the computer or can be downloaded.</p>
    {% highlight CSS %}
body {
  font-family: Proxima-Nova, Helvetica, sans-serif;
}
{% endhighlight %}
    <p>Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.</p>
    <p>Here a few examples how it’s done <span class="true">right</span>:</p>
{% highlight CSS %}
body {
  font-family: Times, "Times New Roman", Georgia, serif;
}

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

p {
  font-family: cursive;
}
{% endhighlight %}
<p>Keep going with our example let’s add a font-family to the <code>div</code> we’ve created before.</p>
{% highlight HTML %}
<head>
<!-- ... -->
  <style type="text/css">
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>
{% endhighlight %}
<p>If you hit refresh (CMD + R) again, your font-family should have changed from the default serif to sans-serif. Now that wasn’t so hard, was it?</p>

    <h4 id="font-size">Font-Size</h4>
    <p>The <code>font-size</code> property allows you to set a font size for the text in your Element. There are different ways to set font-sizes that can get a little tricky, so let us only use the most simple technique for now (you should <em>really</em> revisit this topic later). We will assign fixed pixel values to our elements:</p>
    {% highlight html %}
<head>
<!-- ... -->
  <style type="text/css">
    html {
      font-size: 10px;
    }
    h1 {
      font-size: 32px;
    }
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>I am a big heading</h1>
  <div>I am a div</div>
</body>
    {% endhighlight %}
    <p>First you can see we set the <code>font-size</code> for <em>everything inside of the html element</em> to a small <code>10px</code> (by default modern browsers set 16px). All the elements on the inside will inherit this value, if they don’t have a different rule for their font size. As you can see, the <code>h1</code> has a value of <code>32px</code> assigned, so the browser shows us a big heading while the div has the small text size without having any <code>font-size</code> property declared.</p>

    <h4 id="border">Border</h4>
    <p>You can also put a nice <code>border</code> around your elements. Try this:</p>
    {% highlight html %}
<head>
<!-- ... -->
  <style type="text/css">
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
      border: 5px solid black;
    }
  </style>
</head>
<body>
  <div>I am a div with a border</div>
</body>
    {% endhighlight %}
    <p>Now you assigned your <code>div</code> to have a <code>black</code> border that is <code>5px</code> thick and <code>solid</code>. Let’s dissect the <code>border</code> property a little bit with a different border and a generic description:</p>
    {% highlight CSS %}
border: 20px dashed #ff88aa;
border: <line-width> || <line-style> || <color>;
    {% endhighlight %}
    <p>Here you see an even thicker border that is not solid and has a different color, but is also <code>dashed</code> instead of <code>solid</code>. The color is a good example for how many different types of values a lot of CSS properties accept. Let’s just say there are a lot more than would fit nicely on this page. Often you’ll find yourself searching the web for the accepted input values, or looking them up in the <em>CSS spec</em> (check links at the end of the tutorial). This color value is in HEX RGB notation. It can be convenient to use a color picker tool (you can find them online or even use good ol’ MSPaint!) to find the color you want and then just copy and paste the value from there.</p>

    <h4 id="boxmodel">The Box Model</h4>
    <p>The Box Model is something that describes how all of these boxes behave, and how the browser knows about the space they occupy on a page.</p>

    <p>We’ve told you that you can specify width, height and borders, but there’s more than that. You can also specify a <code>padding</code>, which is some space between your content and the edge of the box. And you can specify a <code>margin</code>, which is the size between the box and it's neighboring boxes.</p>

    <p>Here’s an example with all of these properties so you can see how they behave. Note that the content is 5px away from the border, and that the boxes are 10px away from each other.</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="jzfqi" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/trodrigues/pen/jzfqi/'>jzfqi</a> by Tiago Rodrigues (<a href='http://codepen.io/trodrigues'>@trodrigues</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

    <p>And here you can see how these different properties compose a box:</p>
    <p><img src="../images/boxmodel.png" alt=""></p>

    <p>Now, how much space does this box occupy on a page? We need to take into account not just the width and the height that was specified, but also the paddings and the borders (we can forget about the margins for now). So in reality, our box occupies a width of 80px plus 5px on each side for the paddings, plus 1px for each border (note we're using the border shorthand). So that means that the real width is 92px.</p>

    <p>There is a way to make the box model work differently, so that you don't need to do these kinds of calculations, using the box-sizing property:</p>
    {% highlight CSS %}
    box-sizing: border-box;
    {% endhighlight %}

    <p data-height="268" data-theme-id="0" data-slug-hash="kgpyK" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bastianalbers/pen/kgpyK/'>kgpyK</a> by Bastian Albers (<a href='http://codepen.io/bastianalbers'>@bastianalbers</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

    <p>If you specify that, now your box will actually occupy just 80px, as the borders and paddings become part of the box. This usually makes it easier to understand, so we suggest you use it.</p>

    <!-- TODO need to explain shorthand before explaining the padding stuff and how much size it occupies -->
    <!--<p>Now, how much space does this box occupy on a page? We need to take into account not just the width and the height that was specified, but also the paddings and the borders (we can forget about the margins for now). So in reality, our box occupies a size of 80x plus 5px on each side for the paddings, </p>
    -->


    <h4 id="hover">Hover</h4>
    <p>Hover is a small example of how you can add some fun little interactivity to your site. Take our <code>div</code> example from above and let’s add a little bit to our CSS:</p>
    {% highlight CSS %}
div {
  color: white;
  background-color: green;
  width: 300px;
  height: 200px;
  font-family: sans-serif;
  border: 5px solid black;
}
div:hover {
  background-color: red;
  border: 5px dotted black;
}
    {% endhighlight %}
    <p>If you apply this CSS to our <a href="#border">border</a> example, you will see no change at first. But if you move your mouse cursor <em>over</em> the <code>div</code> (you "<code>hover</code>" it), you will see the style changes applied, that we defined with the <code>div:hover</code> pseudo-class. There are some more pseudo-classes like that that you can learn about later.</p>

    <h4 id="classes">Class Selectors</h4>
    <p>Until now we used the element selector to apply styles to an element. What’s wrong with that? Nothing, until you want to have two or more differently styled <code>div</code>s on your page.</p>
    {% highlight html %}
<head>
<!-- ... -->
<style type="text/css">
    div {
        color: white;
        background-color: green;
        width: 300px;
        height: 200px;
        font-family: sans-serif;
        border: 5px solid black;
    }
</style>
</head>
<body>
<div>I am a div with a border</div>
<div>I am a different div but i look like the other one! Sadface!</div>
</body>
    {% endhighlight %}
    <p>Copy this code example into your html file, and check out what it looks like in the browser. Now let’s say the second <code>div</code> should be blue. We can achieve that by assigning classes to the <code>div</code>s in our HTML. We can then apply styles to each class in our CSS:</p>
    {% highlight html %}
<head>
<!-- ... -->
<style type="text/css">
    div {
        width: 300px;
        height: 200px;
        font-family: sans-serif;
        border: 5px solid black;
    }
    .greenthing {
        background-color: green;
    }
    .bluething {
        background-color: blue;
        font-family: serif;
        text-align: center;
    }
    .border-dotted {
        border: 5px dotted black;
    }
</style>
</head>
<body>
<div class="greenthing">I am a div with a border</div>
<div class="bluething border-dotted">I am a different div and I don’t look like the other one any more! YAY!</div>
</body>
    {% endhighlight %}
    <p>Now here you should note several things. Both <code>div</code>s get the styles of the <code>div</code> rule, as this applies to all <code>div</code>s. Then the first <code>div</code> also gets the styles of the class <code>.greenthing</code>. In HTML the classes get assigned by writing a class <em>attribute</em> inside of the opening tag of the element. The second <code>div</code> has two classes – you can assign as many of them as you want! Just separate them by a space. In the CSS code, class selectors are marked by a dot like this: <code>.border-dotted</code>. This class is remarkable as it <code>overrides</code> the border style that was defined in the <code>div</code> selector.</p>

    <h4 id="transitions">Transitions</h4>
    <p>Transitions are a nice way to add some interactive animations to your site. If you add a transition to an element, the browser will automatically animate between two states when they change. To try that you can combine what you just learned about classes and <code>:hover</code> and add the <code>transition</code> property to the mix:
    {% highlight html %}
<head>
<!-- ... -->
<style type="text/css">
    .changeonhover {
        color: white;
        background-color: green;
        text-align: center;
        width: 300px;
        height: 200px;
        font-family: sans-serif;
        border: 5px solid black;
        transition: 1s all;
    }
    .changeonhover:hover {
        background-color: blue;
        width: 600px;
        height: 300px;
    }
</style>
</head>
<body>
<div>Hover me! Hover Me!</div>
</body>
    {% endhighlight %}
    <p>Notice how you did not need to define an animation but still the browser animates between the two states? All we did is insert <code>transition: 1s all;</code> which is the transition shorthand with just the first two values that are a <code>transition-duration</code> of 1 second and the <code>transition-property</code> of <code>all</code> which means the browser will animate between all properties that have changed. You could also define different transitions for different properties, separated by a comma. Let’s go a little overboard with that and also use the other transition values:</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="LKltb" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/bastianalbers/pen/LKltb/'>LKltb</a> by Bastian Albers (<a href='http://codepen.io/bastianalbers'>@bastianalbers</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
    <p>Notice how we used a very complicated transition shorthand here:</p>
    {% highlight CSS %}
transition: 1s width 0.2s ease-out, 2s background-color, 0.5s height 0.5s;
    {% endhighlight %}
    <p>Let’s break it down: <code>1s width 0.2s ease-out</code> are the values that define the transition just for the width. The shorthand syntax is:</p>
    {% highlight CSS %}
transition: transition-duration transition-property transition-delay transition-timing-function;
    {% endhighlight %}
    <p>So in our example the width gets transitioned for one second, but only after a 0.2 second delay with a timing function of ease-out. And then you use a comma and define the transition for the next property if you want to. Phew, sounds complicated, right? But as you can see in the example, you don’t always need to define <em>all</em> values, as they will have default values, as the 2s background-color transition shows. Don’t worry. It’s ok to look this up every time until you remember it.</p>
</section>
<section id="challenges">
  <h2>Challenges: Start experimenting!</h2>
  <p>
    Believe it or not: Now you know the basics of getting content and styles on your website! You might have noticed that, once you got the hang of the basic syntax, CSS is surprisingly simple and often self-explanatory. From here on, you have all the tools you need to explore the many more properties and possibilities of CSS. Start experimenting – we want to see what you discovered in the demos!
  </p>
  <h3>Some ideas to get you started…</h3>
  <div class="challenge">
    <div class="example dotted_circle"></div>

    <p>
      <strong>The dotted circle</strong>: You already know how to apply these borders to a box, right? Now make it a circle! Hint: Look up the <code>border-radius</code> property!
    </p>
  </div>

  <div class="challenge">
    <a class="example fancy_link" href="3">Hover me!</a>

    <p>
      <strong>The fancy link</strong>: <code>border-radius</code>, <code>background-color</code>, <code>padding</code>, <code>:hover</code> … you know most of the things to create a nice looking link like this!
    </p>
  </div>

  <div class="challenge">
    <div class="example polaroid">
      <img src="http://distilleryimage5.ak.instagram.com/22452da87ebf11e28d8c22000a1f9ad6_7.jpg" alt="Lake Tahoe" />
    </div>

    <p>
      <strong>The Polaroid</strong>: You know how to add an <code>img</code>, you know how to apply <code>padding</code>. If now you can figure out how <code>box-shadow</code> works, creating a Polaroid effect like this will be a piece of cake for you!
    </p>
  </div>

  <div class="challenge">
    <div class="example galaxy">
      <div class="rotation_axis">
        <div class="sun"></div>
        <div class="star"></div>
      </div>
    </div>

    <p>
      <strong>The Little Galaxy</strong>: <code>transform</code>, <code>animation</code>, <code>@keyframes</code>. All the new things!
    </p>
  </div>

  <div class="challenge">
    <div class="example smiley">
      <div class="lefteye"></div>
      <div class="righteye"></div>
      <div class="mouth"></div>
    </div>

    <p>
      <strong>The Smiley</strong>: You will need to read up a little bit on <code>border-radius</code> to make the meh face smile on <code>:hover</code>. Also you will need to understand how to use selectors for elements inside of other elements. To make it go a little smooth, you need to add a <code>transition</code>.
    </p>
  </div>


</section>
<section id="advanced_resources">
    <h3>Resources for self-learning and expert groups</h3>
    <p>Now you have covered most of the really basic stuff. Now it’s time to take a deep dive in some CSS field. Here’s a list of good articles and resources.</p>

    <h4>Page layout</h4>
    <p><a href="http://learnlayout.com/">Learn CSS Layout</a> - this site teaches the CSS fundamentals that are used in any website’s layout.</p>

    <h4>Transitions</h4>
    <p><a href="http://leaverou.github.io/animatable/">A nice gallery of transitions by Lea Verou</a></p>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS Transitions</a></p>
    <h4>Animation</h4>
    <p><a href="http://alexberg.in/keyframer">Keyframer by Alex Berg</a>, a tool to produce animation keyframes.</p>

    <h4>Pseudo Classes</h4>
    <p><a href="http://css-tricks.com/pseudo-class-selectors/">Pseudo Class Selectors</a> - good overview of all the relevant pseudo classes that can spice up your site.</p>

    <h4>Better font sizing</h4>
    <p><a href="http://alistapart.com/article/howtosizetextincss/">How to Size Text in CSS</a> - classic article on how to set your font sizes with ems that are relative values instead of px that are fixed.</p>
    <p><a href="http://snook.ca/archives/html_and_css/font-size-with-rem">Font Sizing With REM</a> - can be considered an update on the former link that gives another modern alternative for font sizing. Makes sense to read the former article first.</p>

    <h4>Responsive Web Design</h4>
    <p><a href="http://alistapart.com/article/responsive-web-design">Responsive Web Design</a> - the classic article defining what Responsive Web Design is and how you can adapt your site to any screen size.</p>


    <h4>General Resources</h4>
    <p><a href="http://www.w3.org/TR/html5/">The official HTML5 spec</a> - well, almost. But if they ever make an official specification of what HTML5 is, this is the W3C Candidate Recommendation. Now don’t be scared of what i just wrote. If you really want to know how something is defined, go here and read up.</p>
    <p><a href="http://www.w3.org/standards/techs/css#w3c_all">The official CSS3 stuff</a> - sorry for the sloppy title, but unlike HTML5, CSS3 can’t be defined in just one big document. It consists of a lot of puzzle pieces called modules that each define some specific subset of css properties. Again, don’t be afraid to have a look at this at some point (it’s ok if that point is somewhere in the future), even if it seems overly technical.</p>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla Developer Network CSS Portal</a></p>
    <p><a href="http://devdocs.io/css">Search the CSS reference</a> </p>
    <p><a href="http://devdocs.io/html">Search the HTML reference</a> </p>
</section>