Day 9: Backgrounds, Borders, and Color

Today's Progress

On the agenda today are backgrounds, borders, and colors. This lesson opens with two videos on these topics. First Adda talks about CSS and color.

She describes how to add color using the color property. In the second video, she explains how backgrounds and borders can be added to a website. This is where she introduces the CSS properties you can use for backgrounds and borders.

Backgrounds

The default background of a background on a website is transparent. So it often looks white on a web browser. However, you can change the background color if you like using CSS.

All you need to do is use the background property. After the colon put the color name or hexadecimal code as the value.

Adding a Background Image

There are two ways to add a background image: relative URL and absolute URL. Regardless of what type or URL you want to use, you need to use the background property and assign the value url() after the colon. Inside the url() is where you'll put the URL you want.

Make sure to wrap the URL in quotes. You can use either single or double quotes. A relative URL is the file path that says where the image file is from where your code file is.

If the image is in your project folder, you will use this type of URL in the url() value. However, if you are using an online text editor, you will be using an absolute URL. An absolute URL is a path to an image file on a different website or web server.

If you want to use a background image, you will need to use properties like repeat, background-position, and background-color. Websites at default will repeat the image multiple times. If you don't want repeating images, you can add the no-repeat to your background property value.

body {
    background: url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg") no-repeat;
}

It isn't necessary to add the repeat value, but Skillcrush advises students to include it since it is a placeholder if they plan to change the value. Plus it is good for new developers to see if they are just starting out and want to make sure they are repeating a background image.

It is a good idea to have a fallback color in place because sometimes images don't load or if the image is transparent. Background-position is a little bit tougher because the amount of the image is based on the site's aspect ratio of the screen. Skillcrush says it is a lot like wallpaper in a way.

This is where background-size comes into play. It sets the width of the image. Many developers set background images to the cover value which extends the image to the height and width of the container. The other technique is background's position.

It positions the image on the page. Many developers will use the center value for background images. Skillcrush breaks this down by making a tiled background using heart icons. This makes it look like repeating wallpaper pattern.

Borders

Borders are another way to add style to your website. You can add a border to your website by putting the border property in the CSS block you want. The value of the border property is the width, style, and color. The width needs a number with a pixel (px) value.

There are many different border styles to pick from. The ones you can pick are:

dotted
dashed
solid
double
groove

If you want a color for your border, set the color to either the color name or the hexadecimal code. If you want to put a border on a specific side or customize a certain border size, you can also use CSS properties like border-bottom, border-top, border-left, and border-right.

Another property developers like to use with borders is border-radius. This property rounds the corners of the borders so they are curved more. Add the border-radius property to your CSS block.

Next, put the number of pixels you want for the value. Always remember that the more pixels you put for your value, the more rounded the corners will be.

Color

Color isn't just for text. It is also used for borders and backgrounds. In the early days of the web, there weren't many colors to choose from. These are web-safe colors.

These are colors such as black, red, and even fuschia. Today there are many colors you can choose from. However, Skillcrush takes a minute to talk about color contrast.

Contrast means the luminance (brightness) between two styling elements. This means on a website there needs to be a good contrast between the foreground elements (think icons, text, images, etc.) and background elements. Contrast is good on websites because it makes things easy to see on a site.

If things in the foreground and background are too similar, it will be very hard to read. Skillcrush shows by having text on the same dark blue background. One is in white while the other is in green.

If you want to improve accessibility on your website, contrast is another way to accomplish this. Contrast is very important for people with visual needs. I struggle with color a lot more these days and it can be harder for me to see color on certain background colors (i.e. black on red).

So developers need to be careful with contrasting colors. A good way to make sure your color contrast works is with good testing. This doesn't mean testing it with lots of users.

Test your site in a well-lit room as well as outside on a sunny day. A good color contrast will work in any situation. Skillcrush then explains color contrast levels and ratios.

The Web Content Accessibility Guidelines (WCA) use different calculations to determine the luminance of a website. That means "the relative brightness of any point in the color space". To do this there are contrast checkers that can calculate and give a rating of how your website's luminance is.

If you look at these ratings, you will get an AA or AAA level. The best rating is AAA so if you want a high rating this is the one you want. When looking at a luminance rating, you will see something like "8.59.1" or "3.1"

This is the ratio used to measure colors. So a website with an AA rating has a 4:5:1 ratio for normal text and 3:1 for larger text. A website with AAA rating has 7:1 for normal text and 4:5:1 for large.

That means that large text is 24px with a normal font-weight or about 18 with a bold font weight. It just shows that the standards for normal and larger text matter with color contrast. It makes the text larger or uses a bolder font-weight on a website.

Quiz and Coding

I did great on today's quiz. I only missed one question today. I forgot ridge for one of the styles used for border properties.

Today's two coding activities were applying backgrounds, borders, and colors to the website. There was a bonus challenge where students could check the color contrast and see if they got a AAA rating. The coding activities went well.

I took time to play around with the colors a bit and see how certain combinations worked on the web. I didn't focus on getting a AAA rating for this challenge, but I did try both color checkers Skillcrush recommended to see what they were like and what comes with the rating. Both sites got very similar scores for the same foreground and background colors.

The checkers gave me a lot of good information along with their ratings so I'll be using one of them again in future projects. All developers need to play around with contrast checkers on their projects to get practice reading these ratings and seeing how they work.

Tomorrow's Plan

The CSS review continues with dimensions and box model. This lesson will explain how to use CSS to change the size and placement of HTML elements. Students will get a chance to use height, width, margin, and padding properties in CSS blocks.

This is where CSS can start to get a little tricky. So it ok to feel frustrated at this point. Remember if you need more of a review, don't hesitate to read some of the posts in the Skillcrush 101 series.