Visual communication element: line

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which describes a line as a visual communication element?

A A mark that connects points and can guide the eye, divide space or show structure

B A flat area filled with a single colour that has no edges

2. A designer wants to separate a dashboard's header from its charts. Which line use fits best?

A A random curved line placed behind the title

B A thin horizontal divider between the header and the charts

3. Which statement about line thickness is correct?

A A thick line stands out and draws more attention than a thin line

B A thick line and a thin line always have the same visual weight

4. A line chart uses a line to show how sales change over a year. Which role is the line playing?

A Guiding the eye from one data point to the next

B Adding texture to the background

5. Which is true about curved lines in a visualisation?

A They can only be used as borders around a page

B They can feel softer and more flowing than straight lines

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1border: 2px solid black;		ADraws a thick straight line around an element to mark its edge and separate it from other content
2<hr>		BThe hr tag only makes a straight horizontal divider, so it cannot show a curved trend. A curved line needs a line chart or an SVG path instead.
3A thin line can be used to subtly divide space without drawing too much attention		CDraws a horizontal divider line that splits a page into separate sections
4A thick line stands out and directs attention to the most important part of a design		Dborder-left: 8px solid red;
5border: solid;		Eborder-bottom: 1px solid lightgrey;
6<hr> inside a chart to show a curved trend		FNo width or colour is given, so the line's thickness and look are left to browser defaults and may not guide the eye as planned. Add a width and colour such as 2px and black.

Definitions

line

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.box { border: 2px _____ black; }

hr { border-width: ____; }

.card { border-______: 12px; }

<p>Menu</p> <__> <p>Contact</p>

.alert { border-____: 6px solid red; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .card {

B padding: 10px;

C border-radius: 8px;

D border: 2px sold #333;

E }

Question 2

A hr {

B border: none;

C border-top: 1px line #999;

D margin: 16px 0;

E }

Question 3

A h1 {

B border-bottom: 6 solid;

C padding-bottom: 4px;

D }

Question 4

A table {

B border-collapse: collapse;

C border 1px solid #ccc;

D }

Question 5

A <svg width="100" height="50">

B <path d="M0 25 Q50 0 100 25"

C stroke="none" fill="none"/>

D </svg>

Answer Key

Visual communication element: line

Section A: Quick Questions

A — A mark that connects points and can guide the eye, divide space or show structure

B — A thin horizontal divider between the header and the charts

A — A thick line stands out and draws more attention than a thin line

A — Guiding the eye from one data point to the next

B — They can feel softer and more flowing than straight lines

Section B: Match the Pairs

border: 2px solid black; → Draws a thick straight line around an element to mark its edge and separate it from other content

<hr> → Draws a horizontal divider line that splits a page into separate sections

A thin line can be used to subtly divide space without drawing too much attention → border-bottom: 1px solid lightgrey;

A thick line stands out and directs attention to the most important part of a design → border-left: 8px solid red;

border: solid; → No width or colour is given, so the line's thickness and look are left to browser defaults and may not guide the eye as planned. Add a width and colour such as 2px and black.

<hr> inside a chart to show a curved trend → The hr tag only makes a straight horizontal divider, so it cannot show a curved trend. A curved line needs a line chart or an SVG path instead.

Section C: Definitions

line — A mark that connects points. It guides the eye, divides space or shows structure, and can be straight, curved, thick or thin, as in borders and dividers.

Section D: Fill in the Blanks

.box {
  border: 2px solid black;
}

hr {
  border-width: thin;
}

.card {
  border-radius: 12px;
}

<p>Menu</p>
<hr>
<p>Contact</p>

.alert {
  border-left: 6px solid red;
}

Section E: Spot the Error

D — The border style is misspelled. 'sold' is not a valid style, so the border line will not draw. It should be 'solid'.

C — 'line' is not a valid border style, so the thin divider line will not appear. Use a real style such as 'solid'.

B — The thickness of the thick line needs a unit. '6' should be '6px', or the rule is ignored and no line is drawn.

C — The colon is missing after the property name. It should be 'border: 1px solid #ccc;' so the thin border line is drawn around the table.

C — A stroke of 'none' makes the curved line invisible. The stroke should be a colour such as "black" so the curve shows.