recursal/MDN huggingface dataset:
Test your skills: The Cascade
=============================

The aim of this skill test is to assess whether you understand universal property values for controlling inheritance in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, we want you to use one of the special values we looked at in the controlling inheritance section. To write a declaration in a new rule that will reset the background color back to white, without using an actual color value.

Your final result should look like the image below:

![Barely visible yellow links on a white background.](/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks/mdn-cascade.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we want you to make your changes by leveraging the order of cascade layers section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple.

Your final result should look like the image below:

![Barely visible yellow links on a white background.](/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks/mdn-cascade.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Images and form elements
==========================================

The aim of this skill test is to assess whether you understand how special elements like images, media and form elements are treated in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, you have an image that is overflowing the box. We want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped.

Your final result should look like the image below:

![An image in a box](/en-US/docs/Learn/CSS/Building_blocks/Images_tasks/mdn-images-object-fit.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, you have a simple form. Your task is to make the following changes:

* Use attribute selectors to target the search field and button inside `.myform`.
* Make the form field and button use the same text size as the rest of the form.
* Give the form field and button 10 px of padding.
* Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px.

Your final result should look like the image below:

![A single line form](/en-US/docs/Learn/CSS/Building_blocks/Images_tasks/mdn-images-form.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Sizing
========================

The aim of this skill test is to assess whether you understand the different ways of sizing items in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, you have two boxes. The first should be sized so that the height will be at least 100 pixels tall, even if there is less content that would cause it to grow to that height. However, the content should not overflow if there is more content than fits in 100 pixels. Test this box by removing the content from the HTML to make sure you still get a 100 pixel tall box even with no content.

The second box should be fixed at 100 pixels tall, so that content will overflow if there is too much.

![Two boxes one with overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks/mdn-sizing-height-min-height.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, you have a box, which contains another box. Your task is to make the inner box 60% of the width of the outer box. The value of the `box-sizing` property is set to `border-box`, which means that the total width includes any padding and border. You should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated.

Your final result should look like the image below:

![A box with another box nested inside](/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks/mdn-sizing-percentages.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, you have two images in boxes. One image is smaller than the box, the other is larger and breaking out of the box. If you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the small image does not stretch.

Your final result should look like the images below:

![Two boxes with images in](/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks/mdn-sizing-max-width.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: The box model
===============================

The aim of this skill test is to assess whether you understand the CSS box model.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, there are two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding declarations to the `.alternate` class, so that it matches the visual width of the first box.

Your final result should look like the image below:

![Two boxes of the same size](/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks/mdn-box-model1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, add to the box:

* A 5px, black, dotted border.
* A top margin of 20px.
* A right margin of 1em.
* A bottom margin of 40px.
* A left margin of 2em.
* Padding on all sides of 1em.

Your final result should look like the image below:

![A box with a dotted border](/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks/mdn-box-model2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, the inline element has a margin, padding and border. However, the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline?

Your final result should look like the image below:

![An inline box with space between it and the text around it.](/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks/mdn-box-model3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Overflow
==========================

The aim of this skill test is to assess whether you understand overflow in CSS and how to manage it.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, the content is overflowing the box because it has a fixed height. Keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. Test by removing some of the text from the HTML, that if there is only a small amount of text that does not overflow, no scrollbar appears.

![A small box with a border and a vertical scrollbar.](/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks/mdn-overflow1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, there is an image in the box that is bigger than the dimensions of the box so that it overflows visibly. Change it so that any image outside of the box is hidden.

Your final result should look like the image below:

![A box with an image which fills the box but does not spill out the edges.](/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks/mdn-overflow2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Values and units
==================================

The aim of this skill test is to assess whether you understand different types of values and units used in CSS properties.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, the first list item has been given a background color using a hex color code. Your task is to complete the CSS using the same color in different formats, plus a final list item where you should make the background semi-opaque.

* The second list item should use RGB color.
* The third should use HSL color.
* The fourth should use RGB color but with the alpha channel set to `0.6`.

You can find conversions for the hex color at this link. You need to figure out how to use the values in CSS. Your final result should look like the image below:

![Four list items. The first three with the same background color and the last with a lighter background.](/en-US/docs/Learn/CSS/Building_blocks/Values_tasks/mdn-value-color.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we want you to set the size of various items of text, as described below:

* The `<h1>` element should be 50 pixels.
* The `<h2>` element should be 2em.
* All `<p>` elements should be 16 pixels.
* A `<p>` element that is directly after an `<h1>` should be 120%.

Your final result should look like the image below:

![Some text at varying sizes.](/en-US/docs/Learn/CSS/Building_blocks/Values_tasks/mdn-value-length.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, we want you to move the background image so that it is centered horizontally and is 20% from the top of the box.

Your final result should look like the image below:

![A stat centered horizontally in a box and a short distance from the top of the box.](/en-US/docs/Learn/CSS/Building_blocks/Values_tasks/mdn-value-position.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Tables
========================

The aim of this skill test is to assess whether you understand how to style HTML tables in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task
----

In the lesson on styling tables we styled up a table in a rather garish manner. In this task, we are going to style the same table, but using some good practices for table design as outlined in the external article Web Typography: designing tables to be read not looked at.

Our finished table will look like the image below. There are a number of ways that you can achieve this, but we suggest you follow similar patterns as used in the tutorial to do the following things:

* Add padding of `0.3em` to the table headings and data and align them at the top of their cells.
* Align headings and data for columns containing numbers right.
* Align headings and data for columns containing text left.
* Add a 1px top and bottom solid border with the hex color `#999`, plus a 1px solid border of the same color above the footer.
* Remove the default spacing between the table elements borders to get the expected result.
* Stripe every odd row of the main table with the hex color `#eee`.

![A table with striped rows.](/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks/mdn-table-bands.png)

Try updating the live code below to recreate the finished example:

Additional question:

* What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings.

Download the starting point for this task to work in your own editor or in an online editor.
Styling a biography page
========================

* Previous
* Overview: First steps

With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS to add your own style to them. This assessment gives you a chance to do that.

|  |  |
| --- | --- |
| Prerequisites: | 
 Before attempting this assessment you should have already worked through
 all the articles in this module, and also have an understanding of HTML
 basics (study
 Introduction to HTML).
  |
| Objective: | To have a play with some CSS and test your new-found knowledge. |

Starting point
--------------

You can work in the live editor below, or you can download the starting point file to work with in your own editor. This is a single page containing both the HTML and the starting point CSS (in the head of the document). If you prefer you could move this CSS to a separate file and link to it when you create the example on your local computer.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Project brief
-------------

The following live example shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use.

* `font-family`
* `color`
* `border-bottom`
* `font-weight`
* `font-size`
* `font-style`
* `text-decoration`

In the interactive editor you will find some CSS already in place. This selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS:

1. Make the level one heading pink, using the CSS color keyword `hotpink`.
2. Give the heading a 10px dotted `border-bottom` which uses the CSS color keyword `purple`.
3. Make the level 2 heading italic.
4. Give the `ul` used for the contact details a `background-color` of `#eeeeee`, and a 5px solid purple `border`. Use some `padding` to push the content away from the border.
5. Make the links `green` on hover.
Hints and tips
--------------

* Use the W3C CSS Validator to catch unintended mistakes in your CSS — mistakes you might have otherwise missed — so that you can fix them.
* Afterwards try looking up some properties not mentioned on this page in the MDN CSS reference and get adventurous!
* Remember that there is no wrong answer here — at this stage in your learning you can afford to have a bit of fun.
Example
-------

You should end up with something like this image.

![Screenshot of how the example should look after completing the assessment.](/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

* Previous
* Overview: First steps
Test your skills: Positioning
=============================

The aim of this skill test is to assess whether you understand positioning in CSS using the CSS `position` property and values. You will be working through two small tasks that use different elements of the material you have just covered.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, we want you to position the item with a class of `target` to the top and right of the container, which has the 5px grey border.

Your final result should look like the image below:

![The green box is at the top right of a container with a grey border.](/en-US/docs/Learn/CSS/CSS_layout/Position_skills/position-task1.png)

Try updating the live code below to recreate the finished example:

Additional question:

* As an extra challenge, can you change the target to display underneath the text?

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, if you scroll the box in the example below, the sidebar scrolls with the content. Change it so that the sidebar stays in place and only the content scrolls.

![The content is scrolled but the sidebar has stayed in place.](/en-US/docs/Learn/CSS/CSS_layout/Position_skills/position-task2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Grid
======================

The aim of this skill test is to assess whether you understand how a grid and grid items behave. You will be working through several small tasks that use different elements of the material you have just covered.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, you should create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20-pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of `grid` and see how they behave by default.

Your final result should look like the image below:

![A three column grid with four items placed into it.](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills/grid-task1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each. The second item should overlay the first as in the image below:

![A box with two items inside one overlaying the other.](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills/grid-task2.png)

Try updating the live code below to recreate the finished example:

Additional question:

* Can you now cause the first item to display on top without changing the order of items in the source?

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, there are four direct children in this grid. The starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image below:

![Four items displayed in a grid.](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills/grid-task3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 4
------

In this task, you will need to use both grid layout and flexbox to recreate the example as seen in the image below. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this.

![Two rows of cards, each with an image and a set of tags.](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills/grid-task4.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Floats
========================

The aim of this skill test is to assess whether you understand floats in CSS using the `float` and `clear` properties and values as well as other methods for clearing floats. You will be working through three small tasks that use different elements of the material you have just covered.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, you need to float the two elements with a class of `float1` and `float2` left and right, respectively. The text should then appear between the two boxes, as in the image below:

![Two blocks displaying left and right of some text.](/en-US/docs/Learn/CSS/CSS_layout/Floats_skills/float-task1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, the element with a class of `float` should be floated left. Then we want the first line of text to display next to that element, but the following line of text (which has a class of `below`) to display underneath it.

Your final result should look like the image below:

![A box displayed to the left of a line of text, with some more text below.](/en-US/docs/Learn/CSS/CSS_layout/Floats_skills/float-task2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, we have a floated element. The box wrapping the float and text is displaying behind the float. Use the most up-to-date method available to cause the box background to extend to below the float, as in the image below:

![A block displayed to the right of some text both wrapped by a box with a background color.](/en-US/docs/Learn/CSS/CSS_layout/Floats_skills/float-task3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.