Style

The webpage is now looking nice and colourful but the text is still very plain​

This lesson will look at how to change the font and size of your text and also demonstrate how to move text to the middle of the page.

Just like last lesson when adding colour, we are editing existing tags to add rules about how to look, not writing new ones.

To add a particular font to our paragraph or heading you need to add a new style rule into the tag.​

The font rule looks like this: font-family:comic sans​

Because we will already have a rule to set the colour, you will need to be careful when you add this in.​

Your paragraph tag will go from <p style = “color:blue” to:​

<p style = “color:blue ; font-family:comic sans”>​

(notice the semi-colon between the two rules that separates them)

​

There are a list of fonts that you can use here: https://www.w3schools.com/css/css_font.asp

To change the font size of text you would add another rule to the tag​

This one is font-size:40px ​

The number is the size, so the bigger the number the bigger the text​

​

To add this to the paragraph tag you would use another semi-colon and end up with something like this:​

<p style="color:blue; font-family:comic sans; font-size:40px">

To move anything on the page to the middle you would use the <center> tag (again, note the American spelling)​

You can add <center> and </center> around any text on your page and it will move whatever is between those tags into the middle of the page