Lesson 4Styling pages

Knox badge

In this lesson, you are going to be styling parts of a webpage. 


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:

<!DOCTYPE html>
<body style="background-color : orange;">
<h1>Orange page</h1>

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:

<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
  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 --


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

Added CSS styles to page
Added JavaScript code to the page

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

Added the Accessibility features
Filters added

Purple filter added

Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

First trial of DragonDocs in teaching

Added the Task, Starter, Review your learning sections

Added the feedback feature
Added the Dark Mode toggle

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

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

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

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

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

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

-- DragonDocs version 2.0 (Kilimanjaro) --

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

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

-- DragonDocs version 2.1 (Aurora) --

Added the active class to active links in the bottom section

Added the image upload feature

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

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

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

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

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