Using your new knowledge

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 worked through the rest of the CSS basics 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 to work with in your own editor. This is a single page with the HTML, plus the starting point CSS in the head of the document. If you prefer you could move this CSS to a separate file when you create the example on your local computer. Alternatively use an online tool such as CodePenjsFiddle, or Glitch to work on the tasks.

Note: If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

Working with CSS

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

I have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that.

Use CSS to change how this biography looks by changing the values of the properties I have used.

  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.

You should end up with something like this image.

Screenshot of how the example should look after completing the assessment.

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.

 

Assessment or further help

If you would like your work assessed, or are stuck and want to ask for help:

  1. Put your work into an online shareable editor such as CodePenjsFiddle, or Glitch.
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include:
    • A descriptive title such as "Assessment wanted for CSS First Steps".
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
    • A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    • A link to this assessment page, so we can find the question you want help with.

What's next?

Congratulations on finishing this first module. You should now have a good general understanding of CSS, and be able to understand much of what is happening in a stylesheet. In the next module, CSS building blocks, we will go on to look at a number of key areas in depth.

In this module

  1. What is CSS?
  2. Getting started with CSS
  3. How CSS is structured
  4. How CSS works
  5. Using your new knowledge