Using Basic Styles | Lesson 6 | Bite-Size

Lesson 6

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.

My name is...XXX Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis, mi ac tincidunt pulvinar, enim arcu hendrerit arcu, sit amet mollis arcu est et mauris. Phasellus convallis scelerisque est vitae venenatis. Integer convallis elementum metus vel dignissim. In in neque a felis placerat venenatis. Sed urna purus, consectetur a cursus ut, dignissim vel elit. Ut massa arcu, semper quis rhoncus vitae, ultricies a nisi. Proin ac erat orci, vel consequat arcu. Vivamus augue dolor, laoreet molestie pharetra in, elementum et mi.

You can replace the ‘dashed’ style with:

Dotted
Double
Inset
Groove
Hidden

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:

Take me to lesson 7 'Creating Lists'