Web pages: structure and style — Computing, 7–10
A web page has content and instructions about how that content should look. HTML gives it structure; CSS changes its appearance.
Idea
Think of a web page as a small document made for a browser. HTML says what each part is, such as a heading, paragraph, picture or link. CSS says how those parts should look, such as their colour, size and spacing. The two jobs work together but are not the same.
Why it exists
A page needs a clear structure so a browser, a screen reader and a person can understand its parts. It also needs a separate way to change its appearance without rewriting every sentence. Keeping structure and style apart makes pages easier to update, share and adapt to different screens.
Worked example
Suppose you want a page about your cat. Step 1: put the words “My cat Luna” in an HTML heading. Step 2: add a paragraph saying “Luna sleeps in the sun.” Step 3: add a picture and a link. Step 4: use CSS to make the heading dark blue and the paragraph larger. The content stayed the same; only its presentation changed.
A common trap
A reasonable mistake is using lots of spaces or repeated blank lines to push something into the right place. It may look correct on your screen, but another screen can have a different width, so everything shifts. CSS layout rules are better because they describe the relationship between parts instead of hiding the problem with spaces.
Outside school
Every time you read a news page, recipe, shop page or club site, a browser is arranging structured content and styling it for your screen. You can use the same ideas to make a simple page about a hobby, a class project or a local event. Good structure also helps people who use assistive technology.
Keep exploring
Other languages
Loading MyLeoNes™…