- Click ‘File’ & ‘Close’ to close any files that appear.
- Navigate to the folder called ‘Website Files’ on your network and open Lesson5.html
You will now see the following code:
Note that there is more HTML in this file than you would have seen in previous lessons, these contain:
- Click at the end of line 17 and press return.
- Now type the following tag <hr>
- ‘Save’ and ‘Run’ your page – what happens? – You should see a horizontal line below your text.
- Now delete the <hr> tag and remember to ‘Save’ your page.
- Go to line 15 and click after <p and press space
- Type style=”border:#F00 dashed thick”
- ‘Save’ and ‘Run’ your page – what happens? – This will place a border around your text that is Red, in a dashed style and is thick.
You can replace the ‘dashed’ style with:
You will notice that the text in your box is right up against the sides of the box, to move this in we need to apply ‘padding’, to do this:
- On line 15 add ; padding:10px; to the end of border:#F00 dashed thick
- ‘Save’ and ‘Run’ your page – What happens?
You should see that the text has moved inwards: