CSS

Cascading Style Sheets bring order and beauty to our applications.

COURSES 6

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

WATCH Basarat Ali Syed's COURSE

Maintainable CSS using TypeStyle

Maintainable CSS using TypeStyle

Having your CSS co-located with your UI code provides the same sort of advantages in refactor ability and maintainability that ...

11 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 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 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 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

Compile tailwind to CSS with gulp

In this lesson, we learn how to generate CSS utility classes from tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simpl...

Simon Vrachliotis
2:41

Apply mobile-first responsive classes in tailwind

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media...

Simon Vrachliotis
2:47

Abstract utility classes to BEM components in tailwind

When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility clas...

Simon Vrachliotis
2:09

Create custom utility classes in tailwind

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.

Simon Vrachliotis
1:51

Build a Fluid Loading Animation in CSS

In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS3. Summary: 1. Use keyframes to animate. 2. Add animation property to the required division. 3. ...

Akash Gutha
4:32

Create an Animated Hamburger using HTML5 and CSS3

We will create an interesting animated hamburger that can be used in websites. In this process, we will look at transitions and transformations in CSS3. Further Links: https://codepen.io/tag/ham...

Akash Gutha
3:01

Build a Carousel Control using Bootstrap

Bootstrap makes building a carousel control a breeze. For Bootstrap carousel to work, we should include Jquery and Bootstrap's javascript module. Carousel has 3 parts: 1. Slider 2. Slider Controls...

Akash Gutha
6:30

Understand the Bootstrap Grid system

We will understand the Bootstrap grid system by creating a sample HTML page which is responsive to width changes. We will use Bootstrap 3 for this lesson. Link for Bootstrap setup

Akash Gutha
4:44

Change an HTML5 input's placeholder color with CSS

We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can differ from browser to browser, so, we will make sure to cover all of the cases.

Benjamin Fox
2:15

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

FEATURED CSS PLAYLISTS

Browse all CSS lessons.

showing All 96 lessons...

Flexbox Fundamentals

P

Basic CSS Selectors [UNPUBLISHED]

P

Interactive Pseudo-Classes :link :visited :hover :active

P

Form Pseudo Classes :focus :disabled :checked :invalid :required

P

DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

P

Introduction to CSS Transitions

P

CSS Transitions: Delays and Multiple Properties

P

CSS Transitions: Easing and Other Timing Functions

P

CSS :not Selector

P

CSS Display Property: Block, Inline-Block, and Inline

P

CSS Media Queries

P

Using flex-direction to layout content horizontally and vertically

Using order to rearrange flexbox children

P

Demystifying alignment in flexbox children

P

Defining dimensions on flexbox children using flex-basis

P

Using flex-shrink and flex-grow to make flexbox children resize correctly

P

Combining the flexbox sizing properties using the flex shorthand

P

Turning a flexbox into a grid using flex-wrap and align-content

P

CSS :target Selector

P

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

Targeting Elements with CSS Attribute Selectors

P

Focus management using CSS, HTML, and JavaScript

P

Using Flexbox in Websites and Applications

P

Create CSS Selectors in Chrome DevTools from Selection

P

Layout Responsive Fluid Columns Using CSS

P

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

P

Target empty elements using the :empty pseudo-class

P

Use CSS Counters to Create Pure CSS Dynamic Lists

P

Control Image Aspect Ratio Using CSS

P

Use Generated Content to Augment Information

P

Reuse Flexbox Styles With A Sass Mixin

P

Manipulate Images Using CSS Filter and Blend Modes

P

Creating visual skip links in HTML and CSS

P

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

P

Dynamically Size Elements with Pure CSS

P

Conditionally Apply Styles Using Feature Queries

P

Easily Reset Styles With a Single CSS value

P

Create a tab component using vanilla CSS

P

Describe a grid layout using named grid lines

P

Get up and running with CSS Grid Layout

P

Automate SVG Sprite Background Image Variations with a SCSS Mixin

P

Style an SVG Icon with CSS

P

Loop Over Data with the SCSS @each Control Directive

Specify a grid gutter size with grid-gap

P

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

P

Refer to fractions of available space with the fr unit

P

Use the minmax function to specify dynamically-sized tracks

P

Use the repeat function to efficiently write grid-template values

P

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

P

Describe a grid layout using grid-template-areas

P
css tutorial about Flexbox Fundamentals

Flexbox Fundamentals

9:55 css PRO

In this lesson we'll look at all of the properties available to us with the CSS3 Flexible Box, or flexbox.

css tutorial about Basic CSS Selectors

Basic CSS Selectors

2:23 css PRO

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.

css tutorial about Interactive Pseudo-Classes :link :visited :hover :active

Interactive Pseudo-Classes :link :visited :hover :active

4:33 css PRO

The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

css tutorial about Form Pseudo Classes :focus :disabled :checked :invalid :required

Form Pseudo Classes :focus :disabled :checked :invalid :required

4:00 css PRO

Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

css tutorial about DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

3:00 css PRO

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.

css tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css PRO

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

css tutorial about CSS Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css PRO

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

css tutorial about CSS Transitions: Easing and Other Timing Functions

CSS Transitions: Easing and Other Timing Functions

3:55 css PRO

Learn how to apply timing functions to CSS transitions. We'll talk about pre-defined functions like 'ease-in', 'ease-out' and 'step', and then look at how to specify a custom function capturing the exact transition effect you're looking for.

css tutorial about CSS :not Selector

CSS :not Selector

0:53 css PRO

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

css tutorial about CSS Display Property: Block, Inline-Block, and Inline

CSS Display Property: Block, Inline-Block, and Inline

2:51 css PRO

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.

css tutorial about CSS Media Queries

CSS Media Queries

5:05 css PRO

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

flexbox tutorial about Using flex-direction to layout content horizontally and vertically

Using flex-direction to layout content horizontally and vertically

2:05 flexbox

The Flexbox css spec allows for more adjustable layouts. The flex-direction property allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries.

flexbox tutorial about Using order to rearrange flexbox children

Using order to rearrange flexbox children

1:17 flexbox PRO

Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom.

flexbox tutorial about Demystifying alignment in flexbox children

Demystifying alignment in flexbox children

3:35 flexbox PRO
flexbox tutorial about Defining dimensions on flexbox children using flex-basis

Defining dimensions on flexbox children using flex-basis

1:38 flexbox PRO

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

flexbox tutorial about Using flex-shrink and flex-grow to make flexbox children resize correctly

Using flex-shrink and flex-grow to make flexbox children resize correctly

2:36 flexbox PRO

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

flexbox tutorial about Combining the flexbox sizing properties using the flex shorthand

Combining the flexbox sizing properties using the flex shorthand

1:39 flexbox PRO

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

flexbox tutorial about Turning a flexbox into a grid using flex-wrap and align-content

Turning a flexbox into a grid using flex-wrap and align-content

1:47 flexbox PRO

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

css tutorial about CSS :target Selector

CSS :target Selector

1:52 css PRO

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

css tutorial about Using CSS Combinators to Identify Siblings and Descendants in CSS

Using CSS Combinators to Identify Siblings and Descendants in CSS

4:37 css PRO

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

css tutorial about Targeting Elements with CSS Attribute Selectors

Targeting Elements with CSS Attribute Selectors

5:00 css PRO

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 identify variations of those values

css tutorial about Focus management using CSS, HTML, and JavaScript

Focus management using CSS, HTML, and JavaScript

8:34 css PRO

Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

flexbox tutorial about Using Flexbox in Websites and Applications

Using Flexbox in Websites and Applications

3:29 flexbox PRO

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

css tutorial about Create CSS Selectors in Chrome DevTools from Selection

Create CSS Selectors in Chrome DevTools from Selection

1:32 css PRO

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 your needs.

css tutorial about Layout Responsive Fluid Columns Using CSS

Layout Responsive Fluid Columns Using CSS

3:03 css PRO

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.
css tutorial about Create a fixed-fluid-fixed layout using CSS calc()

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

0:59 css PRO

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.

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

Target empty elements using the :empty pseudo-class

0:58 css PRO

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.

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

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css PRO

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 Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 css PRO

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 Generated Content to Augment Information

Use Generated Content to Augment Information

0:43 css PRO

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.

scss tutorial about Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54 scss PRO

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 Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css PRO

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 Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css PRO

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 Target Positional Elements Using *-Of-Type CSS pseudo-classes

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

2:43 css PRO

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

css tutorial about Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57 css PRO

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

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css PRO

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 Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 css PRO

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 Create a tab component using vanilla CSS

Create a tab component using vanilla CSS

3:09 css PRO

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 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 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://.

scss tutorial about Automate SVG Sprite Background Image Variations with a SCSS Mixin

Automate SVG Sprite Background Image Variations with a SCSS Mixin

4:12 scss 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 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 */
}
scss tutorial about Loop Over Data with the SCSS @each Control Directive

Loop Over Data with the SCSS @each Control Directive

5:06 scss

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

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