CSS: Enhancing Website Graphics

2h 6mIntermediate2021-06-04

Authors

Patrick Carey

Author with 20 years' experience writing textbooks

Course details

Are you new to using CSS? If so, this course can help equip you with the skills you need to efficiently update and enhance the look of your website using CSS graphic design styles. Instructor Patrick Carey helps you get started by covering some basic topics, including how to add background color and insert background images. He also goes into some more advanced concepts, including how to create text and box shadows, apply color gradients, and format with filters. Upon wrapping up this course, you'll have the knowledge you need to start leveraging the power of CSS design styles so you can improve your website's appearance and attract more interest.

Learning objectives
Defining the element background
Adding background color
Inserting a background image
Combining multiple backgrounds
Creating borders
Defining shadows
Creating a text shadow
Creating a box shadow
Applying color gradients
Formatting with filters
Combining multiple filters

Skills covered

CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Using the exercise files

1. Defining the Element Background

04 - CSS colors
05 - Add background color
06 - Insert a background image
07 - Background image options
08 - Use the background style
09 - Combine multiple backgrounds
10 - Challenge - Building a background
11 - Solution - Building a background

2. Creating Borders

12 - Use the border style
13 - Circle style corners
14 - Ellipse style corners
15 - Apply border images
16 - Challenge - Element borders with flair
17 - Solution - Element borders with flair

3. Defining Shadows

18 - Create a text shadow
19 - Create a box shadow
20 - Challenge - Shadow challenge
21 - Solution - Shadow challenge

4. Applying Color Gradients

22 - Create a linear gradient
23 - Create a radial gradient
24 - Repeating a gradient
25 - Gradients as background images
26 - Challenge - Building a gradient
27 - Solution - Buidling a gradient

5. Formating with Filters

28 - Use the filter property
29 - Combine multiple filters
30 - Challenge - Transforming a website
31 - Solution - Transforming a website

Conclusion

32 - Next steps