Enhancing Design with CSS Course (How To)

In this course, we're going to learn CSS properties for enhancing visual design. We’ll cover various properties for styling text, including loading web fonts from external resources. We’ll learn techniques for turning our CSS boxes into more than just rectangles. And finally, we’ll learn some really cool visual effects using CSS filters and gradients.

What you'll learn

• Styling Text
• Styling Boxes
• Styling Images
• Finishing Touches

Styling Text

Some of the most important enhancements you can make using CSS are typographic improvements. After all, typography is all about communication. No matter how beautiful your colors and images, your web page isn’t doing its job unless users stick around to read it.

Chevron 8 steps

• Introducing the Course

  3:33

• Web-Safe Typefaces and Font Stacks

  3:52

• Importing Fonts

  4:39

• Google Fonts

  4:59

• Line-height and letter-spacing

  4:53

• Text Shadows

  7:51

• Text Shadows

  2 objectives

• Quiz: Styling Text

  5 questions

Styling Boxes

We should be feeling pretty good about our progress. Our text looks a whole lot nicer than it did when we started this stage.

Of course, CSS is capable of applying sophisticated visual effects to more than just text. In this stage, we’ll learn to enhance the styles of our CSS boxes.

Chevron 6 steps

• Box Shadows

  4:49

• Box Shadows

  2 objectives

• Rounded Corners

  4:59

• Rounded Corners

  1 objective

• Adding Content Using CSS

  3:45

• Quiz: Styling Boxes

  5 questions

Background Images

So far, our work with images has been limited to content images, inserted into the HTML using the element. And we’ve targeted these images using the selector in our CSS, or by adding IDs or classes to our images.

But that’s not the only way to work images into your web layout. Images can also be decorative, inserted into your CSS as background images.

Chevron 6 steps

• Background Images

  4:23

• The Background Shorthand Property

  4:16

• Background Images

  5 objectives

• Background Blend Modes

  3:43

• CSS Background Blend Modes

  1 objective

• Quiz: Background Images

  5 questions

Finishing Touches

We’ve reached the final stage of Enhancing Design with CSS, and our Lake Tahoe website looks pretty appealing, at least on mobile screens. For the remaining stage, our focus will be attention to detail, since small details are what separate a good online experience from a great one.

Chevron 6 steps

• CSS Gradients: Linear and Radial

  6:18

• CSS Gradients: Color Stops and Transparency

  5:34

• CSS Gradients

  4 objectives

• Improving Spacing

  3:52

• Applying Media Queries

  10:36

• Quiz: Finishing Touches

  5 questions