Skip to content

CSS Styles for displaying proof

We support the following CSS styles to enable consistent display of mathematical proof, and arguments in general. General style was also introduced with the HELM materials.

Note, the precise style will also depend on the styles in your learning environment. The class="proof" styles focus on block structure and layout, e.g. indenting blocks and column layout. Colour and typeface are generally not specified in the proof styles (although a white background is defined). Styles are defined in styles.css of the top-level of the STACK plugin.

<div class="proof">

This class is a general high level container.

This is typical question style, from the Moodle theme, containing the following proof.

Let P(n) be the statement [...]

From which we see that.

Back to the typical Moodle style.

Note, the proof container is minimal, and subtle and does not intrude too much but contains a proof as a distinct entity.

<div class="proof-block">

This class allows the teacher to highlight sub-components of a proof. It is intended to be a nested sub-proof block of a main proof.

This is typical question style, from the Moodle theme, containing the following proof.
This proof has two cases.

If n is odd then we have

[...]

and so ...

If n is even then we have

a. even more subcases.

b. even more subcases.

and so ...

From which we see that in all cases the proof holds.

Back to the typical Moodle style.

<div class="proof-line">, <div class="proof-num">, <div class="proof-step">, <div class="proof-comment">

Greater typeset structure can be gained by marking up the proof in more detail, if so desired.

A typical proof consists of individual lines. Each line is numbered, so we can refer to them later. The main "meat" of the line is the "proof step" and there is an optional comment. The proof comment is designed for a comment, to allow an input to ask a question or to act as the second column in a two column proof.

Consider the following proof by induction. \(P(n)\)
1.
Let P(n) be the statement
The first block of an induction proof must be a clear statement of the "induction hypothesis".
2.
.... some maths ....
Notice, in this case, we have a purely algebraic induction hypothesis.
3.
Since
This block is known as the "base case".
4.
Something profound and something else
5.
it follows that P(1) is true.
6.
Assume that P(n) is true.
This block is known as the "induction step".
7.
.... lots of complex working ....
We just consider the sum which occurs in P(n+1) and start to rearrange this.
8.
More working
We are assuming P(n) is true, and here we use this fact.
9.
More working.
10.
Which gives us what we want
Notice we have rearranged the algebra to give us the right hand side of P(n+1).
11.
Hence P(n+1) is true.
This block is the conclusion of the proof.
12.
Since P(1) and P(n) implies P(n+1) it follows that P(n) is true for all n by the principal of mathematical induction.

<div class="proof-column">, <div class="proof-column-2">

Alternatively, you can use columns, which are fixed at a width of 48%. The design assumes two columns and line numbers.

Additionally, proof-column-2 has a different visual style for emphasis.

Here is a proof of the great and wonderful theorem.
The proof has two cases.
1.
The proof itself is in the first column.
The second column can contain comments, here in proof-column-2 style.
2.
The proof continues.
With further comments.
3.
The second case of the proof.
The second column can contain comments, here in proof-column style.
4.
The proof continues.
With further comments.
5.
The proof continues.
With further comments.
6.
The proof continues, without comment.

<div class="proof-column">

Lines don't need to have proof-num or proof-block
With further comments.
The proof continues.
With further comments.
This concludes the proof.

It is possible to use proof-column-2 style in the first column, but this looks odd and is not recommended. The proof-column-2 style is intended for only the second column. The proof-column style is intended to be used in both columns.

Here is a proof by induction.

Consider the following proof by induction. \(P(n)\)
1.
Let P(n) be the statement
The first block of an induction proof must be a clear statement of the "induction hypothesis".
2.
.... some maths ....
Notice, in this case, we have a purely algebraic induction hypothesis.
3.
Since
This block is known as the "base case".
4.
Something profound and something else
5.
it follows that P(1) is true.
6.
Assume that P(n) is true.
This block is known as the "induction step".
7.
.... lots of complex working ....
We just consider the sum which occurs in P(n+1) and start to rearrange this.
8.
More working
We are assuming P(n) is true, and here we use this fact.
9.
More working.
10.
Which gives us what we want
Notice we have rearranged the algebra to give us the right hand side of P(n+1).
11.
Hence P(n+1) is true.
This block is the conclusion of the proof.
12.
Since P(1) and P(n) implies P(n+1) it follows that P(n) is true for all n by the principal of mathematical induction.

<ol class="proof-steps">

This class enables ordered lists to have connected numbered statements.

  1. Let A be an n by n matrix and let R be the reduced row echelon form of A.
  2. We will show first that det(A) is not zero if and only if det(R) is not zero.
  3. Let
    1. E1,
    2. E2,
    ... Er be the elementary matrices corresponding to the elementary row operations that reduce A to R.
  4. Then Er ... E1 A = [[input:ans1]]]
  5. Taking determinants of both sides, we obtain: det(Er) ... det(E_1) det(A) = det(R).
  6. The determinants of all the elementary matrices are all [[input:ansdropdown]]]
  7. We conclude that det(A) is not zero if and only if det(R) is not zero.
  8. Now suppose that A is invertible.
    1. Then R = [[input:ans4]]
    2. Thus, det(R) = [[input:ans3]] and hence det(A) is not zero.
  9. Conversely, if det(A) is not zero then det(R) is not zero, so R cannot have a zero row.
  10. Thus R = I and A is invertible as required.