Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

Backgrounds are very flexible. We can use images, gradients, or plain colors to create colorful backgrounds. Let’s walk through styling some backgrounds and learn how we can use shorthand properties to not only define the backgrounds but to position them as we see fit. 


Instructor: [00:00] Let's go ahead and give some style to our content block here. I've added a class of content to this section. Video content background URL image slash fog. I'll save that and refresh. We'll see that we get an image placed behind our content.

[00:17] When we use background, it's important to understand it's a shorthand property, which means it applies a whole bunch of styles with a single declaration.

[00:25] With our DevTools, we'll see that it's applying background image and a whole bunch of initial styles with this shorthand property. Let's play around with this for a little bit and do a background size equals cover.

[00:35] When we save and refresh, this is going to scale the image as much as possible without actually stretching it. Inside of our DevTools, we'll see this background size cover and the shorthand is taking that into effect, giving it a cover for the background size.

[00:49] We can go one step further and remove this and do center slash cover, now repeat. When we save and refresh, our image is going to position a little bit differently. When we open up our applied styles, we'll see that the position is centered. The background size is cover and our repeats both say no repeat. We're able to apply a bunch of styles without actually naming each one of them.

[01:13] This background property also accepts gradients, so we can do a radio gradient of crimson and sky blue as the background. We'll save and refresh. We'll see that this is applied to our content background and it's applied as an image.

[01:29] We can give this gradient a parallax field, meaning when we scroll up and down, the red center will follow our view by adding a shorthand property of fixed here.

[01:38] When we save and refresh, we'll see that a background attachment is applied here, a fixed. When we scroll up and down now, the red dot gradient is going to follow our mouse up and down.

[01:53] In conclusion, implementing backgrounds on elements is very flexible. We can use images, gradients, and we can just use plain old colors like red.

Course

CSS Fundamentals

Add Backgrounds to HTML Elements

Share this video with your friends