Cascading Style Sheets bring order and beauty to our applications.

CSS layout is totally frustrating. You are likely to find yourself fighting CSS for hours, maybe days, on a layout problem that seems simple at first, but proves to be insanely tricky.


In this course you will take a look at some advanced CSS techniques that will show you how to solve real problems you're likely to encounter in your applications. We will explore some of the lesser know CSS layout features, so even if you've got significant experience with CSS, you will probably learn something new that can help you in your day to day work.


We are assuming that you have a working knowledge of CSS basics, and we will dive right into more advanced CSS layout. These techniques should have you writing more versatile future-proof stylesheets right away!

You can target an element that has no child elements by using the `:empty` pseudo-class. With browser support down to IE9, it's  solid, easy way to select empty elements without any additional markup.

Be aware that whitespace is considered a "child", so `:empty` will not work if the element has no children, but has space between the opening and closing tags.

Target empty elements using the :empty pseudo-class

Learn how to target elements based on their position inside of a parent element in relation to its siblings.

Target Positional Elements Using *-Of-Type CSS pseudo-classes

CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

Create a fixed-fluid-fixed layout using CSS calc()

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

Dynamically Size Elements with Pure CSS 

There are times where you need to reset a an element’s styles. Instead of overwriting it with even more style declarations, you can simply reset them.

Easily Reset Styles With a Single CSS value

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:
- `column-width` operates like `min-width`, not `width`. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
- `column-span` enables a specific element to ignore `column-count` and `column-width`. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the `columns` applied to it. That way, it remains outside of the automatic column flow.
- `column-fill` allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this [browser support chart](http://tympanus.net/codrops/css_reference/column-span/).


Layout Responsive Fluid Columns Using CSS

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new `object-fit` and `object-position` properties allow you to scale images and videos, much like you could with `background-size` and `background-position`.

Learn Advanced CSS Layout Techniques

Damon Bauer

Course Content