CSS: Backgrounds & Borders

Name: CSS: Backgrounds & Borders
Author: Cliff Brozo

Learn how you can use CSS to edit backgrounds and borders

Preview the first lesson free — get full access to all 7 lessons.

Course: On-Demand

Let's take a look at the HTML first. As you can see, as I scroll through it, first I'm linking to my background's CSS file, but the HTML file is actually pretty small. The only thing that's in here are divisions that I point to each different gradient style that I'm going to use, and I create those gradient styles in the cascading style sheet. I'd like to point out before we continue that Internet Explorer 9 and earlier versions of Internet Explorer do not support gradients. So what we need to do is handle that in our code so that if someone is using one of those earlier browsers, the webpage will still display properly. It just won't show a gradient. So lines 14 through 25 in the HTML document, all of these gradient IDs, correspond to lines one through 101 in the CSS file. Now, don't worry that there's 100 lines of CSS coding. A lot of it is repetitious. We'll see how. Let's take a look at the first gradient. This one is called Grad 1. I have a height of 200 pixels and my background color is set to purple for those browsers that do not support gradients. So if they use Internet Explorer 9 or earlier, they will just see a plain purple background. However, if they use one of the more modern browsers, the background will be not just a color, it will be an image that is set to linear gradient. And the idea is that the colors will go from purple to white. And as you can see over in the browser window, we start off with a purple and slowly change to the color white. And the computer calculates how to get from the top to the bottom from purple to white. In gradient two, we do the same thing, except we are going from light blue to light green. Gradients three, I made some changes because what I wanted to do is show a bunch of different backgrounds, not across the screen, but in little square boxes, just so you can see what they look like. I've set the height and width of each of these boxes to 200 pixels. And I've created some absolute positioning so that I can put them right next to each other across the page. And I modify the top feature, changing the location with each of these gradients. Once again, I am doing purple to white. However, this time, instead of a linear gradient, I'm using a radial gradient. And the radial will start from the middle and work its way out toward the edges. So I start with a middle of purple and I work my way out to the edge where I get to white. The next gradient is the light blue to light green. Once again, that is a radial gradient. And as you can see, I've moved over 210 pixels so that the light blue to light green box is indented from the left. The third one is also a radial gradient. However, this time I use three colors and I go from red to yellow to green. The third gradient in this list uses three colors. It's a radial gradient. And I go from red to yellow to green. Now you have to be careful here because too many colors and it starts to get confusing. So you don't want to go crazy like we've done in this fourth version, gradient number six here, uses a radial gradient that repeats. Kind of looks like a big lollipop, but I've used three colors, red, yellow and green. And I've coded percentages for how much of each color should show up. The next radial is also going back to linear. And in this case, it's going from left to right. And I have to specify that the gradient goes to the right. So it takes the red color on the left, moves to yellow and certainly will get orange in the middle as the computer calculates how to get from red to yellow. Other gradients can go from corner to corner. And the next one says, let's go to the bottom right. So I'm starting off with a blue and I'm winding up with yellow and I'm going towards the bottom right. Finally, my last gradient. If you're a fan of science, you know the color spectrum and you remember the mnemonic of Roy G Biv and that's the colors in the main colors in the spectrum, red, orange, yellow, green, blue, indigo and violet. And I've got a color pattern here. Now you wouldn't want to use this in a background because it's way too confusing, but some of these other gradients can really be effective. Now you know how to code gradients. Let's take a look at how to put multiple images on a screen.

Beginner Provider : Cliff Brozo 7 Lessons · 46m in English

Course Description

When building a website, you want to balance your content with visual flair: backgrounds, gradients, images, boxes and more. In this course, Cliff Brozo will walk you through how to use CSS (Cascading Style Sheet) to make your site visually appealing. You'll become familiar with using this code to make tweaks and adjustments to your site, and how CSS works with HTML to make these changes. By the end of this course, you’ll have an edge when it comes to creating and adding visuals to your website.

What You'll Learn

Use CSS to make tweaks and adjustments to a website's visuals
Apply backgrounds, gradients, images, and boxes to add visual flair
Format borders and backgrounds for a webpage
Understand the ratios behind a visually balanced webpage
Apply the spatial principles of adding photographs to a webpage
Understand how CSS works with HTML to make visual changes

Key Takeaways

CSS (Cascading Style Sheets) is used to make a website visually appealing through backgrounds, gradients, images, and boxes.
CSS works together with HTML to make visual changes to a site.
A visually balanced webpage is governed by underlying ratios.
There are spatial principles to follow when adding photographs to a webpage.
The course covers formatting both borders and backgrounds.

Frequently Asked Questions

What does this course cover?

The course covers using CSS to add visual flair to a website, including backgrounds, gradients, images, boxes, and borders, and how CSS works with HTML to make these changes. Lessons include Backgrounds (Parts 1 and 2), Borders (Parts 1 and 2), Formatting Borders, Images, and Formatting Backgrounds.

Who teaches this course?

The course is taught by Cliff Brozo, who walks you through how to use CSS to make a site visually appealing.

What skills will I gain from this course?

You'll build skills in Cascading Style Sheets (CSS), CSS Codes, CSS Frameworks, CSS Grid, Object Oriented CSS, and Sassy Cascading Style Sheets (SCSS).

What will I be able to do by the end of the course?

By the end of the course, you'll have an edge when it comes to creating and adding visuals to your website, and you'll be familiar with using CSS to make tweaks and adjustments to your site.