Exercise

We are now going to take what we have learned about CSS so far and put it into practice to create a rounded profile image for use on our websites:

  1. Create a new div with the id of ‘profile-Image’.
  2. Open your CSS file in your text editor.
  3. Create a new CSS rule for your div.
  4. Give the div a height and width of 200px.
  5. Set the background colour to white.
  6. Set the background image to the profile-icon.png image in the images folder.
  7. Set the background image to appear in the centre and to not repeat.
  8. Give the div a solid 3px wide border in the hex colour #cccccc.
  9. Round all of the corners of the div to 50 per cent.

You should have ended up with a profile image inside a circle with a border. This is a clean way of showing a profile image on a website. Your final output should like Figure 5.14.

5.14 image

Congratulations on getting through the borders section. It’s not as easy as it sounded, right? CSS can be deceptively difficult at times, but do stick with it. It all becomes second nature in no time at all, and your commitment will be rewarded as you start to notice your speed of development increase with every mistake you make, from which you learn more every time.

Margins

We know at this point that a margin is the space that surrounds our element, but what exactly does that mean? Well, a margin is the amount of space that is reserved around your element. It is a way of saying ‘make sure no other element comes this close to me’. It helps us to structure our content and give space to our elements. Margins flow all around our element, top, bottom, left and right, the same values we saw on the border properties. They behave in a somewhat similar way, with some good old CSS quirks in there for good measure, of course.`

The margin property doesn’t have all of the related properties that border does; there’s no ‘margin-color’ or margin-style’ to contend with. Just the margin location properties for each side. They are as follows: margin-left, margin-right, margin-top, margin-bottom.

All of these properties can be set with length units (px, em, etc) or percentages. You can also set the property to ‘auto’, which is the default (more on that later).

The property is nice and simple to use. Just choose a side you want other elements to stay well clear of, and tell them how far away they need to be. In the below example we are stating that any element which comes close to the right side of the div must be at least 20px away: