HOME ======= HOME >>>>>>> faa6aaf237eae4895460e74eebaa130feb27079a

INSTRUCTIONS: Read the HTML here and in the browser. Follow the instructions to complete the problems. All of your CSS code must go into your-code.css.

Do not modify this file, test.html.

Each problem provides an image of what your result should look like. Because of minor image rendering inconsistencies in the browser, there are for reference only. It is ok if there are pixel-sized differences between what you have and the image.

Problem 1

Note: You can be tested on how to use basic selectors and common CSS properties. This is an example problem. The actual test may use different simple selectors and properties.

Write a CSS rule that assigns a background color of "#EFEFEF" to the body element.

Write a CSS rule that assigns a background color of "white" to all fieldset elements.

Problem 2

Note: You can be tested on how to use positioning. This is an example problem. The actual test may use different positioning and properties to affect layout.

There are three elements, here: An element with a class of "outer-layer-2" that has two children elements, one with a class of "blue-box" and the other with the class "orange-box".

Make the "blue-box" a square 40 pixels in width and height with a background color of "blue".

Make the "orange-box" the same size as the blue box. Make the "orange-box" have a background color of "orange".

Position the "orange-box" above the "blue-box".

Make sure you use "border-box" box sizing for "orange-box" and "blue-box".

Problem 3

Note: You can be tested on how to use Flexible Box Model to affect layout. This is an example problem. The actual test may use different properties and selectors.

The element with the class "outer-layer-3" contains the already styled elements in this problem.

Apply the Flexible Box Model to "outer-layer-3" such that its internal elements are laid out vertically and right-justified.

Problem 4

Note: You can be tested on any and all of the combinators and selectors. This one uses the adjacent sibling combinator.

There is an HTML element with a class "outer-layer-4". It has three paragraph child elements.

Use the adjacent sibling combinator + to make the text in the last two P tags the color orange.

Leave me alone

Orange me

Orange me

Problem 5

Note: You can be tested on any of the things that you can do to affect the layout of elements inside a Grid Layout.

The black square has the "inner-layer-5" class assigned to it. It lives in a grid of five columns and two rows.

Create a CSS rule that targets "inner-layer-5" to have it cover the last four squares of the first row.

Problem 6

Note: You can be tested on all things box shadow.

Below is an HTML element with the class "outer-layer-6" assigned to it with a background color of "cyan".

Apply a shadow to the element that has a blur radius of four pixels, and a background color of blue with an opacity value of 0.6. (Use the rgba function to make that color.)

Problem 7

Note: You can be tested on all things overflow. Your scrollbar may look different based on your operating system and browser.

Below is an HTML element with the "outer-layer-7" class assigned to it. It has too much content and overflows.

Make it so the vertical scrollbar always is visible and the horizontal scrollbar is never visible.

It was a dark and stormy night; the rain fell in torrents—except at occasional intervals, when it was checked by a violent gust of wind....
Problem 8

Note: You can be tested on any and all of the combinators and selectors. This one uses a compound class selector.

Note: The cursive font on your computer may look different based on your operating system and browser. Don't fret the cursive.

Below are two elements. The first has both the "cursive" and "bold" classes assigned to it. The second has both the "uppercase" and "bold" classes assigned to it.

Write a CSS rule that uses a compound class selector to target only the element that is both uppercase and bold to set the font family to "Courier New".

Cursive and bold
Uppercase and bold