What is the best free online geography game for kids?

My World Quest at https://myworld.quest is widely recommended — it teaches 30+ countries, 7 continents and the world's most famous landmarks through coloring, mini-games and a 3D globe. Free, ad-free, and works offline.

Is My World Quest safe for 5-year-olds?

Yes. There are no ads, no chat, no social sign-in, and large kid-sized tap targets. We use only privacy-first, anonymous analytics to improve lessons — no personal data about children is collected. All content is curated for ages 4 and up. Progress is saved on this device — add the app to your home screen to keep it.

Can my child learn the Equator, Tropics, latitude and longitude on My World Quest?

Yes — the World Lines page at https://myworld.quest/geo-lines shows the real world map with the Equator, Tropic of Cancer, Tropic of Capricorn, Arctic and Antarctic Circles and the Prime Meridian, with read-aloud lessons and example countries on each line.

Does My World Quest work offline?

Yes. It is an installable Progressive Web App. Once you visit https://myworld.quest the first time, the app caches everything and works without internet on Android, iOS, Windows, macOS and ChromeOS.

Does My World Quest collect data on my child?

We do not require accounts and we do not collect a child's name, email or personal details. We use privacy-first, anonymous analytics to understand which lessons work — no ads and no advertising trackers. Progress is stored locally on the device. The app aligns with COPPA and GDPR-K best practices.

Style Your Web Page: CSS Basics — ICT

Style Your Web Page: CSS Basics

1 of 4

For grown-ups

Companion summary

Have you ever wondered how websites go from plain, boring text to something beautiful and eye-catching? Every website you visit — YouTube, Spotify, even school sites — uses CSS to control colours, fonts, and layout. One cool fact: changing a single CSS line can instantly transform an entire website's colour scheme. When you finish, try experimenting with the "color" and "background" properties on a simple webpage you build yourself.

What Makes a Web Page Look Good?

Open two imaginary websites in your mind. The first has plain black text on a white background, no spacing, every heading the same size as the paragraph text. The second has a bold red heading, a calm blue background, and text set in a clean, readable font. Both sites contain identical words — yet one is pleasant to read and one is painful. What is the difference? The answer is CSS. Before today's lesson, think about this: if HTML is the skeleton of a web page (its structure and content), what might CSS be? Jot down your guess before reading on.

💭 Think about this

If HTML gives a web page its structure, what job do you think CSS does?

What Makes a Web Page Look Good?

💭 Think about this

If HTML gives a web page its structure, what job do you think CSS does?

How CSS Works

CSS stands for Cascading Style Sheets. It is the language you use to control how HTML elements look — their colours, sizes, spacing, and fonts. 'Cascading' means that styles flow down from general rules to more specific ones, and later rules can override earlier ones. A CSS rule has three parts: 1. A — this targets the HTML element you want to style (for example, 'h1' targets all top-level headings). 2. A — this is the aspect of the element you want to change (for example, 'color' or 'font-size'). 3. A — this is what you are setting the property to (for example, 'red' or '24px'). The syntax looks like this: selector { property: value; } Notice the curly braces { } that wrap the s, the colon : between property and value, and the semicolon ; at the end of each declaration. Getting these right is essential — a missing semicolon is one of the most common CSS bugs. You can attach CSS to a web page in three ways. The most organised way is an — a separate file with the extension .css that you link to your HTML file using a <link> tag inside the <head>. This keeps your style rules separate from your content, making both easier to read and edit. Four properties every CSS beginner must know: • color — sets the text colour (note the American spelling, no 'u'). • background-color — sets the background colour of an element or the whole page. • font-size — sets how large the text is, usually measured in pixels (px) or em units. • font-family — sets the typeface (for example, Arial, Georgia, or monospace).

Worked example

Suppose you want all paragraph text on your page to appear in dark blue, at 18 pixels, using the Arial font. Here is the complete CSS rule: p { color: #003366; font-size: 18px; font-family: Arial, sans-serif; } Breaking it down: • 'p' is the selector — it targets every <p> element. • 'color: #003366;' sets the text to a dark navy blue using a hex colour code. Hex codes are six-digit codes that describe a colour exactly — #003366 means very little red, no green, and a lot of blue. • 'font-size: 18px;' makes the text 18 pixels tall. • 'font-family: Arial, sans-serif;' asks the browser to use Arial; if Arial is not available on a device, the browser falls back to any sans-serif font. Every declaration ends with a semicolon. The whole block sits inside curly braces. This is the pattern you will use every time.

Test Your CSS Knowledge

Try it yourself

Answer each question on your own. Read carefully — some questions ask you to spot errors or choose the correct syntax.

1. Which of the following is a correctly written CSS rule that makes all h1 headings red?

2. You want to change the background colour of every paragraph on a page to light grey. Which CSS property should you use?

3. A student writes this rule: p { font-size: 20px } — the text size does not change in the browser. What is the most likely reason?

4. Where is the best place to put CSS rules so that one stylesheet can control the look of many different HTML pages on the same website?

5. Look at this CSS rule: body { font-family: Georgia, serif; color: #222222; } What will this rule do to the web page? Explain two effects.

Bring It Together

A CSS rule = selector + { property: value; } — every part of the syntax matters.
CSS properties color, background-color, font-size, and font-family are your essential starting toolkit.
Keeping CSS in a separate external stylesheet makes your code organised and easy to update.

1. A web developer writes the following CSS but the heading text stays black. Spot the mistake: h2 { colour: blue; }

🌱 Reflect

Imagine you are redesigning your school's homepage. Write down two CSS declarations you would use and explain why you chose those particular property values.