Foundational Exercises

These exercises are designed to help you practice the concepts you have learned so far, and to introduce you to a few new concepts. Complete as many as you can, and feel free to reference the previous content as needed.

You may also need to reference the CSS Documentation  to complete these exercises, or other resources you find online. Learning how to read documentation and find answers is a crucial skill for any developer. Never expect to know everything, and be prepared to do some research!

Exercise 1: Integrating CSS

In this exercise, you are going to practice adding CSS to an HTML file using all three methods: external CSS, internal CSS, and inline CSS. You should only be using type selectors for this exercise when adding styles via the external and internal methods. You should also use keywords for colors (e.g. “blue”) instead of using RGB or HEX values (if you are familiar with them).

Goals

• You should see a <div> element with some text.
  • It should have a red background, white text, a font size of 32px, text center aligned and bold.
  • The CSS for the <div> element should be added externally, and using a type selector.
• You should see a <p> element with some text.
  • It should have a green background, white text, and a font size of 18px.
  • The CSS for the <p> element should be added internally, and using a type selector.
• You should see a <button> element with some text.
  • The <button> element should have an orange background and a font size of 18px.
  • The CSS for the <button> element should be added using inline styles.

Exercise 2: Classes and IDs

There are several elements in the HTML file provided, which you will have to add either class or id attributes to. You will then have to add rules in the CSS file provided using the correct selector syntax.

Goals

• You should see a yellow background for all odd numbered elements in the list.
• You should have a class selector used for all odd numbered elements in the list.
• You should see that the second element in the list has blue text and a font-size of 36px.
• The font-size and text color on the second element should be set by using an id attribute.
• You should see that the third element in the list has a font-size of 24px.
• The font-size on the third element should be set by using a class attribute.
• You should see that the fourth element in the list has a red background, a font-size of 24px, and a font-weight of bold.
• The font-size of the fourth element should be set with a class attribute. The font-weight and the color should be set with an id attribute.

Exercise 3: More Styles

Let’s build a little off the previous exercise, in which you added multiple classes to a single element in order to apply two different rules to it.

Goals

• You should see a black background and white text on the first button element.
• You should see a yellow background on the second button element.
• You should set a font size of 28px using a selector list.
• You should have a list of fonts containing Helvetica and Times New Roman with sans-serif as a fallback in the selector list.
• You should see a unique class name on each element.
• You should have a selector list for styles that both elements share.

Exercise 4: Selector Chaining

With this exercise, we’ve provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it’s more important to understand how chaining different selectors works than how to actually add the attributes.

Goals

• You should see a width of 300px on the avatar and proportioned class.
• You should give it a height so that it retains its original square proportions (don’t hardcode in a pixel value for the height!).
• You should give the elements with both the avatar and distorted classes a width of 200px.
• You should give it a height twice as big as it’s width.

Exercise 5: Combinators

Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn’t.

The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that aren’t descendants of that element unstyled.

Goals

• You should see a yellow background for p elements that are descendants of the div element.
• You should see a text color of red for elements that are descendants of the div element.
• You should see a font size of 20px for elements that are descendants of the div element.
• You should center align text for elements that are descendants of the div element.