Skip to Content

CSS Project

To complete the CSS section of your tech prep work, you will need to style the HTML page you created in the HTML project. If you were unable to complete that project, the starter code below has been provided for you.

The website does not need to look perfect, but you should be able to demonstrate your understanding of the CSS concepts you have learned so far.

Requirements

There are no strict requirements for what your final page should look like, but here are some guidelines and suggestions to get you started:

  1. Give the <body> a background-color.
  2. Use a type selector to target the <h1> element. Center the text and give it a color.
  3. Give the <img> a border and use margin to give it some space.
  4. Use a type selector to target all <h2> elements and change their color.
  5. Use an ID selector to target the #description div. Give it a padding and a border.
  6. Use a class selector to target the .ingredients-section. Give it a background-color and padding.
  7. Target the <li> elements within the .ingredients-section and change their color.
  8. Target the <a> elements and change their color. Try to remove the underline as well.
  9. Experiment with different font-family values for your headings and paragraphs.
  10. Use the descendant combinator to target the <ul> inside the #more-recipes div and remove the bullet points.

Feel free to get creative! The requirements above are just a starting point. The goal is to practice using the CSS properties and selectors you’ve learned about.

⚠️

IMPORTANT - SAVE YOUR WORK

You may choose to complete this project using the code editor below or in your own editor of choice, however you must save your work somewhere permanent (either locally as a file on your computer or on GitHub in a repository) for later reference.

The editor below currently does not have a save feature, so be careful when navigating away from or reloading the page. We recommend using a local editor to complete the project; the editor below is only provided for convenience.

Example Solution

Here is an example of what a completed project could look like.

Remember, there is no single “correct” way to style this page. Use this as inspiration!

Starter Code

Loading...
Block and Inline ElementsVariables and Operators