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.|
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.
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.
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:
- Make the level one heading pink, using the CSS color keyword
- Give the heading a 10px dotted
border-bottomwhich uses the CSS color keyword
- Make the level 2 heading italic.
- Give the
ulused for the contact details a
#eeeeee, and a 5px solid purple
border. Use some
paddingto push the content away from the border.
- Make the links
- 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.