Three web layers: content, presentation, behaviour
Content layer -- enters content and creates the STRUCTURE of the page (text, images, headings, tables, links), in HTML. Presentation layer -- DISPLAYS and FORMATS those elements (colour, font, size, spacing, position), in CSS; it changes how content LOOKS, never what it IS. Behaviour layer -- a scripting language (usually JavaScript) that CONTROLS elements, making the page RESPOND to an event (click, typed value, load), e.g. validating a form before submit.
Separate linked files -- one edit updates every page
The three layers are normally SEPARATE files that are LINKED, not combined: an .html file, an external .css linked in the <head>, and an external .js. A site's many pages share ONE stylesheet and ONE script, so changing the house style or a form-validation rule means editing that ONE shared file once -- every linked page updates automatically and stays consistent. Each layer can also be edited or handed to a different specialist without touching the other two.
Where each layer lives -- inline, embedded, external
Content sits in the .html <body>. CSS can be applied three ways, most- to least-local: inline -- a style attribute on ONE element (highest precedence); embedded -- a <style> block in the <head>, affecting one page; external -- a linked .css file shared by every page that links to it. Behaviour sits in a <script> block or, preferably, an external .js file linked from the HTML -- the external form is preferred for site-wide consistency.
Drawn from real examiner reports.
Hover colour change is not behaviour
A change can be user-triggered without any script. A CSS :hover rule recolours an element on mouseover -- still the PRESENTATION layer, because only the display changed and no script ran logic. The deciding factor is not "the user did something" but whether a script controls something. Calling every mouse-triggered visual change "behaviour" loses marks meant for presentation.
Show/hide on a click is behaviour
Revealing or hiding content when a button is clicked is the BEHAVIOUR layer, not presentation -- a script runs logic that reacts to the event and controls what is shown. Do not label it "presentation" just because only what is visible changed: presentation (CSS) only formats existing content, whereas showing/hiding on an event needs a script to decide and act.
Do not format inside the content layer
Writing a style attribute on individual elements throughout the page still displays correctly, but it breaks the separation between content and presentation that examiners test for, and it destroys the site-wide-consistency benefit: the same formatting rule must now be repeated and separately maintained on every page. Keep formatting in ONE shared external stylesheet instead.
w23 P03 Q2-8
Inline style beats the stylesheet
An inline style attribute has the HIGHEST precedence of the CSS methods, so it OVERRIDES an external stylesheet on that element. Do not assume the external (main) stylesheet always wins. If some elements are styled inline and others rely on the shared sheet, formatting becomes inconsistent and hard to predict, because the inline rules silently win wherever they exist.
s23 P13 Q12
Content = what, presentation = how
Content is WHAT is on the page -- the actual text, image or structural element itself. Presentation is HOW that same content is displayed -- its colour, font, size, spacing or position. Presentation never ADDS or REMOVES content; it only restyles content that the content layer already placed on the page. Treating a restyle as "adding content" confuses the two layers.
The "which layer?" test
For a "which layer" question, ask in order: is it the actual text/image/structural element itself? -> content (HTML). Does it only change how something LOOKS, with no script? -> presentation (CSS). Does a script run logic reacting to an event? -> behaviour (JavaScript).
Name the layer AND its language
For full marks, give BOTH the layer and its technology -- "presentation layer, using CSS", not just "presentation" or just "CSS". A one-sided answer that names only the layer or only the language is a common way marks are lost on "which layer" questions.
"Why separate?" needs a because
If asked why the layers are kept separate, do not stop at "tidier" or "more organised". State the reason: every page LINKS to ONE shared stylesheet/script, so a single edit to that file updates every page automatically -- that propagation is the creditable point.
Full notes, flashcards, Q&A and the topic quiz for every premium subject.
Premium plans are US$8.99/month or US$49.99/year — first month free.
Studying with a parent's blessing? Show them this.
