CSS

Cascading Style Sheets bring order and beauty to our applications.

COURSES 5

WATCH Garth Braithwaite's COURSE

Flexbox Fundamentals

Flexbox Fundamentals

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, j...

8 lessons

WATCH Damon Bauer's COURSE

Learn Advanced CSS Layout Techniques

Learn Advanced CSS Layout Techniques

CSS layout is totally frustrating. You are likely to find yourself fighting CSS for hours, maybe days, on a layout problem that...

7 lessons

WATCH Rory Smith's COURSE

Build Complex Layouts with CSS Grid Layout

Build Complex Layouts with CSS Grid Layout

In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browse...

15 lessons

WATCH Ari Picker's COURSE

Learn the Best and Most Useful SCSS

Learn the Best and Most Useful SCSS

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to writ...

10 lessons

WATCH Garth Braithwaite's COURSE

Style an Application from Start to Finish

Style an Application from Start to Finish

Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course dem...

9 lessons

Design for Mobile First with Tachyons

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for de...

John Lindquist
2:43

Build Responsive CSS Layouts with Tachyons

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the s...

John Lindquist
2:47

Create a tab component using vanilla CSS

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript! note: This approach has some accessibility issues. To make a tab component that is properly accessible, it re...

Alyssa Nicoll
3:09

Conditionally Apply Styles Using Feature Queries

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature ...

Damon Bauer
3:00

Manipulate Images Using CSS Filter and Blend Modes

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of ti...

Damon Bauer
2:24

Reuse Flexbox Styles With A Sass Mixin

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the...

Alyssa Nicoll
4:54

Use Generated Content to Augment Information

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

Greg Thoman
0:43

Use CSS Counters to Create Pure CSS Dynamic Lists

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the co...

Greg Thoman
1:19

Create CSS Selectors in Chrome DevTools from Selection

Chrome dev tools allow you to generate css selectors based on you your mouse selection. This lesson shows you how to leverage the dev tools to generate css selectors and then revise them to match y...

John Lindquist
1:32

Targeting Elements with CSS Attribute Selectors

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to ident...

Joe Maddalone
5:00

Using CSS Combinators to Identify Siblings and Descendants in CSS

CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.

Joe Maddalone
4:37

CSS :target Selector

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

Joe Maddalone
1:52

FEATURED CSS PLAYLISTS

Browse all CSS lessons.

showing All 75 lessons...

Design for Mobile First with Tachyons

Inform the User of Interactions with CSS Transitions

Use Media Queries to Make an Existing Application Responsive

Draw Simple Icons with CSS

Reduce Ambiguity in Class Names using a Naming Convention

Understand Semantic Markup in relation to CSS

Style a Form with Plain CSS

Use CSS to Inform Users of Interactivity

Keep Styles Portable and Maintainable with Basic Classes

Prep HTML for Styling with Flat Class Names

Write Custom Functions with the SCSS @function Directive

Write similar classes with the SCSS @for Control Directive

Organize SCSS into Multiple Files with Partials

Reuse Styles with the SCSS @extend Directive

Use Standard Built-in SCSS Functions for Common Operations:

Reuse Styles with the SCSS @mixin Directive

Organize Styles with SCSS Nesting and the Parent Selector

Use SCSS Variables for Readable and Maintainable Stylesheets

Transpile SCSS to CSS using node-sass

Build Responsive CSS Layouts with Tachyons

Re-order the appearance of grid items using the order property

P

Specify many grid properties at once with the grid shorthand

P

Specify grid columns, rows, and areas at once with the grid-template shorthand

P

Specify the sizes of implicitly created grid tracks

P

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

P

Nest a grid within a grid

P

Describe a grid layout using grid-template-areas

P

Change the auto-placement behaviour of grid items with grid-auto-flow

P

Use the repeat function to efficiently write grid-template values

P

Use the minmax function to specify dynamically-sized tracks

P

Refer to fractions of available space with the fr unit

P

Place grid items on a grid using grid-column and grid-row

P

Specify a grid gutter size with grid-gap

P

Loop Over Data with the SCSS @each Control Directive

Style an SVG Icon with CSS

P

Automate SVG Sprite Background Image Variations with a SCSS Mixin

P

Get up and running with CSS Grid Layout

P

Describe a grid layout using named grid lines

P

Create a tab component using vanilla CSS

Easily Reset Styles With a Single CSS value

Conditionally Apply Styles Using Feature Queries

Dynamically Size Elements with Pure CSS

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

Creating visual skip links in HTML and CSS

Manipulate Images Using CSS Filter and Blend Modes

Reuse Flexbox Styles With A Sass Mixin

Use Generated Content to Augment Information

Control Image Aspect Ratio Using CSS

Use CSS Counters to Create Pure CSS Dynamic Lists

Target empty elements using the :empty pseudo-class

css tutorial about Design for Mobile First with Tachyons

Design for Mobile First with Tachyons

2:43 css

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

css tutorial about Inform the User of Interactions with CSS Transitions

Inform the User of Interactions with CSS Transitions

3:33 css

Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.

css tutorial about Use Media Queries to Make an Existing Application Responsive

Use Media Queries to Make an Existing Application Responsive

4:17 css

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

css tutorial about Draw Simple Icons with CSS

Draw Simple Icons with CSS

3:12 css

Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

css tutorial about Reduce Ambiguity in Class Names using a Naming Convention

Reduce Ambiguity in Class Names using a Naming Convention

5:54 css

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.

css tutorial about Understand Semantic Markup in relation to CSS

Understand Semantic Markup in relation to CSS

3:43 css

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a variation of the BEM (Block Element Model) naming convention for CSS class names.

css tutorial about Style a Form with Plain CSS

Style a Form with Plain CSS

5:57 css

Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.

css tutorial about Use CSS to Inform Users of Interactivity

Use CSS to Inform Users of Interactivity

4:34 css

There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.

css tutorial about Keep Styles Portable and Maintainable with Basic Classes

Keep Styles Portable and Maintainable with Basic Classes

3:28 css

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

css tutorial about Prep HTML for Styling with Flat Class Names

Prep HTML for Styling with Flat Class Names

6:35 css

In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the html and body elements that sets the foundation for the rest of the application styles.

css tutorial about Write Custom Functions with the SCSS @function Directive

Write Custom Functions with the SCSS @function Directive

5:14 css

Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS provides a ton of great features, but sometimes we need to roll our own function. We can do that too! They’re useful when the desired functionality isn’t available from the built in SCSS functions and a mixin just won’t do. In this lesson, we learn how and when to use SCSS function directives.

css tutorial about Write similar classes with the SCSS @for Control Directive

Write similar classes with the SCSS @for Control Directive

5:10 css

Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.

css tutorial about Organize SCSS into Multiple Files with Partials

Organize SCSS into Multiple Files with Partials

3:22 css

Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there's only one request.

css tutorial about Reuse Styles with the SCSS @extend Directive

Reuse Styles with the SCSS @extend Directive

5:48 css

We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
Extends:
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.

Mixins:
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.

In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.

css tutorial about Use Standard Built-in SCSS Functions for Common Operations:

Use Standard Built-in SCSS Functions for Common Operations:

3:51 css

We can use javascript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code. Be sure to checkout all the SCSS functions: http://sass-lang.com/documentation/Sass/Script/Functions.html

css tutorial about Reuse Styles with the SCSS @mixin Directive

Reuse Styles with the SCSS @mixin Directive

5:24 css

Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.

Mixins have some nice features:
- Arguments just like functions.
- Arguments can have default values and optional values.
- Named arguments allow us to use optional and default arguments when the mixin is included.
- Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
- The @content directive allow us to add additional styles when the mixin is included.

In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.

css tutorial about Organize Styles with SCSS Nesting and the Parent Selector

Organize Styles with SCSS Nesting and the Parent Selector

3:06 css

SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions. In this lesson we learn how to remove the redundancy of targeting pseudo-elements/classes, and child elements by taking advantage of SCSS’s nesting and parent selectors.

css tutorial about Use SCSS Variables for Readable and Maintainable Stylesheets

Use SCSS Variables for Readable and Maintainable Stylesheets

2:00 css

Updating the same color or metric multiple times is no fun. SCSS variables improve maintainability by allowing one name to represent a value that can be used anywhere. SCSS variables also give us the power of creating our own naming conventions to express the intent of specific values. In this lesson we learn how to use SCSS variables to assign user friendly names to colors/metrics so one value change will update that value in all the right places.

css tutorial about Transpile SCSS to CSS using node-sass

Transpile SCSS to CSS using node-sass

0:45 css

In this lesson we learn how to set up SCSS and transpile your SCSS code into CSS with node-sass.

css tutorial about Build Responsive CSS Layouts with Tachyons

Build Responsive CSS Layouts with Tachyons

2:47 css

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the flex-column and flex-row classes to respond to mobile and desktop sizes.

css tutorial about Re-order the appearance of grid items using the order property

Re-order the appearance of grid items using the order property

2:05 css PRO

As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.

css tutorial about Specify many grid properties at once with the grid shorthand

Specify many grid properties at once with the grid shorthand

4:09 css PRO

Using the grid shorthand property, we can set all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

css tutorial about Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify grid columns, rows, and areas at once with the grid-template shorthand

3:33 css PRO

We can specify grid columns, rows, and areas in one property using the grid-template shorthand.

css tutorial about Specify the sizes of implicitly created grid tracks

Specify the sizes of implicitly created grid tracks

2:22 css PRO

What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

css tutorial about Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

2:10 css PRO

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill and auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.

css tutorial about Nest a grid within a grid

Nest a grid within a grid

1:56 css PRO

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

css tutorial about Describe a grid layout using grid-template-areas

Describe a grid layout using grid-template-areas

4:40 css PRO

We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

css tutorial about Change the auto-placement behaviour of grid items with grid-auto-flow

Change the auto-placement behaviour of grid items with grid-auto-flow

2:39 css PRO

We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the dense keyword. How do we approach this using grid-auto-flow?

css tutorial about Use the repeat function to efficiently write grid-template values

Use the repeat function to efficiently write grid-template values

3:14 css PRO

We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

css tutorial about Use the minmax function to specify dynamically-sized tracks

Use the minmax function to specify dynamically-sized tracks

2:21 css PRO

Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.

css tutorial about Refer to fractions of available space with the fr unit

Refer to fractions of available space with the fr unit

1:54 css PRO

There’s an unfamiliar fr unit pertinent to CSS Grid, which allows us to specify a fractional unit of space. Let’s see how to apply it.

css tutorial about Place grid items on a grid using grid-column and grid-row

Place grid items on a grid using grid-column and grid-row

3:13 css PRO

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.

css tutorial about Specify a grid gutter size with grid-gap

Specify a grid gutter size with grid-gap

1:13 css PRO

It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

css tutorial about Loop Over Data with the SCSS @each Control Directive

Loop Over Data with the SCSS @each Control Directive

5:06 css

The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive! In this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.

css tutorial about Style an SVG Icon with CSS

Style an SVG Icon with CSS

3:17 css PRO

In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.

When implementing SVG icons with the use tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a use tag, such as a path, you can target it at the global CSS level, like so:

path#rain {
/* styles */
}

Instead of:

.Icon--umbrella path#rain {
  /* styles */
}
css tutorial about Automate SVG Sprite Background Image Variations with a SCSS Mixin

Automate SVG Sprite Background Image Variations with a SCSS Mixin

4:12 css PRO

n this lesson, you’ll learn how to write a SCSS mixin to generate styles for variations of background-images. We’ll look at using SCSS lists to interpolate dynamic class names and property attributes and output icons at different sizes.

If you need the ability to add or edit icons on a regular basis, having a SCSS mixin do the heavy lifting of calculating background-position, background-size and creating selectors will save you lots of time and manual work.

Note: this lesson assumes you have an understanding of SCSS, mixins and already have a process to compile SCSS.

css tutorial about Get up and running with CSS Grid Layout

Get up and running with CSS Grid Layout

2:15 css PRO

We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.

CSS Grid Layout will not work unless upgrading
The Grid Layout is a new feature in CSS coming in Firefox 52 and Chrome 57.

Another option to enable the Grid Layout is to enable the Experimental Web Platform features flag in chrome://.

css tutorial about Describe a grid layout using named grid lines

Describe a grid layout using named grid lines

4:45 css PRO

We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to refer to these from our grid items.

css tutorial about Create a tab component using vanilla CSS

Create a tab component using vanilla CSS

3:09 css

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript!

note: This approach has some accessibility issues. To make a tab component that is properly accessible, it requires some JavaScript.

css tutorial about Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 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.

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript.

css tutorial about Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57 css

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

css tutorial about Target Positional Elements Using *-Of-Type CSS pseudo-classes

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

2:43 css

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

css tutorial about Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css

Skip links are an extremely helpful navigation pattern for keyboard and screen reader users, since they let you skip past sections of content. Learn how to create skip links in HTML and CSS that show on focus, and you'll benefit all users!

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

css tutorial about Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54 css

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

css tutorial about Use Generated Content to Augment Information

Use Generated Content to Augment Information

0:43 css

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

css tutorial about Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 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.

css tutorial about Use CSS Counters to Create Pure CSS Dynamic Lists

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

css tutorial about Target empty elements using the :empty pseudo-class

Target empty elements using the :empty pseudo-class

0:58 css

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?