MskProdComputing

Year 8 · Y8.6 Web Development · Lesson 2

Stretch tasks CSS: style

Task 1

Quiz Challenge

A quiz game against four computer players, then short and long written answers.

  1. Quiz Blitz12 questions against the clock
  2. Quick Fire4 short answers
  3. Big Think2 long answers

About 20 minutes

Task 2

This or That

Pixel the cat asks 8 questions. Each has two answers: pick the right one.

  • Two answers to every question
  • A fish treat for every right answer
  • Streaks win Pixel shades, then a party hat

About 4 minutes

Task 3

Memory Match

Flip the cards two at a time to match each CSS card to its meaning card.

  • 12 cards: each CSS has a meaning
  • One peek at every card
  • Combo points for pairs found in a row

6 pairs, about 4 minutes

The games need JavaScript. Every question is below, with the answers at the end.

Read the lesson: CSS: style

CSS: style: the questions

Quiz Challenge, round 1: Quiz Blitz

  1. Which selector styles every element with class="warning"?

    • warning
    • *warning
    • .warning
    • #warning

  2. Which selector styles the single element with id="logo"?

    • .logo
    • logo
    • @logo
    • #logo

  3. An id can be used on many elements on the same page.

    • True
    • False

  4. What is the difference between margin and padding?

    • Margin sets colour; padding sets size
    • Margin is space outside an element; padding is space inside it
    • Margin is space inside an element; padding is space outside it
    • They are two names for the same thing

  5. What colour is the text <p class="note">Hi</p>?

    p { color: blue; }
.note { color: red; }
    • Black
    • Purple
    • Red
    • Blue

  6. Why is an external stylesheet usually the best choice?

    • It makes images smaller
    • Browsers only read external CSS
    • One file can style every page of the site
    • It loads before the HTML

  7. Which TWO are valid ways to add CSS to a page?

    Tick 2.

    • A <css> tag in the body
    • Writing CSS inside an image's alt text
    • Typing CSS into the page title
    • A <style> tag in the head
    • A linked .css file

  8. Which CSS property changes the colour of text? Type it exactly.

  9. Which rule centres the text in every h1?

    • h1 { center: text; }
    • <h1 center>
    • h1 { text-align: center; }
    • h1 { align: middle; }

  10. Inline CSS, a style attribute on one tag, is the easiest CSS to reuse across a website.

    • True
    • False

  11. Put the parts of the rule p { color: red; } in the order they are written.

    Number these 1 to 5.

    • The opening brace: {
    • The property: color
    • The value: red
    • The closing brace: }
    • The selector: p

  12. A site has 100 pages that all use one external stylesheet. The school changes its brand colour. How many files need editing?

    • 1
    • 100
    • 101
    • 50

Quiz Challenge, round 2: Quick Fire

  1. When should you use a class instead of an id? [2 marks]

  2. Explain why inline CSS should be avoided. [2 marks]

  3. What will this CSS do? [2 marks]

    .highlight {
  background-color: yellow;
  padding: 10px;
}

  4. In the rule h1 { color: teal; }, explain what the selector, the property and the value each do. [3 marks]

Quiz Challenge, round 3: Big Think

  1. A school website has 50 pages. Every page has its colours and fonts written inside its own style tag. Explain the problems this causes, and a better approach. [4 marks]

  2. Compare internal, external and inline CSS. Which would you use for a ten-page website, and why? [6 marks]

This or That: tick the right answer

  1. What does CSS stand for?

    • Cascading Style Sheets
    • Computer Style Settings

  2. Which selector styles both <p class="tip"> and <li class="tip">?

    • .tip
    • #tip

  3. You want space inside a button, between its text and its border. Which property?

    • padding
    • margin

  4. Which property makes text bold?

    • font-weight
    • font-size

  5. What does this rule change?

    h1 { color: #03969d; }
    • The background behind every h1
    • The colour of the text in every h1

  6. Where does the link to an external stylesheet go?

    • At the end of the CSS file
    • In the head of each page

  7. Which way of adding CSS mixes structure with style and should be avoided?

    • External, in a .css file
    • Inline, with a style attribute

  8. A page has exactly one logo. Which selector fits it best?

    • An id, such as #logo
    • A class, such as .logo

Memory Match: match each CSS to its meaning

CSSMeaning
A color1 The one element with that id
B background-color2 Sets the colour of the text
C margin3 Space inside the border
D padding4 Fills the area behind the content
E .highlight5 Space outside the border
F #header6 Every element with that class
Answers

Round 1: Quiz Blitz

  1. .warning A full stop selects a class. A hash selects an id.
  2. #logo The hash selects an id, which should belong to exactly one element.
  3. False An id must be unique on a page. For a style shared by many elements, use a class.
  4. Margin is space outside an element; padding is space inside it Padding pushes the content away from the border; margin pushes other elements away.
  5. Red A class selector is more specific than an element selector, so .note wins.
  6. One file can style every page of the site Change one file and every linked page updates.
  7. A <style> tag in the head; A linked .css file CSS can be external (a linked file), internal (a style tag) or inline (a style attribute). There is no css tag.
  8. color CSS uses the American spelling, color. colour is ignored by the browser.
  9. h1 { text-align: center; } text-align: center; is the property and value for centring text.
  10. False Inline CSS applies to one element only, so it has to be repeated everywhere. It is the hardest to reuse.
  11. The selector: p → The opening brace: { → The property: color → The value: red → The closing brace: } Selector, then braces around one or more property: value; pairs.
  12. 1 Only the stylesheet. That is the whole point of keeping style separate from structure.

Round 2: Quick Fire

    • Use a class when several elements share the same style
    • An id is only for one unique element
    Model answer

    Use a class when several elements share the same style, because a class can be used many times. An id identifies one unique element and can only be used once on a page.

    • It mixes structure with style
    • It cannot be reused, so it must be repeated on every tag and is hard to update
    Model answer

    Inline CSS mixes structure with style inside the HTML. It also cannot be reused, so it has to be repeated on every tag, which makes the site hard to update.

    • Elements with class highlight get a yellow background
    • 10 pixels of space are added inside them, around the content
    Model answer

    Every element with class="highlight" gets a yellow background, with 10 pixels of space inside it, around the content.

    • The selector, h1, chooses which elements are styled
    • The property, color, is the feature being changed
    • The value, teal, is what it is set to
    Model answer

    The selector, h1, chooses which elements are styled: every h1. The property, color, is the feature being changed: the text colour. The value, teal, is what it is set to.

Round 3: Big Think

    • Changing the design means editing every page, one at a time
    • Pages can end up inconsistent, because one gets missed
    • Use one external stylesheet linked from every page
    • Then one change updates every page, keeping the site consistent
    • The browser caches the CSS file, so pages load faster
    Model answer

    Changing the school's colours or fonts would mean editing all 50 pages one at a time, which is slow and time consuming, and it is easy to miss one so the pages end up inconsistent. A better approach is one external stylesheet, a .css file linked from every page. Then one change to that file updates every page at once, keeping the whole site consistent, and the browser caches the file so pages load faster.

    • External CSS is a separate .css file linked from the head
    • One external file styles every page
    • Internal CSS sits in a style tag in the head and only affects that page
    • Inline CSS is a style attribute on a single tag
    • Inline CSS mixes structure and style and cannot be reused
    • A justified choice: external, because one change updates all ten pages
    • It keeps the look consistent and the file is cached
    Model answer

    External CSS is a separate .css file linked from the head of each page, so one file styles every page. Internal CSS sits inside a style tag in the head and only affects that page. Inline CSS is a style attribute on a single tag, which mixes structure and style and cannot be reused. For a ten-page website I would use external because one change to the stylesheet updates all ten pages at once, the site stays consistent, and the browser caches the file so pages load faster.

This or That

  1. Cascading Style Sheets CSS is Cascading Style Sheets: the rules that control how a page looks.
  2. .tip A dot selects every element with that class, whatever its tag. A hash selects the one element with that id.
  3. padding Padding is space inside the border. Margin is space outside it, pushing other elements away.
  4. font-weight font-weight sets how thick the letters are. font-size sets how big they are.
  5. The colour of the text in every h1 color sets the text colour. The background has its own property, background-color.
  6. In the head of each page Each HTML page attaches the stylesheet with a link tag in its head.
  7. Inline, with a style attribute Inline CSS sits on a single tag, so it cannot be reused and clutters the HTML.
  8. An id, such as #logo Use an id for the one element of its kind, and a class for a style that several elements share.

Memory Match

  • A 2 color: Sets the colour of the text
  • B 4 background-color: Fills the area behind the content
  • C 5 margin: Space outside the border
  • D 3 padding: Space inside the border
  • E 6 .highlight: Every element with that class
  • F 1 #header: The one element with that id