Using your new knowledge

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

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 article gives you a chance to do that.

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and CSS basics (see the rest of this module)
Objective: To have a play with some CSS and test your new-found knowledge.

Let's play with some 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.

Try using CSS to change how this biography looks by changing the values of the properties I have used, removing some rules, or adding your own. Then try looking up some properties not mentioned on this page in the MDN CSS reference and get adventurous!

For example you could:

  • Change the colors.
  • Change the size of the headings.
  • Style the ul and change the way the list of contact details displays.
  • Add some exciting backgrounds and borders to some of the elements.
  • Animate some parts of the HTML when they are hovered over (colors and sizes are obvious candidates for animation.)
  • Add gradients or shadows.

Remember that there is no wrong answer here — at this stage in your learning you can afford to have a bit of fun.

 

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