!
In this lesson, you are going to be styling parts of a webpage.
HTML
So far we have already covered quite a few HTML tags:
| Tag | Description |
|---|---|
<p> |
Insert a paragraph |
<h1> |
Inserts the biggest heading |
<img src="image1.jpg"> |
Inserts an image of image1.jpg |
<a href="page2.html"> |
Inserts a link to page2.html |
<br> |
Inserts a line break |
<strong>This is bold</strong> |
Embolded the words 'This is bold' |
Using inline styles
You have already come across pages that have been styled for you (think back to the orange, red, green and blue pages - they all had a background colour set on them).
In this lesson, we'll be focusing on using what is called inline styling using a language called CSS.
You have already seen the following code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Orange</title>
</head>
<body style="background-color : orange;">
<h1>Orange page</h1>
</body>
</html>
As you can see in the body there is a bit that reads style="background-color : orange;". This is how we style our content on our page.
So if we wanted to change the colour of a paragraph we would use the following code:
HTML
<p style="color: green;">This text is green</p>
Notice the word colour is spelled as color (the American spelling).
We can use the following styles to style our page:
| Code | Description |
|---|---|
color : green; |
Changes the colour of the text to green |
background-color : orange; |
Changes the background colour of the element to orange |
width : 200px; |
Changes the width of the element (useful for images) to 200 pixels |
height : 200px; |
Changes the height of the element (useful for images) to 200 pixels |
text-align : center; |
Centers the text |
text-align : left; |
Left aligns the text |
font-family : 'Arial'; |
Changes the font to Arial. Remember the single quote marks! |
font-size : 25px; |
Changes the font size to 25 pixels |
We can also combine different styles by writing them one after the other:
<p style="color : green; font-family : Arial;">This is a paragraph of text</p>
The Monkeys page
For this task, you may need to look up how to write it, for example to make text bold in HTML or to change the background colour of the whole page.
You might find W3 Schools useful for this.
This task is set on Replit.
Today's task is all about styling the page about monkeys.
You will need to follow the instructions below to complete this task.
- Insert a heading where it says
<!--Put your heading here-->. - Find a picture of a monkey and upload it to Replit. Update the code where there is an empty
<img>tag so that it has your new image. - The picture of the monkey is far to big. Resize it by adjusting just the
widthof the image. - Find the paragraph which contains the following text:
Monkeys are known for their playful behavior, and they often live in social groups called troops. They use tools, communicate through various sounds and gestures, and have complex social structures.
This paragraph is too long. Split it up with a break (<br>) after 'troops.'. - Change the colour of the second paragraph from
lightblueto a colour of your choice. - Make the words intelligent and intelligence bold throughout the webpage.
- Find a picture of a zoo and upload it. After the final paragraph and before the closing body tag (
</body>) insert an<img>tag and set it to your image. - Change the background colour of the page to a colour of your choice.