Lesson 3 - Styling Text

Learning outcomes

ASPIRE: To be able to apply color and font-size changes to headings

CHALLENGE: To be able to modify text to change the colour

TASK 1 - STYLING YOUR HEADINGS

You have already used the <h1> This is a heading </h1> tags to display a heading or title on a page. These are fine, but they look a little bit boring! You are going to be styling these headings so that they look a bit more interesting:

First we are going to change the colour of text:

Notice - HTML uses the American spelling of color

<h1> This is a heading </h1>

<h1 style="color:blue;"> This is a nicer heading </h1>

Edit the code below so that your 'nicer' heading displays in a colour of your choice.

TASK 2 - changing the size

Sometimes we want our headings to be displayed a bit bigger. To do this, we can change our code like the example below.

<h1 style="font-size:300%;">This is a really really really big heading</h1>

<h1 style="font-size:250%;">This is a really really big heading</h1>

<h1 style="font-size:200%;">This is a really big heading</h1>

<h1 style="font-size:150%;">This is a big heading</h1>

To make our headings bigger, we can say how many percent (%) bigger we would like to make them by changing the font-size.

Using the font-size skill above, edit the headings below so that they start big and get smaller. You can choose the percentages you use. Test out different percentages until you are happy that you can use this skill on a web page.

Extension:

Click here to visit the w3schools website and experiment with other style changes that you can add. Use the HTML playground on the homepage or the task above to experiment.

task 3 - changing the colour & size, at the same time!

You have changed the colour and you have changed the size of headings. This time, you are going to change both at the same time.

You can join together color and font-size to make more than one change at the same time.

<h1 style="color:green; font-size: 200%;"> This is big and green, like the Hulk. </h1>

The part that we have added to our <h1> tag is:

style="color:green; font-size: 200%;"

You can change these to make different sizes and different colours.

You can also use Hexadecimal colors for your styles. Here are some nice ones you could choose to use:

Using your new knowledge of changing the size and color of headings, complete the task below.

task 4 - Banana milkshake perfection

Our banana milkshake example from the previous lesson could look better. You now need to edit the headings so that our recipe has some colour added to the headings. You can choose the colour and size of the headings.

EXTENSION TASKS:

Use a hex color, rather than writing the color name.
Make the bullet point list a colour of your choice.

task 5 - FACEBOOK FACTS

Using the examples above and your skills, you need to replicate the webpage shown to the right.

This web page should be in a folder called 'Facebook Webpage' and the page should be named index.html

The website has the following requirements:

The Facebook Facts heading should be the largest heading with a 300% font-size and colour blue
The image should be 200px wide by 400px high and use the following URL: https://i0.wp.com/news.harvard.edu/wp-content/uploads/2017/03/mark-zuckerberg-headshot-11.jpg?resize=605%2C403&ssl=1
Facts about Facebook should be the third biggest heading
The list should be an ordered list

Report abuse