project: Introducing CSS

Earlier on in this challenge, we mentioned that CSS can be used to give your HTML style.

Here is a great tutorial on CSS. You won’t need to know the whole thing right now. Just read up until the end of “How To”. We have also created a basic video walkthrough for you here

Project instructions

1. Create a CSS file

Create a CSS file in your repo and reference it in each of your HTML files by making use of a <link/> element. This page will tell you how.

  • Your link element should be inside the head of your page.
  • Your CSS file name should not have any spaces in it.

This is an example of a bad(invalid file name): my styles.css

This is an example of a good(valid) file name: my_styles.css

2. Add some styles to your CSS file

Here are the requirements:

  • Set the background color of part of your web page. You can see the different ways to change a background here. Make sure you use the appropriate property to change the background color
  • Change the color of some text. Take a look here if you are not sure how
  • Change the style of h1 elements so that they stand out more. You might want to change their size or font, or something else

Make sure that the CSS styles are being applied when you view your website.

3. Check your work

There are 2 different things you should do here:

  1. Go to this website and validate your CSS.
  2. Upload your latest changes to GitHub and make sure your page looks how you expect it to look.

4. Submit your work

Once you are happy with your work, upload your latest changes to GitHub and submit a link to your GitHub page in the usual way.

RAW CONTENT URL