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>
        <li><a href="#transforms">Transforms</a></li>
        <li><a href="#moreselectors">More Selectors</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="XbRLVp" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/lukaszklis/pen/XbRLVp/'>XbRLVp</a> by Łukasz Kliś (<a href='http://codepen.io/lukaszklis'>@lukaszklis</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 class="changeonhover">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>

    <h4 id="transforms">Transforms</h4>
    <p>Transforms can be used to manipulate elements. You can take any element and add one or many transforms to it, including <code>translate</code> (moving the element), <code>scale</code> (make it bigger/smaller), <code>skew</code> (distort the element) and many more. All these transforms happen without disturbing the rendering flow. What does that mean? If you have an element that is a 100px square and you add <code>transform: scale(2);</code> to it, it is now scaled up to be a 200px square element, but all other elements around it stay in their positions. If instead you double width and height of your element, that will push other elements away.</p>
    <p>Let’s go through these one by one. <code>translate</code> can be used in two different ways:</p>
    {% highlight CSS %}
.movedownright {
    transform: translate(10px, 20px);
}
.movedownright2 {
    transform: translateX(10px) translateY(20px);
}
    {% endhighlight %}
    <p>Both classes <code>.movedownright</code> and <code>.movedownright2</code> manipulate any element in the same way: move it 10px right and 20px down. Negative values (e.g. -10px) would move it left or up. <code>.movedownright</code> uses a shorthand syntax for translateX and translateY, <code>.movedownright2</code> uses the individual <code>translateX</code> and <code>translateY</code> transforms. Notice how you can add several transforms by just leaving a space between them.</p>
    <p><code>scale</code> can be used to scale elements up or down, where <code>transform: scale(0);</code> means the element is gone, <code>transform: scale(0.5);</code> scales it down to 50% of the original size and <code>transform: scale(2);</code> doubles the size to 200%.</p>

    <p>Using <code>skew</code> or <code>skewX</code> and <code>skewY</code> you can skew your elements by given angles on the x- or y-axis. With <code>rotate</code> you can rotate your elements by a given angle.</p>
    {% highlight CSS %}
.skewme {
    transform: skew(20deg, 30deg);
}
/* .skewme2 does the same as .skewme */
.skewme2 {
    transform: skewX(20deg) skewY(30deg);
}
.rotateme {
    transform: rotate(30deg);
}
    {% endhighlight %}
    <p>Now here is an example of using several transforms at once, but only on <code>:hover</code> when you move the cursor over an element (notice how we are very happy to use transitions again as well):</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="yNbagP" data-default-tab="result" data-user="bastianalbers" class='codepen'>See the Pen <a href='http://codepen.io/bastianalbers/pen/yNbagP/'>Basic transform example</a> by Bastian Albers (<a href='http://codepen.io/bastianalbers'>@bastianalbers</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <p>Note: This example currently doesn't work in Safari. It's because it needs something called vendor prefix, which we haven't included (yet :P). If you want to take a quick journey into vendor-prefix-land read this <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm" target="_blank">CSS Vendor Prefixes</a>. But make sure to come back ;)</p>

    <h4 id="moreselectors">More selectors: nth-child, nth-of-type, sibling</h4>
    <p>There are a few more selectors to select subsets out of many elements. <code>:nth-child</code>, <code>:nth-of-type</code> and the <code>~</code> sibling selector are a few common examples of css selectors that are often very useful.</p>
    <p>The <code>:nth-child</code> is very useful if you have recurring elements with alternating styling. Take an unordered list for example: You want odd rows to be white, even rows to be a bit darker. You can assign different style rules to even list elements without messing with the HTML markup – which is handy when you have to change the styles again later. All you need to do is assign <code>li:nth-child(even) { background-color: #f3f3f3; }</code> to those list elements. Instead of <code>even</code> you could also use <code>2n</code> to select any 2nd element, <code>3n</code> for every third, <code>3n-1</code> for every third but starting with the second and so on.</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="ZGKBYw" data-default-tab="result" data-user="bastianalbers" class='codepen'>See the Pen <a href='http://codepen.io/bastianalbers/pen/ZGKBYw/'>ZGKBYw</a> by Bastian Albers (<a href='http://codepen.io/bastianalbers'>@bastianalbers</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <p>The <code>:nth-of-type</code> works almost like the <code>:nth-child</code>. But <code>nth-child</code> doesn't care about what type the elements are. If you put a <code>div</code> in the middle of the list, <code>nth-child</code> will treat that just like one of the list elements. That is where <code>:nth-of-type</code> is stricter: It only executes the rule on elements of the given selector.</p>
    <p>The <code>~</code> sibling selector selects all elements that are <em>neighbors</em> of a selected element. So if you take the following example, simple rules can add dynamic behavior to your collection of fruits and vegetables:</p>
{% highlight CSS %}
.vegetable-checkbox:checked ~ .vegetable { background-color: #aaf0bb; }
.fruit-checkbox:checked ~ .fruit { background-color: #ffaabb; }
{% endhighlight %}
    <p>While these rules look very complex, they are not so bad when you take them apart. The first selector <code>.vegetable-checkbox</code> looks for anything that has the class "vegetable-checkbox" in the HTML. By adding the <code>:checked</code> that rule only applies if it is a checkbox that is checked. Then the <code>~</code> indicates that another selector follows. This following selector in the end is our target that gets the styles in the rule if there is any element in the neighborhood that is found by the first selector.</p>
    <p data-height="268" data-theme-id="0" data-slug-hash="vOmyGg" data-default-tab="result" data-user="bastianalbers" class='codepen'>See the Pen <a href='http://codepen.io/bastianalbers/pen/vOmyGg/'>vOmyGg</a> by Bastian Albers (<a href='http://codepen.io/bastianalbers'>@bastianalbers</a>) on <a href='http://codepen.io'>CodePen</a>.</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="../images/hoff.jpeg" alt="Hasslehoff" />
    </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>

  <div class="challenge">
    <div class="example laserpointer">
      <div class="laserpointer-topleft"></div>
      <div class="laserpointer-topright"></div>
      <div class="laserpointer-bottomleft"></div>
      <div class="laserpointer-bottomright"></div>
      <div class="laserpointer-point"></div>
    </div>

    <p>
      <strong>Chasing The Laser Pointer</strong>: You are the cat, chasing the laser pointer with your cursor. You will need to know about <code>:hover</code>, the <code>~ sibling selector</code> and <code>transition</code>. Also, some <code>position</code> knowledge. Moving things can be done in several ways, you should check out <code>transform: translate</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>Layout</h4>

    <p>
      At this point, you have a solid understanding of how to color, size and even transform the elements on your web page. However, you probably would like to position these elements next to each other? And get in control of where excactly they are laid out on the page? Luckily, CSS offers a variety of approaches to control the layout of elements on your page.
    </p>
    <ul>
      <li><a href="http://learnlayout.com/">learnlayout.com</a> – The topic of layout is incredibly fun, but also takes more room to explain than this workshop can cover. If you are ready to dive into it and explore how to layout with CSS, we highly recommend this tutorial. It also comes in various languages!
    </li>
    <li>
      <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a> from CSS-Tricks – You have already mastered the basics of CSS layout? You understand floats, position, and even looked into responsive web design? Once you are done with all that, you should check out a more recent, but already well-supported way to build complex yet flexible layouts: Flexbox.
    </li>
    <li><a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">A Visual Guide to CSS3 Flexbox Properties</a> – Another great resource to explore and and understand how to work with Flexbox.
    </li>
    <li>
      <a href="http://gridbyexample.com/">Grid by Example</a> – If you are even more adventurous and want to check out the latest and still experimental way to layout in CSS, spend some time to explore the CSS Grid Layout Module. We recommend this excellent resource by Rachel Andrew’s.
    </li>

    </ul>

    <h4>Transitions</h4>
    <ul>
        <li><a href="http://leaverou.github.io/animatable/">A gallery of transitions by Lea Verou</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS Transitions</a></li>
    </ul>

    <h4>Transforms</h4>
      <ul>
        <li><a href="http://www.westciv.com/tools/transforms/index.html">Transform live playground</a> – a nice way to try out the most common transform functions.</li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">MDN: transform</a> – explains the most common transform functions and the syntax.</li>
      </ul>


    <h4>Animation</h4>
      <ul>
        <li><a href="http://alexberg.in/keyframer">Keyframer by Alex Berg</a> – a tool to produce animation keyframes.</li>
        <li><a href="https://vimeo.com/125335964">Putting Your UI in Motion with CSS</a> by Val Head — An Event Apart Video.</li>
      </ul>
    
    <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>Typography</h4>
    <ul>
        <li><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.</li>
        <li><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.</li>
        <li><a href="http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/">Size Matters: Balancing Line Length And Font Size In Responsive Web Design</a></li>
    </ul>

    <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>Architecture</h4>
    <ul>
      <li><a href="http://cssguidelin.es/">cssguidelin.es</a> – High-level advice and guidelines for writing sane, manageable, scalable CSS</li>
      <li><a href="http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048">The 30 CSS Selectors you Must Memorize</a></li>
      <li><a href="http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left">Why do browsers match CSS selectors from right to left</a></li>
    </ul>

    <h4>General Resources</h4>
    <p><a href="http://www.w3.org/TR/html5/">The official HTML5 Specification</a> - Well, almost. But if they ever make an official specification of what HTML5 is, this is the W3C Candidate Recommendation. 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> - Unlike HTML5, CSS3 is not defined in one big specification. It consists of a lot of puzzle pieces called modules that each define a 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 at first.</p>
    <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla Developer Network CSS Portal</a></p>
    <ul>
        <li><a href="http://caniuse.com/">caniuse</a> – Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.</li>
        <li><a href="http://devdocs.io/css">Search the CSS reference</a></li>
        <li><a href="http://devdocs.io/html">Search the HTML reference</a></li>
    </ul>

</section>