Best Practices, Backgrounds & Gradients
Introduction
In this topic we want to make sure that you not only understand just what elements and selectors and attributes you CAN use, but also which ones you SHOULD use in each situation. Many websites have similarities in the way they are structured. To be more specific, most of them use container divs for grouping elements and they use classes and IDs as necessary to determine styles.
Study
- Watch the following video about Accessibility Fundamentals with Rob Dodson.
Duration: 30 minutes
- Study the CSS Style Guide by Mark Otto, one of the creators of Bootstrap.
Additional Resources
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.
Put a box around every div on the page with this Chrome extension, or this Firefox extension. It can help you deconstruct an existing page or debug your own layouts.
Bookmark the CSS Reference, a visual guide to CSS, by Jeremy Thomas.
Introduction to Backgrounds & Gradients
In this topic we will see a brief section about backgrounds. Although backgrounds are an important element of a web page, they are usually ignored until they become a problem. Therefore this section should get you thinking properly about backgrounds. To be more specific you will learn how to deal with backgrounds using regular old CSS.
Learning Objectives
- How to set the background color
- Which color to use when elements are stacked on top of each other (on the z-axis)
- How to set a partially transparent color
- How to set a gradient background
- How to make an image the background of an element
- Why it is useful to make the image the background of an element instead of using a regular
<img>tag - How to make a background image of a fixed size
- How to make a background image repeat
- How to get your page’s background image to fill the page even when you resize the browser
Study
Skim through this CSS Tricks article on the different types of gradients
Additional Resources
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.