# 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.

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

From which we see that.

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.

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.

`<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.

`<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.

`proof-column-2`

style. `proof-column`

style. `<div class="proof-column">`

`proof-num`

or `proof-block`

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.

`<ol class="proof-steps">`

This class enables ordered lists to have connected numbered statements.

- Let A be an n by n matrix and let R be the reduced row echelon form of A.
- We will show first that det(A) is not zero if and only if det(R) is not zero.
- Let
- E1,
- E2,

- Then Er ... E1 A = [[input:ans1]]]
- Taking determinants of both sides, we obtain: det(Er) ... det(E_1) det(A) = det(R).
- The determinants of all the elementary matrices are all [[input:ansdropdown]]]
- We conclude that det(A) is not zero if and only if det(R) is not zero.
- Now suppose that A is invertible.
- Then R = [[input:ans4]]
- Thus, det(R) = [[input:ans3]] and hence det(A) is not zero.

- Conversely, if det(A) is not zero then det(R) is not zero, so R cannot have a zero row.
- Thus R = I and A is invertible as required.