Filters

Other

Lesson 4Styling pages

Knox badge

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.

Monkeys page on Replit.com
  1. Insert a heading where it says <!--Put your heading here-->.
  2. 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.
  3. The picture of the monkey is far to big. Resize it by adjusting just the width of the image.
  4. 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.'.
  5. Change the colour of the second paragraph from lightblue to a colour of your choice.
  6. Make the words intelligent and intelligence bold throughout the webpage.
  7. 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. 
  8. Change the background colour of the page to a colour of your choice.
S2 Web Development Lessons
Provide Feedback

What did you think of this document?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number