TK Study
HomeLearn step by stepHow to answerMemoriseKey termsFlashcardsNotesMaster answersPast questionsMultiple choiceMock examPractice & marker

Software Engineering › How to answer › CSS and HTML questions

How to answer CSS and HTML questions

CSS questions are short (1 to 2 marks): read the code, match each selector to an element, and find what applies. From NESA material

What it looks like in the real exam

From NESA material 2025 HSC 2025 HSC exam, Q7 (1 mark, objective): a CSS code fragment; the answer is “Blue background, white text, border around the heading” (the code image is not published as text). 2025 sample 2025 NESA sample exam, Q16A (1 mark, multiple choice): why a style is not applied (id v class). 2025 sample 2025 NESA sample exam, Q16B (2 marks, short answer): outline TWO benefits of adding CSS.

The syntax and selectors

selector {
    property: value;
    property: value;
}
SelectorMatchesExample
pevery element of that tagp {color:red;}
.noteevery element with class="note".note {color:blue;}
#introthe one element with id="intro"#intro {color:green;}

From NESA material Core rule from the 2025 sample: a dot selects a class and a hash selects an id. If the HTML says id="qe_item" but the CSS says .qe_item, the rule never applies. From course notes General advice If several rules match, the more specific wins: id beats class beats tag.

PropertyWhat it does
colortext colour
background-colorbackground colour
font-family, font-sizetypeface and size
font-weight: bold, font-style: italicbold, italics
text-alignleft, centre, right
bordera line around the element (for example 1px solid black)
margin, paddingspace outside / inside the border

General advice Properties and values above are standard CSS. The linking line in HTML is <link rel="stylesheet" href="main.css">, and an error in that path means “main.css has not been correctly referenced”.

Method

  1. Read the question and note what it asks (cause of a problem, what the page looks like, benefits). General advice
  2. Read the HTML: find the element (tag, id, class) the question is about. From course notes
  3. Read each CSS rule and match its selector to that element: tag name, . for class, # for id. Cross out rules that don’t match. From course notes
  4. Apply what is left: if two rules set the same property, id beats class beats tag. General advice
  5. Describe the result property by property (colour, background, border). General advice
  6. Check spelling and punctuation: a missing dot, hash, colon or semicolon is often the “bug”. General advice

Worked examples

2025 NESA sample exam, Q16A · 1 mark

A developer added a CSS to their company's website. The developer expected the word "Software" to be bold and italics but it looks like regular text. index.html contains <p><span id="qe_item">Software</span> includes code.</p>; main.css contains body {font-family: Arial;}, h1 {font-weight: bold; text-align: center;} and .qe_item {font-style: italic; font-weight: bold;}. Referring to the code, what is the cause of the problem? Font family is missing / Attribute of <span> has not been defined / main.css has not been correctly referenced / The id qe_item has not been correctly referenced

Official marking criteria

  • 1 mark: Identifies the correct answer.

NESA marking guideline answer

The id qe_item has not been correctly referenced. (The HTML uses id="qe_item" but the CSS selector is .qe_item, which targets a CLASS. An id selector is #qe_item.)

Notes

FLAG: the NESA MG prints the answer as 'The id "se_item" ...' while the question printout says "qe_item". This is an official inconsistency; the option is the 'id ... not correctly referenced' one. Fix: use class="qe_item" in the HTML or #qe_item in the CSS.

Open this question page

sample-q16a

index.html contains <p><span id="qe_item">Software</span> includes code.</p>. main.css contains body {font-family: Arial;} h1 {font-weight: bold; text-align: center;} .qe_item {font-style: italic; font-weight: bold;}. The developer expected 'Software' to be bold and italic but it looks like regular text. Referring to the code, what is the cause of the problem?
  1. Font family is missing
  2. Attribute of <span> has not been defined
  3. main.css has not been correctly referenced
  4. The id qe_item has not been correctly referenced

Answer: D (The id qe_item has not been correctly referenced)

The HTML uses an id but the CSS selector .qe_item targets a CLASS (an id selector is #qe_item). Official flag: the NESA MG prints se_item vs qe_item in the question.

From NESA material Why: .qe_item is a class selector; the span has an id. The fix is #qe_item in the CSS or class="qe_item" in the HTML.

2025 NESA sample exam, Q16B · 2 marks

Outline TWO benefits of adding CSS to the company's website. (2 marks)

Official marking criteria

  • 2 marks: Outlines TWO benefits.
  • 1 mark: Some relevant information.

NESA sample answer

It can provide the same look and feel across the company's websites for consistency and ease of use. Separate html and CSS code can allow developers to work independently on files.

Open this question page

Reasoned For a 2-mark “outline TWO” answer, write two separate sentences, each naming a benefit and a short reason (consistency across pages; developers can work on structure and style separately; one change updates every page).

2025 HSC exam, Q7 · 1 mark

[Exact question wording is not published as a paper (online exam). Task as shown by the NESA marking guidelines/mapping grid: a CSS code fragment (the question showed code; the code is not extractable)]

Official marking criteria

  • 1 mark: Identifies the correct answer.

NESA sample answer

Blue background, white text, border around the heading

Open this question page · some of the NESA wording or answer is an image or is unpublished, as noted

Original practice Original example in the same style. For h1 {color: white; background-color: blue; border: 2px solid black;} the heading is white text on a blue background with a black border.

Common mistakes

  • From NESA material Confusing id and class selectors (the sample Q16 trap).
  • General advice Choosing an option about the font when the problem is the selector.
  • General advice Missing the semicolon or the closing brace.
  • General advice Writing a vague benefit (“it looks better”) instead of consistency or maintenance.

Time per mark

Derived 140 minutes ÷ 80 marks = 1.75 minutes per mark, so 1 marks ≈ 1.8 minutes.

General advice Objective CSS item: under 2 minutes. 2-mark short answer: 3 to 4 minutes.

Practice (4 items, with answers)

Original practice item

Original practice

An HTML element has id="intro" and class="note". The CSS has p {color:red;} .note {color:blue;} #intro {color:green;}. What colour is the text?
  1. Red
  2. Green
  3. Black
  4. Blue
Show the answer

Answer: B (Green)

Original practice item

Original practice

What is the main advantage of using one external CSS file for a whole website?
  1. It encrypts the pages
  2. The pages no longer need HTML
  3. Consistent appearance and easy maintenance because a change is made in one place
  4. The website loads without a server
Show the answer

Answer: C (Consistent appearance and easy maintenance because a change is made in one place)

Original practice item

Original practice

Which CSS selector targets all elements with class="warning"?
  1. warning
  2. *warning
  3. .warning
  4. #warning
Show the answer

Answer: C (.warning)

Item 4 · write the rule

Write a CSS rule that makes every <p> that has class “alert” red and bold.

Show the answer
.alert {
    color: red;
    font-weight: bold;
}

Original practice Class selector (dot), then property and value pairs ending in semicolons.

← How to draw a network or system diagramOnline exam tips: reading time, order of attack and time per mark →