Skip to content

Common CSS Styles Documentation

This documentation describes the custom CSS classes and their required HTML structure that I use on a regular basis.

CSS Variables

The stylesheet defines colour scheme variables that can be referenced throughout:

1
2
3
4
5
6
7
8
9
--pale-red, --dark-red
--pale-blue, --dark-blue
--pale-green, --dark-green
--pale-orange, --dark-orange
--pale-yellow, --dark-yellow
--pale-purple, --dark-purple
--pale-teal, --dark-teal
--light-grey
--code-background

Teaching Plans

Creates alternating row colours for schedule tables with special highlighting for on-campus sessions.

HTML Structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<table class="teaching-plan">
    <thead>
        <tr>
            <th>Week</th>
            <th>Topic</th>
            <th>Activities</th>
        </tr>
    </thead>
    <tbody>
        <tr class="on-campus">
            <td>1</td>
            <td>Introduction</td>
            <td>Lecture and lab</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Online session</td>
            <td>Independent study</td>
        </tr>
    </tbody>
</table>

Features

  • Dark teal header with ivory text
  • Odd rows have light grey background
  • Rows with class="on-campus" get gold highlighting in the first column
  • 10px left padding on headers, 5-10px padding on cells

Figure Labels

Creates numbered circular labels for lists, useful for labelling diagram elements.

HTML Structure

1
2
3
4
5
<ul class="figure-labels">
    <li>First item description</li>
    <li>Second item description</li>
    <li>Third item description</li>
</ul>

Features

  • Auto-incrementing numbers in circular badges
  • Circle: 40px × 40px with grey border
  • 20px margin between circle and text
  • 10px margin between list items

Equations

Formats mathematical equations with centred display and symbol definitions.

HTML Structure

1
2
3
4
5
6
7
8
<p class="equation">
    E = mc²
</p>
<ul class="equation-symbols">
    <li><span>E</span> = energy</li>
    <li><span>m</span> = mass</li>
    <li><span>c</span> = speed of light</li>
</ul>

Features

  • Equation: centred, large, italic, serif font
  • Symbol list: preceded by "where", indented 5em
  • Symbol variables in italic serif font

Learning Outcomes

Creates numbered learning outcomes with "LO" prefix.

HTML Structure

1
2
3
4
5
<ul class="learning-outcomes">
    <li>Explain the fundamental concepts of...</li>
    <li>Apply techniques to solve...</li>
    <li>Evaluate different approaches to...</li>
</ul>

Features

  • Auto-generates "LO1:", "LO2:", etc.
  • 40px width for the prefix
  • No bullet points

Pretty Formatting

Pretty Container

Adds margins and formatting for figures with captions.

1
2
3
4
5
<div class="pretty">
    <img src="diagram.png" class="figure" alt="Diagram description">
    <div class="caption">Figure 1: This shows the relationship between...</div>
    <div class="attribution">Smith et al. (2023)</div>
</div>

Features

  • Outer margins: 0 8em
  • Figure margin: 2em top, 0 bottom, 1em left margin, 10em left
  • Caption: italic, 0.9em, left margin 11.5em, bottom margin 2em
  • Attribution: italic, 0.9em, right-aligned with 10em right margin

Pretty Blockquote

Adds decorative quote marks around blockquotes.

1
2
3
<blockquote class="pretty">
    <span>The quoted text goes here and will be surrounded by decorative quotation marks.</span>
</blockquote>

Features

  • 120% font size
  • 2em vertical, 5em horizontal margins
  • Decorative quote images (open/close)
  • Content in <span> with 86px horizontal margins

Callouts/Admonitions

Three types of callout boxes for different purposes.

HTML Structure

1
2
3
4
5
<div class="callout admonition-important">
    <div class="label">Important</div>
    <div class="title">Key Concept</div>
    <p>The main content of the callout goes here...</p>
</div>

Callout Types

Important (Blue)

1
2
3
4
5
<div class="callout admonition-important">
    <div class="label">Important</div>
    <div class="title">Title</div>
    <!-- content -->
</div>
  • Pale blue background
  • Info icon (blue)
  • Dark blue text for label

Warning (Orange)

1
2
3
4
5
<div class="callout admonition-warning">
    <div class="label">Warning</div>
    <div class="title">Title</div>
    <!-- content -->
</div>
  • Pale orange background
  • Warning icon (orange)
  • Dark orange text for label

Tip (Green)

1
2
3
4
5
<div class="callout admonition-tip">
    <div class="label">Tip</div>
    <div class="title">Title</div>
    <!-- content -->
</div>
  • Pale green background
  • Lightbulb icon (green)
  • Dark green text for label

Features

  • 80% width
  • 1em margin on most sides, 5em left margin
  • 1em padding
  • Label and title displayed inline
  • Content paragraphs/lists indented 2em

Tables

Pretty Table

Standard formatted table with borders.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<table class="pretty">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Features

  • 1px light grey borders on table and cells
  • 0.5em cell padding
  • 2em top and bottom margins

Splash Table

Image with text layout.

1
2
3
4
5
6
<table class="splash">
    <tr>
        <td><img src="image.png" alt="Description"></td>
        <td>Text content alongside the image...</td>
    </tr>
</table>

Features

  • Image: max-width 20em, 2em right margin
  • Second column: max-width 40em
  • 2em vertical margins

Quadrants Table

Four-quadrant analysis grid.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<table class="quadrants">
    <tr>
        <th></th>
        <th></th>
        <th>Column Header 1</th>
        <th>Column Header 2</th>
    </tr>
    <tr>
        <th rowspan="2">Row<br>Header</th>
        <th>Row 1</th>
        <td>Quadrant 1</td>
        <td>Quadrant 2</td>
    </tr>
    <tr>
        <th>Row 2</th>
        <td>Quadrant 3</td>
        <td>Quadrant 4</td>
    </tr>
</table>

Features

  • First row header rotated -90 degrees
  • Cells: 8em height, 1em padding, centred text
  • Colour-coded quadrants:
  • Top-right: pale blue
  • Bottom-right: pale green
  • Bottom-left: pale orange
  • 1px grey borders on data cells

Comparison Table

Side-by-side code or content comparison.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<table class="comparison">
    <thead>
        <tr>
            <th>Approach 1</th>
            <th>Approach 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="codeblock">
                <pre><code>code example 1</code></pre>
            </td>
            <td class="codeblock">
                <pre><code>code example 2</code></pre>
            </td>
        </tr>
    </tbody>
</table>

Features

  • Margins: 1em all sides except 4em left
  • Headers and cells: centred text
  • Codeblock cells: 1em padding, 1.5em white borders left/right, left-aligned text

Details/Disclosure Elements

Collapsible sections with various styles.

Basic Details

1
2
3
4
<details>
    <summary>Click to expand</summary>
    <p>Hidden content appears here...</p>
</details>

Blue Bar

1
2
3
4
<details class="blue-bar">
    <summary>Section Title</summary>
    <p>Content...</p>
</details>

Features

  • Pale blue background
  • Large, bold text
  • 0.6em margin

Green Bar

1
2
3
4
<details class="green-bar">
    <summary>Section Title</summary>
    <p>Content...</p>
</details>

Features

  • Pale green background
  • Large, bold text
  • 0.6em margin

Custom Marker

1
2
3
4
<details class="marker-after">
    <summary>Custom disclosure</summary>
    <p>Content...</p>
</details>

Features

  • Hides default marker
  • Shows ▶ when closed
  • Shows ▼ when open

Image Modifiers

Images can be modified using URL fragments (hash anchors).

Figure

1
<img src="diagram.png#figure" alt="Description">
  • Max-width: 80%
  • Max-height: 20rem

Stretch

1
<img src="banner.png#stretch" alt="Description">
  • Width: 100%

Centred Short

1
<img src="photo.png#centred_short" alt="Description">
  • Block display, centred
  • Max-height: 300px
  • 30px vertical margins

Icon

1
<img src="icon.png#icon" alt="Icon">
  • Height: 24px
  • 5px horizontal margins
  • Vertical-align: text-bottom

Icon Prefix

1
<img src="icon.png#icon-prefix" alt="Icon">
  • Height: 24px
  • Floats left
  • 0.5em top margin

Slide

1
<img src="icon.png#slide" alt="Slide icon">
  • Height: 24px
  • Floats right
  • Vertical-align: text-bottom

Icon Indented

1
<img src="icon.png#icon-indented" alt="Icon">
  • Height: 24px
  • Left margin: 5em

Left Leader

1
<img src="photo.png#left-leader" alt="Description">
  • Height: 200px
  • Floats left
  • 30px right margin

Right Inset

1
<img src="photo.png#right-inset" alt="Description">
  • Height: 160px
  • Floats right
  • 30px margins (except left)

Inline Centre

1
<img src="diagram.png#inline-center" alt="Description">
  • Block display, centred
  • Max-width: 200px
  • 30px vertical margins

Inline Centre Large

1
<img src="diagram.png#inline-center-large" alt="Description">
  • Block display, centred
  • Max-width: 400px
  • 30px vertical margins

Centred

1
<img src="diagram.png#centred" alt="Description">
  • Block display, centred
  • Max-width: 500px
  • 4em vertical margins

Additional Utility Classes

Code Block

1
2
3
<div class="codeblock">
    <pre><code>your code here</code></pre>
</div>
  • Background: light grey code background colour

Indented Content

1
2
3
<div class="indented-content">
    <p>This content will be indented...</p>
</div>
  • Left margin: 3em

Two Column Flex

1
2
3
4
5
6
7
8
<div class="two-column-flex">
    <div>
        <p>Left column content</p>
    </div>
    <div>
        <p>Right column content</p>
    </div>
</div>
  • Flexbox layout
  • Equal width columns
  • Columns use flex-direction: column

Contents

1
2
3
<div class="contents">
    <!-- Table of contents or similar -->
</div>
  • 2em margins all around

Captions and Attribution

Caption (Standalone)

1
2
3
<div class="caption">
    Figure 1: Description of the figure above.
</div>
  • Block display
  • Max-width: 500px
  • Italic, small font
  • Centred with auto margins
  • Negative top margin (-4em) and 4em bottom margin (for use after images)

Caption (No Space)

1
2
3
<div class="caption-no-space">
    Description without spacing adjustments.
</div>
  • Block display
  • Italic, small font
  • No margin adjustments

Attribution

1
2
3
<div class="attribution">
    Smith, J. (2023)
</div>
  • Prepends "Source: " automatically
  • Block display
  • Italic, small font

InfoTable (Legacy)

Styled table with red branding.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<table class="infoTable">
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
        </tr>
    </tbody>
</table>

Features

  • Red border (top: 3px, others: 1px)
  • Centred on page
  • Headers: bold, white text on red background
  • Cells: 10px padding

Notes

Material for MkDocs Integration

Several styles are designed to work with Material for MkDocs:

  • Table header suppression (using <hr> before tables)
  • Equal column widths with hr.two-equal-columns
  • Navigation link styling
  • Typography overrides

Legacy Content

The bottom section of the CSS contains older styles that may be superseded by newer classes. These include alternative image positioning styles and table configurations.

Icon Requirements

The stylesheet references external icon files: - open_quotes.png and close_quotes.png for pretty blockquotes - info_blue.svg, warning_orange.svg, lightbulb_green.svg for admonitions

These must be available at: https://bdavison.napier.ac.uk/moodle/icons/

Complete Example

Here's a complete example combining multiple styles:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <link rel="stylesheet" href="https://bdavison.napier.ac.uk/moodle/common.css">
</head>
<body>
    <h1>Software Engineering Module</h1>

    <div class="callout admonition-important">
        <div class="label">Important</div>
        <div class="title">Module Learning Outcomes</div>
        <ul class="learning-outcomes">
            <li>Explain software development methodologies</li>
            <li>Apply design patterns to solve problems</li>
            <li>Evaluate code quality and maintainability</li>
        </ul>
    </div>

    <h2>Teaching Schedule</h2>

    <table class="teaching-plan">
        <thead>
            <tr>
                <th>Week</th>
                <th>Topic</th>
                <th>Mode</th>
            </tr>
        </thead>
        <tbody>
            <tr class="on-campus">
                <td>1</td>
                <td>Introduction to Software Engineering</td>
                <td>On-campus</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Requirements Analysis</td>
                <td>Online</td>
            </tr>
        </tbody>
    </table>

    <div class="pretty">
        <img src="sdlc-diagram.png" class="figure" alt="Software Development Lifecycle">
        <div class="caption">The iterative nature of modern software development</div>
    </div>

    <details class="blue-bar">
        <summary>Additional Resources</summary>
        <p>Further reading materials can be found in the module repository.</p>
    </details>
</body>
</html>