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

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

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

FEATURED CSS PLAYLISTS

Browse all CSS lessons.

showing All 91 lessons...

Build a Fluid Loading Animation in CSS

P

Create an Animated Hamburger using HTML5 and CSS3

P

Build a Carousel Control using Bootstrap

P

Understand the Bootstrap Grid system

P

Change an HTML5 input's placeholder color with CSS

P

Generate static css + html files using TypeStyle

Use fallback values in TypeStyle for better browser support

Render HTML/CSS server-side using TypeStyle

Use TypeStyle keyframes to create CSS animations

Load raw CSS in TypeStyle

Compose CSS classes using TypeStyle

Style CSS pseudo elements with TypeStyle

Style CSS pseudo-classes using TypeStyle

Add responsive styles using TypeStyle Media Queries

Reusable styles using TypeStyle mixins

Add type safety to CSS using TypeStyle

Design for Mobile First with Tachyons

P

Inform the User of Interactions with CSS Transitions

P

Use Media Queries to Make an Existing Application Responsive

P

Draw Simple Icons with CSS

P

Reduce Ambiguity in Class Names using a Naming Convention

P

Understand Semantic Markup in relation to CSS

P

Style a Form with Plain CSS

P

Use CSS to Inform Users of Interactivity

P

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

P

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

Build a Fluid Loading Animation in CSS

4:32 css PRO

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. Add in an appropriate Transition time.
4. Play with the easing function to get a smooth animation.

Create an Animated Hamburger using HTML5 and CSS3

3:01 css PRO

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:

  1. https://codepen.io/tag/hamburger%20menu/
  2. https://codepen.io/designcouch/pen/Atyop

Build a Carousel Control using Bootstrap

6:30 css PRO

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

To setup Bootstrap:

http://getbootstrap.com/docs/3.3/getting-started/#download

Understand the Bootstrap Grid system

4:44 css PRO

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

Change an HTML5 input's placeholder color with CSS

2:15 css PRO

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.

css tutorial about Generate static css + html files using TypeStyle

Generate static css + html files using TypeStyle

3:08 css

You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this pattern to generate email and pdf template files. Since TypeStyle supports cssRaw all your css can be easily inlined into a single file making it easy to work with template rendering engines.

css tutorial about Use fallback values in TypeStyle for better browser support

Use fallback values in TypeStyle for better browser support

2:42 css

You can increase the browser support of your CSS using fallback values and vendor prefixes. This lesson covers using vendor prefixes and fallback values (single prop multiple values) with TypeStyle. It also shows best practices for maintaining variables in the presence of vendor prefixing.

css tutorial about Render HTML/CSS server-side using TypeStyle

Render HTML/CSS server-side using TypeStyle

5:20 css

Here we show how to return CSS + HTML as a server response. And then rehydrate it on the client. Server side rendering is great for SEO and first load performance.

TypeStyle supports server side rendering CSS out of the box.

css tutorial about Use TypeStyle keyframes to create CSS animations

Use TypeStyle keyframes to create CSS animations

3:13 css

We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes function to create an animation. We also discuss a few other CSS properties in the animation namespace.

css tutorial about Load raw CSS in TypeStyle

Load raw CSS in TypeStyle

1:51 css

TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw CSS if you ever need to migrate old code quickly. This lesson will demonstrate how to use the cssRaw function along with the real world use case of CSS resets e.g. normalize.css.

css tutorial about Compose CSS classes using TypeStyle

Compose CSS classes using TypeStyle

4:05 css

We will demonstrate composing classes using the utility classes function. classes is also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle). classes is also what is recommended for conditionally applied TypeStyle CSS class names.

css tutorial about Style CSS pseudo elements with TypeStyle

Style CSS pseudo elements with TypeStyle

2:33 css

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element.

In this lesson we show how you can insert new content into the DOM using CSS pseudo elements. We also cover using other pseudo element selectors to change default browser behaviors.

css tutorial about Style CSS pseudo-classes using TypeStyle

Style CSS pseudo-classes using TypeStyle

2:51 css

TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on pseudo classes e.g. :focus :hover and :active which matches very closely with what you would write with raw CSS.

css tutorial about Add responsive styles using TypeStyle Media Queries

Add responsive styles using TypeStyle Media Queries

2:20 css

Media queries are very important for designs that you want to work on both mobile and desktop browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS.

In this lesson we show TypeStyle's media function. We also demonstrate how you can add non standard media queries if you want. Finally we show how organizing media queries this way is encapsulated under CSS class names.

css tutorial about Reusable styles using TypeStyle mixins

Reusable styles using TypeStyle mixins

2:17 css

TypeStyle’s style function allows you to give multiple objects as an argument. This provides a simple extensible reuse-ability model. We cover typestyle mixin and mixin creators in this lesson. We also demonstrate that you have the full power of JavaScript at your disposal when using TypeStyle.

css tutorial about Add type safety to CSS using TypeStyle

Add type safety to CSS using TypeStyle

4:13 css

TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript developer ergonomics in mind.

In this lesson we will show how easy it is to setup with zero configuration and also demonstrate its UI framework agnostic nature. We will also show how to integrate it with your application framework of choice using ReactJS as an example

css tutorial about Design for Mobile First with Tachyons

Design for Mobile First with Tachyons

2:43 css PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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.

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