Learning Materials

These are the learning materials for 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 if 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 experiment with.

The Basics

How to create a file called index.html

Now it’s 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.

Image of Sublime Texts file menu - New file selected.

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.

Image of Sublime Text with open file - Text: Hello World!.

Now type "Hello World!" or any other sentence.

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.

OS X Save as file dialog window.

Now click File -> Save as…

How to open index.html in your browser

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!

Edit, Save and Refresh workflow

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 real website.

Basic HTML & HTML boilerplate

Elements and Tags

Elements and Tags are the building blocks of HTML.

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.

A Tag is the thing that indicates an element’s purpose. For example, the <p> tag indicates a paragraph of text is in that element, and the <li> 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>This is a paragraph.</p>

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

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.

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

<p>This is a sentence, with an <em>em</em> element ("emphasize") inside of it.</p>

or this:

<div id="main-container">
  <h1>The h1 tag indicates the primary header of the document.</h1>
  <p>Some text.</p>
</div>

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.

Pageflow

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.

Screenshot of the CSSclasses GitHub page with elements highlighted with black borders.

Every element on the page highlighted.

In our example, each of these boxes are one of two different types: inline boxes or block boxes. So what exactly does this mean? Let’s start with block boxes.

Block boxes are stacked vertically one after the other in the 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.

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.

See the Pen CSSclasses Block Boxes by CSSclasses (@CSSclasses) on CodePen.

Inline Boxes work a bit differently. These boxes will also start at the upper left corner, but will arrange themselves horizontally.

Here’s an example of that as well.

See the Pen CSSclasses inline box by CSSclasses (@CSSclasses) on CodePen.

So HTML elements are by default either block boxes or inline boxes (of course, there are exceptions to this rule, but we don’t have to worry about that for now). For example, div is a block element, and so are headings like h1 or h2. span or strong on the other hand are inline elements. Here are lists for the different elements:

For now just keep in mind, that every box has some sort of display value.

HTML Boilerplate

There is some basic structure you don’t need to spend too much time on that is always there. Let’s handle this in a very quick walkthrough (code, line-by-line comments):

<!DOCTYPE html>
<!--This is a doctype. Every HTML file should have one.
Basically you only need this one nowadays, as this means HTML5 (what you're learning here)
for modern browsers but old browsers still pick up that your file is some kind of HTML.-->
<html>
<!-- Here the HTML starts, so we put an opening <html> tag here. -->
  <head>
<!-- Inside the <head> we can put some meta information… -->
    <meta charset="UTF-8">
    <title>Our Page Title</title>
<!-- … like charset and title. -->
  </head>
<!-- And we close our <head> element and open the <body>, where the actual content goes. -->
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
<!-- And in the end we close the <body> and <html> tag. -->

And there we are, this is our first valid HTML file! Here it is again, so you can neatly copy&paste it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Our Page Title</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <!-- put all the content here! -->
  </body>
</html>

Are you looking for a place to put your CSS? Don’t rush, we will come to that. At the moment, we are looking at HTML only. If you know what you are doing, you can skip over to the CSS part.

(Practical) Elements

Headings (h1-h6)

There is a hierarchy of heading elements that you can use for headlines. They start with h1 and end with h6.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Paragraph

This is the perfect tag if you want to markup text. Even this text is wrapped in a p.

<p>Some text</p>

Strong, em, break

These are some inline Elements that you can nest inside a paragraph. Strong and emphasis give some meaning to pieces of text, while break forces a linebreak.

<strong>Strong</strong> and <em>emphasis</em>,
<br>break

Images

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 for some reason the image does not load.

<img src="https://placehold.it/664x442" alt="placeholder image">

placeholder image

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.

<a href="http://cssconf.eu" title="CSSconf EU">CSSconfEU</a>

Div

The div element is an element that does not have any special meaning or special styling. It’s perfect for grouping other elements together and assigning them a class or an id.

<div>I do nothing special</div>

CSS

CSS - what is that?

CSS is used to style your HTML elements. You can manipulate the colors, margins, positions and many other properties 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 Cascading Style Sheet.

Start with inline styles

To get you started, you can just insert a style tag inside of your `head tag:

<head>
  <meta charset="UTF-8">
  <title>Our Page Title</title>
  <style>
    /* CSS styling rules here. Yes, comments are different in CSS. It’s not our fault! */
  </style>
</head>

Basic CSS syntax

CSS has a simple syntax. The file consists of a list of rules. Each rule consists of one or more selectors 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:

h1 {
  color: red;
}

h1 is the selector, the HTML element we want to style. color is one of the properties that we can give to our selector, and red is the value of this property. The right syntax is:

selector {
  property: value; /* remember always to write a ; after your value. */
  property: value;
}

Refresh your browser (CMD + R) and see how the color of your title has changed. Wow, so red! Isn’t this nice?

Useful CSS properties

Now, let us insert a div and style it a little bit. So parts of your file should look like this:

<head>
<!-- ... -->
  <style>
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>

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 color. There is also `background-color, width and height.

Shorthand

On some occasions you might see properties defined in different ways but doing the same thing, such as:

selector {
  border-width: 1px;
  border-style: dotted;
  border-color: green;
}

anotherselector {
  border: 1px dotted green;
}

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 reference, 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.

Font-family

The font-family 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.

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.

body {
  font-family: Proxima-Nova, Helvetica, sans-serif;
}

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.

Here a few examples how it’s done right:

body {
  font-family: Times, "Times New Roman", Georgia, serif;
}

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

p {
  font-family: cursive;
}

Keep going with our example let’s add a font-family to the div we’ve created before.

<head>
<!-- ... -->
  <style>
    div {
      color: white;
      background-color: green;
      width: 300px;
      height: 200px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div>I’m a div</div>
</body>

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?

Font-Size

The font-size 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 really revisit this topic later). We will assign fixed pixel values to our elements:

<head>
<!-- ... -->
  <style>
    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>

First you can see we set the font-size for everything inside of the html element to a small 10px (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 h1 has a value of 32px assigned, so the browser shows us a big heading while the div has the small text size without having any font-size property declared.

Border

You can also put a nice border around your elements. Try this:

<head>
<!-- ... -->
  <style>
    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>

Now you assigned your div to have a black border that is 5px thick and solid. Let’s `dissect the border property a little bit with a different border and a generic description:

border: 20px dashed #ff88aa;
border: <line-width> || <line-style> || <color>;

Here you see an even thicker border that is not solid and has a different color, but is also dashed instead of `solid. 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 CSS spec (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.

The Box Model

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.

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

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.

See the Pen CSSclasses Box Model by CSSclasses (@CSSclasses) on CodePen.

And here you can see how these different properties compose a box:

A visualization of the box model.

A visualization of the box model.

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.

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: box-sizing: border-box;.

See the Pen CSSclasses Box Sizing by CSSclasses (@CSSclasses) on CodePen.

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.

Hover

Hover is a small example of how you can add some fun little interactivity to your site. Take our div example from above and let’s add a little bit to our 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;
}

If you apply this CSS to our border example, you will see no change at first. But if you move your mouse cursor over the div (you “hover” it), you will see the style changes applied, that we defined with the div:hover pseudo-class. There are some more pseudo-classes like that that you can learn about later.

Class Selector

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 divs on your page.

<head>
<!-- ... -->
  <style>
    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! 😞</div>
</body>

Copy this code example into your html file, and check out what it looks like in the browser. Now let’s say the second div should be blue. We can achieve that by assigning classes to the `divs in our HTML. We can then apply styles to each class in our CSS:

<head>
<!-- ... -->
  <style>
    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! 😀</div>
</body>

Now here you should note several things. Both divs get the styles of the div rule, as this applies to all divs. Then the first div also gets the styles of the class .greenthing. In HTML the classes get assigned by writing a class attribute inside of the opening tag of the element. The second div 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: .border-dotted. This class is remarkable as it overrides the border style that was defined in the `div selector.

Cascade and Inheritance

As the name Cascading Style Sheets suggests, CSS specifies the styles for a document in a cascading manner. But what exactly does cascading mean?

First it is important to understand that most elements in a document are subject to more than one style declaration. Sometimes these declarations are conflicting. If one declaration says an element should be red and another one says it should be green, the browser can only apply one of them.

The set of rules that determines which of these conflicting declarations to apply is called the cascade.

The User Agent Stylesheet

Every stylesheet that you, the author, add to a website, is called an author stylesheet.

Every browser, or user agent, also has its own user agent stylesheet. It makes sure that every document always has some sensible default styling, even without you writing a single line of CSS.

Thanks to the user agent stylesheet, all headlines have a bigger font size, and every link is blue and underlined. While these defaults are very useful, the rules of the cascade make sure that you can always overwrite them in your own author stylesheets.

If the user agent stylesheet says all links should be blue, but your author stylesheet says all links should be red, all links will be red.

Overwriting your own styles

The cascade is also important for when you want to overwrite your own styles. But why would you want to overwrite your own styles?

Imagine you are styling a document with some paragraphs. All these paragraphs should have green text, but one of them contains a warning, and should therefore be red.

Here is one way to do this:

<head>
  <style>
    p {
      color: green;
    }
    .warning {
      color: red;
    }
  </style>
</head>
<body>
  <p>I am a normal green paragraph of text.</p>
  <p>I am another normal green paragraph of text.</p>
  <p class="warning">Warning! I am a red paragraph of text!</p>
</body>

In this example, the first rule specifies that all paragraphs have green text. The second rule overwrites the first rule wherever class="warning" is applied.

This is a good example why you would want to overwrite your own styles: Apply generic default styles for all elements first, then overwrite some of them to create exceptions.

If you think that is all very complicated, you are not wrong. Thankfully, computers are much better at figuring these things out than humans.

Developer Tools to the rescue

Developer tools are our best friends when building websites. They can give us a lot of feedback about the elements on a web page.

One great developer tool is inspect element.

The basic idea behind inspect element is that you can click any element on a page and your browser will tell you a lot of useful things about it. For example which styles are assigned to the element.

Inspect element or something similar is available in all modern browsers. In Chrome and Firefox you just need to right click on the page and select Inspect Element from the context menu. If you are using Safari you first need to enable developer tools in the browser. If you are using Edge, inspect element is called DOM Inspector. You also need to enable it first in the f12 Developer Tools menu.

You can read more about how to use developer tools in your browser using the following links:

Here is an animated gif of what inspect element looks like in Google Chrome:

Animated gif of inspecting an element in Google Chrome

The element inspector in Google Chrome Developer Tools

Image of the styles panel in Google Chrome Developer Tools

The styles panel shows you what styles are applied to an element and where to find them.

It also indicates overwritten styles as striked out

Parents, Children, Siblings, Inheritance

When we talk about an HTML document, we often describe it as a family tree. When an element stands between the opening tag and the closing tag of another element, it is wrapped inside another element. Elements that are wrapped inside another element are also called children. The tree of elements in a document is also called the DOM, and the elements in the tree are called DOM nodes.

Consider the following document:

<html>
  <body>
    <main>
      <h2>Web Browsers</h2>
      <p>Firefox is Mozilla's web browser.</p>
      <p>Chrome is Google's web browser.</p>
      <p>Safari is Apple's web browser.</p>
      <p>Edge is Microsoft's web browser.</p>
    </main>
    <footer>
      <h3>Learn more</h3>
      <p>Read the Wikipedia article about web browsers</p>
    </footer>
  </body>
</html>

For this document, the following statements are true:

  • h2 is a child of main
  • footer is a child of body
  • h2 is a sibling of p
  • h2 has four siblings
  • main is a parent of h2
  • main has five children
  • h2 and main are descendants of body
  • html and body are ancestors of p
  • main and footer are wrapped inside a body-element
  • The html-element is wrapped around the body-element

One way we can make use of these relationships in our CSS is through inheritance. Inheritance means that some CSS properties, like text color or font size, get passed down, or inherited from parent to children and further descendants. So if we want all the text in our document to be green, instead of styling every single element we can add the following CSS:

body {
  color: green;
}

All visible elements in an HTML document are descendants of the body element. Therefore the color green now applies to every element on the page, as long as the element doesn’t have its own color property value.

Now let’s make this document a bit more interesting:

<html>
  <head>
    <style>
      body {
        color: green;
      }
      footer {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>Web Browsers</h2>
      <p><a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> is Mozilla's web browser.</p>
      <p><a href="https://www.google.com/chrome/">Chrome</a> is Google's web browser.</p>
      <p><a href="http://www.apple.com/lae/safari/">Safari</a> is Apple's web browser.</p>
      <p><a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a> is Microsoft's web browser.</p>
    </main>
    <footer>
      <h3>Learn more</h3>
      <p>Read the <a href="https://en.wikipedia.org/wiki/Web_browser">Wikipedia article about web browsers</a></p>
    </footer>
  </body>
</html>

In this document, all elements without a specified text color will inherit the green text color from the body-element. The footer has its own white text color that overwrites the green text color from the body-element. It also has a green background color.

You will notice that the a-elements don’t inherit the text color of their ancestors. That is because the a-element has its own blue text color specified in the user agent style sheet.

Unfortunately, blue on green is not very readable. It might be a good idea to change the link color for the footer by adding the following CSS:

footer a {
  color: white;
  text-decoration: underline;
}

You might wonder why there is an empty space between footer and a in the footer a selector. This empty space is called descendant combinator. The descendant combinator lets you select elements that are descendants of another element.

This becomes a bit clearer when you read the selectors from right to left. footer a will select every a element, that is a descendant of a footer-element. You can also combine more selectors. For example footer h2 a would select every link inside of a level two headline that is inside of a footer.

Knowing this we can make sure that all our links inside the footer have a white text color. We also want to make sure that they are underlined with text-decoration: underline;. This way people can still recognize that they are links, not just regular text.

The inherit keyword

This is all well and good, but what if we decide to change the text color in our footer from white to yellow? In our example we would have to change the color values for footer and footer a to yellow to achieve this. Ugh, so much work!

Thankfully, there is the inherit keyword.

The inherit keyword forces some attributes, like color, to be inherited from the parent element. So in our example we could give our footer a the property value color: inherit;. This way the links inside our footer are always the same color as the text in our footer.

There is also the newer currentcolor keyword. currentcolor always represents the text color of a certain element. If you want to change another attribute than color to that same element’s text color, you could do that with a declaration like border-color: currentcolor.

Specificity

Specificity means that a rule that is more specific overpowers a rule that is less specific. For example selecting every link inside a footer element with footer a is more specific than selecting every link element everywhere with a.

Some selectors are more specific by default. For example a class selector will always have a higher specificity than an element selector. This makes sense, because selecting only elements with a certain class attribute is more specific than selecting every element of a type.

<html>
  <head>
    <style>
      a {
        color: blue;
      }
      body a {
        color: green;
      }
      .danger-link {
        color: red;
      }
    </style>
  </head>
  <body>
    <a class="danger-link" href="danger.html">I am a very dangerous link, do not click me!</a>
  </body>
</html>

In this example the link will end up red. The first rule for a will be overwritten by the more specific rule body a.

The class selector .danger-link is even more specific, therefore it overwrites them both.

It is important to keep in mind that in the cascade specificity beats the order of rules in your stylesheet. If a rule is followed by another rule with the same specificity, the second rule overwrites the first. If the first rule has a higher specificity, the first rule still overwrites any less specific rules that come after it.

<html>
  <head>
    <style>
      body p {
        color: green;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>I am a green paragraph of text because "body p" is more specific than "p"</p>
  </body>
</html>

Most of the time you don’t need to think about specificity too much, but sometimes high specificity can cause bugs or unexpected behavior. You can prevent this by avoiding overly specific selectors, like .site-header nav ul li a. If you want to read more about this, the Mozilla Developer Network has a more detailed article on specificity.

More selectors: nth-child, nth-of-type, sibling

There are a few more selectors to select subsets out of many elements. :nth-child, :nth-of-type and the ~ sibling selector are a few common examples of css selectors that are often very useful.

The :nth-child 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 li:nth-child(even) { background-color: #f3f3f3; } to those list elements. Instead of even you could also use 2n to select any 2nd element, 3n for every third, 3n-1 for every third but starting with the second and so on.

See the Pen CSSclasses nth-child by CSSclasses (@CSSclasses) on CodePen.

The :nth-of-type works almost like the :nth-child. But :nth-child doesn’t care about what type the elements are. If you put a div in the middle of the list, :nth-child will treat that just like one of the list elements. That is where :nth-of-type is stricter: It only executes the rule on elements of the given selector.

The ~ sibling selector selects all elements that are neighbors of a selected element. So if you take the following example, simple rules can add dynamic behavior to your collection of fruits and vegetables:

.vegetable-checkbox:checked ~ .vegetable { background-color: #aaf0bb; }

.fruit-checkbox:checked ~ .fruit { background-color: #ffaabb; }

While these rules look very complex, they are not so bad when you take them apart. The first selector .vegetable-checkbox looks for anything that has the class “vegetable-checkbox” in the HTML. By adding the :checked that rule only applies if it is a checkbox that is checked. Then the ~ 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.

See the Pen CSSclasses :checked by CSSclasses (@CSSclasses) on CodePen.

Transition

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 :hover and add the transition property to the mix:

<head>
<!-- ... -->
  <style>
    .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>

Notice how you did not need to define an animation but still the browser animates between the two states? All we did is insert transition: 1s all; which is the transition shorthand with just the first two values that are a transition-duration of 1 second and the transition-property of all 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:

See the Pen CSSclasses :hover by CSSclasses (@CSSclasses) on CodePen.

Notice how we used a very complicated transition shorthand here:

transition: 1s width 0.2s ease-out, 2s background-color, 0.5s height 0.5s;

Let’s break it down: 1s width 0.2s ease-out are the values that define the transition just for the width. The shorthand syntax is:

transition: transition-duration transition-property transition-delay transition-timing-function;

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 all 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.

Transform

Transforms can be used to manipulate elements. You can take any element and add one or many transforms to it, including translate (moving the element), scale (make it bigger/smaller), skew (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 transform: scale(2); 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.

Let’s go through these one by one. translate can be used in two different ways:

.movedownright {
  transform: translate(10px, 20px);
}
.movedownright2 {
  transform: translateX(10px) translateY(20px);
}

Both classes .movedownright and .movedownright2 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. .movedownright uses a shorthand syntax for translateX and translateY, .movedownright2 uses the individual translateX and translateY transforms. Notice how you can add several transforms by just leaving a space between them.

scale can be used to scale elements up or down, where transform: scale(0); means the element is gone, transform: scale(0.5); scales it down to 50% of the original size and transform: scale(2); doubles the size to 200%.

Using skew or skewX and skewY you can skew your elements by given angles on the x- or y-axis. With rotate you can rotate your elements by a given angle.

.skewme {
  transform: skew(20deg, 30deg);
}

/* .skewme2 does the same as .skewme */
.skewme2 {
  transform: skewX(20deg) skewY(30deg);
}

.rotateme {
  transform: rotate(30deg);
}

Now here is an example of using several transforms at once, but only on :hover when you move the cursor over an element (notice how we are very happy to use transitions again as well):

See the Pen jPJNNo by Kevin Lorenz (@verpixelt) on CodePen.

Challenges: Start experimenting!

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!

  • The dotted circle: You already know how to apply these borders to a box, right? Now make it a circle! Hint: Look up the border-radius property!
    (Visual example — Try not to look at the code)
  • The fancy link: border-radius, background-color, padding, :hover … you know most of the things to create a nice looking link like this!
    (Visual example — Try not to look at the code)
  • The Polaroid: You know how to add an <img>, you know how to apply padding. If now you can figure out how box-shadow` works, creating a Polaroid effect like this will be a piece of cake for you!
    (Visual example — Try not to look at the code)
  • The Little Galaxy: transform, animation, @keyframes — All the new things!
    (Visual example — Try not to look at the code)
  • The Smiley: You will need to read up a little bit on border-radius to make the meh face smile on :hover. 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 transition.
    (Visual example — Try not to look at the code)
  • Chasing The Laser Pointer: You are the cat, chasing the laser pointer with your cursor. You will need to know about :hover, the ~ sibling selector and transition. Also, some position knowledge. Moving things can be done in several ways, you should check out transform: translate.
    (Visual example — Try not to look at the code)

Resources

You have covered most of the really basic stuff, now it’s time to take a deep dive into some CSS topics. Here’s a list of good articles and resources.

Layout

At this point, you have a solid understanding of how to color, size and even transform the elements on your web page. However, you would probably like to position these elements next to each other? And get in control of where exactly they are laid out on the page? Luckily, CSS offers a variety of approaches to control the layout of elements on your page.

  • learnlayout.com – 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!
  • A Complete Guide to Flexbox 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.
  • A Visual Guide to CSS3 Flexbox Properties – Another great resource to explore and and understand how to work with Flexbox.
  • Flexbox.io by Wes Bos
  • Grid by Example – 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.

Transition

Transform

Animation

Pseudo Classes

Typography

Responsive Web Design

  • Responsive Web Design - The classic article defining what Responsive Web Design is and how you can adapt your site to any screen size.

Architecture

General Resources

  • CSS Reference - Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
  • MarkSheet - MarkSheet is a free HTML & CSS tutorial covering
    everything from explaining what a web browser is to how to make your website responsive. It is split up in different sections and chapters so you can easily skip on topics you are already familiar with.
  • The official HTML5 Specification - 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.
  • The official CSS3 stuff - 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.
  • Mozilla Developer Network CSS Portal
  • caniuse – Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • Search the CSS reference
  • Search the HTML reference

Had a great day with you all @CSSclasses! Thank you for that <3

@kiida

So many nice ppl to ask questions! A nice atmosphere.

@nynnest

Thanks so much @CSSclasses for organizing the workshop today, I had a great time!

@ninasieverding