Browse all CSS lessons.

showing All 96 lessons...

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

P

Easily Reset Styles With a Single CSS value

P

Conditionally Apply Styles Using Feature Queries

P

Dynamically Size Elements with Pure CSS

P

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

P

Creating visual skip links in HTML and CSS

P

Manipulate Images Using CSS Filter and Blend Modes

P

Reuse Flexbox Styles With A Sass Mixin

P

Use Generated Content to Augment Information

P

Control Image Aspect Ratio Using CSS

P

Use CSS Counters to Create Pure CSS Dynamic Lists

P

Target empty elements using the :empty pseudo-class

P

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

P

Layout Responsive Fluid Columns Using CSS

P

Create CSS Selectors in Chrome DevTools from Selection

P

Using Flexbox in Websites and Applications

P

Focus management using CSS, HTML, and JavaScript

P

Targeting Elements with CSS Attribute Selectors

P

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

CSS :target Selector

P

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

P

Combining the flexbox sizing properties using the flex shorthand

P

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

P

Defining dimensions on flexbox children using flex-basis

P

Demystifying alignment in flexbox children

P

Using order to rearrange flexbox children

P

Using flex-direction to layout content horizontally and vertically

CSS Media Queries

P

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

P

CSS :not Selector

P

CSS Transitions: Easing and Other Timing Functions

P

CSS Transitions: Delays and Multiple Properties

P

Introduction to CSS Transitions

P

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

P

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

P

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

P

Basic CSS Selectors [UNPUBLISHED]

P

Flexbox Fundamentals

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

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

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

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

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

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

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.

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 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 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 Demystifying alignment in flexbox children

Demystifying alignment in flexbox children

3:35 flexbox PRO
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 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.

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.

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

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