Heads up! Looks like you're using adblock. Please consider supporting us by whitelisting coursedio.online How?

file_download Exercise Files

Next Video arrow_forward

Changing fonts with font-family

with Christina Truong

Explore the concepts that form the foundation of CSS. Learn how to select content, style text, manage layouts, and more as you work on a series of real-world projects.

play_circle_filled

Getting started with CSS

play_circle_filled

What you should know

play_circle_filled

How to complete the exercises

play_circle_filled

HTML and CSS

play_circle_filled

Working with website files

play_circle_filled

Writing code with a text editor

play_circle_filled

Customizing your text editor

play_circle_filled

Project: Overview and setup

play_circle_filled

Where to find images

play_circle_filled

Optimizing images for the web

play_circle_filled

Relative and absolute paths

play_circle_filled

Project: Adding images and icons

play_circle_filled

Referencing CSS

play_circle_filled

Project: Creating a CSS file

play_circle_filled

CSS specifications and the W3C

play_circle_filled

CSS syntax and terminology

play_circle_filled

CSS values and units

play_circle_filled

The color property and values

play_circle_filled

Creating a color palette

play_circle_filled

Type and universal selectors

play_circle_filled

ID selectors

play_circle_filled

Class selectors

play_circle_filled

Descendant combinators and selector lists

play_circle_filled

The background property

play_circle_filled

Project: Prepping the CSS file

play_circle_filled

Project: Adding background styles

play_circle_filled

Pseudo-classes and pseudo-elements

play_circle_filled

Inheritance and the cascade

play_circle_filled

Specificity

play_circle_filled

Project: Styling links

play_circle_filled

Intro to the CSS box model

play_circle_filled

The box model properties

play_circle_filled

Box-sizing and the box model fix

play_circle_filled

Inline, block, and display

play_circle_filled

Project: Footer styles and icons

play_circle_filled

Debugging with developer tools

play_circle_filled

Managing box model quirks

play_circle_filled

Project: Background image update

play_circle_filled

Using negative margin values

play_circle_filled

Center aligning with margin

play_circle_filled

Project: Adding content wrappers

play_circle_filled

Project: Adding a header image

play_circle_filled

Intro to CSS Layout

play_circle_filled

Layouts with the float property

play_circle_filled

Clearing floats

play_circle_filled

Project: Float images and text

play_circle_filled

The position property

play_circle_filled

Position and z-index

play_circle_filled

Project: Fixed positioning

play_circle_filled

Intro to Grid and Flexbox

play_circle_filled

Intro to Flexbox

play_circle_filled

Flexbox: Orientation and ordering

play_circle_filled

Sizing with flex properties

play_circle_filled

Flexbox exercise

play_circle_filled

Project: Sticky footer with flexbox

play_circle_filled

Aligning flex items

play_circle_filled

Project: Aligning elements with Flexbox

play_circle_filled

Intro to CSS Grid

play_circle_filled

The explicit grid

play_circle_filled

The implicit grid

play_circle_filled

Adding gutters with the gap property

play_circle_filled

Project: Adding columns with Grid

play_circle_filled

Typography for the web

play_circle_filled

Changing fonts with font-family

play_circle_filled

font-weight and font-style

play_circle_filled

Web fonts with @font-face

play_circle_filled

Web fonts with Google Fonts

play_circle_filled

Project: Google Fonts

play_circle_filled

The font-size property

play_circle_filled

Font-size and accessibility

play_circle_filled

Text-align and text-transform

play_circle_filled

Line-height and letter-spacing

play_circle_filled

Project: Typography styles

play_circle_filled

Project: Buttons and spacing

play_circle_filled

Intro to responsive design

play_circle_filled

Intro to media queries

play_circle_filled

Breakpoints and media queries

play_circle_filled

Fluid layouts

play_circle_filled

The viewport meta tag

play_circle_filled

Testing responsive layouts

play_circle_filled

Project: Breakpoints

play_circle_filled

Project: Media queries: Part 1

play_circle_filled

Project: Media queries: Part 2

play_circle_filled

Project: Media queries: Part 3

play_circle_filled

Continuing beyond the essentials with CSS