Topics

• Understand the general rule for CSS syntax;
• Correctly include CSS in your HTML files;
• Select elements by tag name, class, and ID;
• Style elements with basic properties like color and background;
• Use Chrome CSS Inspector to debug HTML and CSS.

Tutorials

• Section 05 Introduction to CSS – videos 032–042
• The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server.
  • about-me.html / about-me.css
  • todo.html / todo.css
  • additional-selectors.html / additional-selectors.css
  • specificity.html / specificity.css
• The last two videos (41 & 42) introduce and solve an exercise which requires an html and css file to work with. Find them in the linked zip, then use them to complete the exercise. Upload the completed versions.
  • selectors-exercise.html / selectors-exercise.css

Problem set

This week you are going to do some basic styling of your recipe by setting a number of different background colors and text colors. But we’re going to make choices with common standards for creating web page color palettes.

To start the first thing to realize is that most of interface design is simply about the grays.

Have a look at your favorite website or social media feed – most of the color used will be gray. It might not seem that way with lots of images that stand out against this neutral palette, but look closely. Next you might notice that there is typically one additional color used to emphasize particular aspects of the interface. Facebook and Twitter both have a blue, Youtube has a red, Twitch has a purple, others will use a pink, a green, or any color that stands against the grays. You might choose one of these primary colors from the Material Design color system:

For this exercise you’re going to choose five colors: white, black, light gray, dark gray, and a primary color. You can use the palettes here to help you choose or find your own resources. It’s up to you!

With colors defined in your palette, it’s now time to follow the CSS problem set created for your recipe (the CSS instructions are in the code block as well). It’s possible that your HTML for your recipe may differ slightly, so your selectors may need some minor adjustments. Or you can rework your HTML based on mine. There is an image of my recipe with CSS and without for reference. It doesn’t look great yet, but it’s on the way!

For the blog

There are two parts for this week: quick CSS thought question and a bit of research on the color palette of a website of your choice.

On CSS – Describe the order of specificity for an element selector vs. a class selector vs. an id selector. Give an example of each selector in a code block.

On Design – Pick a favorite website or social media site and take a screenshot. Using the Chrome inspector identify the white, black, one or two grays, and the primary color being used. Include your screen shot and the colors described in your post. For example from theringer.com:

• #3b3b3b black
• #ffffff white
• #6e6e6e grey
• #429e62 primary