10  Styling

Professional visual presentation significantly influences both the perceived credibility and actual learning effectiveness of cybersecurity case studies. Systematic attention to visual design principles, CSS customization techniques, and accessibility standards creates educational materials that support cognitive processing while maintaining the professional standards expected in contemporary educational environments.

Cognitive Psychology and Educational Design

Visual Processing and Learning Efficiency

Educational visual design must align with cognitive load theory principles to optimize learning effectiveness while avoiding extraneous cognitive processing that impedes comprehension. This approach requires systematic elimination of visual distractions that do not directly support learning objectives, implementation of consistent visual hierarchies that guide attention and facilitate information processing, and strategic use of white space and typography to reduce cognitive burden while enhancing readability.

Clean, focused layouts minimize extraneous cognitive processing by directing attention toward educational content rather than decorative or superfluous visual elements:

/* Example: Clean content layout */
.content-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
  font-size: 16px;
}

/* Generous white space reduces cognitive load */
h1, h2, h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem;
}

Consistent Visual Hierarchy: Use typography and spacing to guide attention and comprehension

/* Establish clear information hierarchy */
h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 2rem;
  color: #34495e;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  color: #5d6d7e;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

Strategic Use of Visual Elements

Purpose-Driven Graphics: Every visual element should support specific learning objectives

Consistent Color Coding: Use color systematically to create meaning and aid navigation

/* Color-coded content types */
.technical-content {
  border-left: 4px solid #3498db;
  background-color: #ebf3fd;
  padding: 1rem;
  margin: 1rem 0;
}

.ethical-content {
  border-left: 4px solid #e74c3c;
  background-color: #fdf2f2;
  padding: 1rem;
  margin: 1rem 0;
}

.business-content {
  border-left: 4px solid #f39c12;
  background-color: #fef9e7;
  padding: 1rem;
  margin: 1rem 0;
}

Professional Cybersecurity Aesthetics

Cyber Dimensions Brand System

This project implements the Cyber Dimensions visual identity system, using colors derived from the published textbook cover to ensure brand consistency across all educational materials.

Brand Color Palette: Earthy, professional tones that convey trust and academic credibility

/* Cyber Dimensions Brand Colors */
:root {
  --cd-brown-dark: #594a3d;     /* Primary brand color - main headers, navigation */
  --cd-brown-accent: #736355;   /* Secondary brand color - links, accents */
  --cd-off-white: #f2f0e6;      /* Light background color from book cover */
  --cd-success: #5a7d5a;        /* Muted earthy green - success states */
  --cd-warning: #c88a3f;        /* Warm amber/gold - warnings */
  --cd-danger: #a94442;         /* Desaturated brick red - errors */
  --cd-info: #4a6e8a;          /* Muted greyish blue - information */
  --cd-muted-text: #8a7c6f;     /* Secondary text and captions */
  --cd-border: #d1ccc0;         /* Neutral borders and dividers */
}

Brand Implementation: This project uses Quarto’s new _brand.yml system for consistent brand application across all output formats:

# _brand.yml excerpt
color:
  primary: "#594a3d"        # Brown dark - main brand color
  secondary: "#736355"      # Brown accent - secondary elements
  success: "#5a7d5a"        # Muted earthy green
  warning: "#c88a3f"        # Warm amber/gold
  danger: "#a94442"         # Desaturated brick red
  info: "#4a6e8a"          # Muted greyish blue

Typography Choices: Select fonts that enhance readability and professional credibility

/* Professional typography stack */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-text);
}

/* Monospace for code and technical content */
code, pre, .technical {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 
               'source-code-pro', monospace;
}

/* Headers with appropriate weight and spacing */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary-blue);
}

Quarto Styling Customization

Create comprehensive styling systems using SCSS variables and mixins:

// _custom.scss
/*-- scss:defaults --*/
// Define variables that override Quarto theme defaults

$primary: #2c3e50;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$code-bg: #f8f9fa;
$code-color: #d73a49;

/*-- scss:rules --*/
// Custom CSS rules and component styling

// Enhanced callout styling
.callout {
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 1.5rem 0;
  
  .callout-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
  }
}

// Professional table styling
table {
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  
  th {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: left;
  }
  
  td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
  }
  
  tr:nth-child(even) {
    background-color: #f8f9fa;
  }
  
  tr:hover {
    background-color: #e3f2fd;
  }
}

Quarto Configuration Integration

# _quarto.yml
format:
  html:
    theme: 
      - cosmo
      - assets/custom.scss
    css: assets/additional-styles.css
    toc: true
    toc-depth: 3
    number-sections: true
    code-fold: false
    code-copy: true
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 250px

Component-Specific Styling

The Cyber Dimensions toolkit includes eight specialized callout types, demonstrated throughout, designed specifically for cybersecurity education materials. These callouts use consistent styling with the brand colors and include descriptive emoji icons for clear visual identification. These leverage the Custom Callout Quarto extension.

custom-callout:
  theoretical-foundation:
    title: "Theoretical Foundation"
    icon-symbol: "🏛️"
    color: "#594a3d"
    appearance: "simple"
  
  pedagogical-consideration:
    title: "Pedagogical Consideration"
    icon-symbol: "🎓"
    color: "#4a6e8a"
    appearance: "simple"
  
  implementation-guidance:
    title: "Implementation Guidance"
    icon-symbol: "🔧"
    color: "#736355"
    appearance: "simple"
  
  assessment-strategy:
    title: "Assessment Strategy"
    icon-symbol: "📋"
    color: "#c88a3f"
    appearance: "simple"
  
  cognitive-load-alert:
    title: "Cognitive Load Consideration"
    icon-symbol: "🧠"
    color: "#a94442"
    appearance: "simple"
  
  scaffolding-tip:
    title: "Scaffolding Strategy"
    icon-symbol: "🏗️"
    color: "#5a7d5a"
    appearance: "simple"
  
  learner-experience:
    title: "Learner Experience Focus"
    icon-symbol: "👤"
    color: "#8a7c6f"
    appearance: "simple"
  
  evidence-base:
    title: "Research Evidence"
    icon-symbol: "📊"
    color: "#4a6e8a"
    appearance: "simple"

Usage in Quarto Documents:

See the Quarto documentation for details on how to use callouts. Below are some examples.

::: {.theoretical-foundation title="Title here"}
Content that provides academic or theoretical grounding for cybersecurity concepts.
:::

::: {.pedagogical-consideration}
## Title Here
Teaching strategies and educational considerations for instructors.
:::

::: {.implementation-guidance collapse="true"}
Practical steps for applying concepts in real-world scenarios.
:::

::: {.assessment-strategy}
Methods for evaluating student learning and understanding.
:::

::: {.cognitive-load-alert}
Warnings about potential cognitive overload or complexity.
:::

::: {.scaffolding-tip}  
Suggestions for supporting student learning progression.
:::

::: {.learner-experience}
Information focused on the student learning experience.
:::

::: {.evidence-base}
Research evidence supporting educational approaches.
:::

Code Block Enhancement

/* Enhanced code styling */
pre {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  position: relative;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-x: auto;
}

/* Language labels */
pre[class*="language-"]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(52, 73, 94, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Specific language styling */
pre.language-bash::before {
  content: "BASH";
  background: rgba(52, 152, 219, 0.8);
}

pre.language-python::before {
  content: "PYTHON";
  background: rgba(39, 174, 96, 0.8);
}

pre.language-yaml::before {
  content: "YAML";
  background: rgba(230, 126, 34, 0.8);
}

pre.language-json::before {
  content: "JSON";
  background: rgba(155, 89, 182, 0.8);
}

/* Copy button styling */
.code-copy-button {
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.code-copy-button:hover {
  background: #34495e;
}

Layout and Navigation Design

/* Enhanced navigation */
.navbar {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #34495e 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 1rem 0;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: white !important;
  text-decoration: none;
}

.navbar-nav .nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.1);
  color: white !important;
}

.navbar-nav .nav-link.active {
  background-color: var(--accent-blue);
  color: white !important;
}

/* Breadcrumb navigation */
.breadcrumb {
  background: transparent;
  margin: 1rem 0;
  padding: 0;
}

.breadcrumb-item {
  font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "→";
  color: var(--neutral-gray);
  margin: 0 0.5rem;
}

.breadcrumb-item a {
  color: var(--primary-blue);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--neutral-gray);
}

Sidebar and Table of Contents

/* Enhanced sidebar styling */
.sidebar {
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  padding: 2rem 1rem;
  height: calc(100vh - 80px);
  overflow-y: auto;
  position: sticky;
  top: 80px;
}

.sidebar h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-blue);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 0.5rem;
}

.sidebar a {
  color: #5d6d7e;
  text-decoration: none;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.sidebar a:hover {
  background-color: #e3f2fd;
  color: var(--primary-blue);
}

.sidebar a.active {
  background-color: var(--accent-blue);
  color: white;
  font-weight: 500;
}

/* Table of contents styling */
#TOC {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 2rem 0;
}

#TOC > ul {
  margin: 0;
  padding: 0;
}

#TOC ul {
  list-style: none;
}

#TOC li {
  margin-bottom: 0.5rem;
}

#TOC a {
  color: var(--primary-blue);
  text-decoration: none;
  line-height: 1.4;
}

#TOC a:hover {
  text-decoration: underline;
}

Responsive Design Implementation

Note that Quarto produces responsive content natively, but it’s possible to style it directly.

/* Base styles for mobile devices */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .callout {
    margin: 1rem 0;
    padding: 1rem;
  }
  
  /* Stack navigation items vertically */
  .navbar-nav {
    flex-direction: column;
    background-color: rgba(0,0,0,0.05);
    border-radius: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
  }
  
  .navbar-nav .nav-link {
    margin: 0.25rem 0;
  }
  
  /* Responsive tables */
  table {
    font-size: 0.875rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Responsive code blocks */
  pre {
    font-size: 0.75rem;
    padding: 1rem;
  }
  
  /* Hide sidebar on mobile, show as dropdown */
  .sidebar {
    display: none;
  }
  
  .mobile-toc {
    display: block;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  
  .mobile-toc summary {
    padding: 1rem;
    font-weight: 600;
    color: var(--primary-blue);
    cursor: pointer;
  }
  
  .mobile-toc details[open] summary {
    border-bottom: 1px solid #dee2e6;
  }
  
  .mobile-toc ul {
    padding: 1rem;
    margin: 0;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 750px;
  }
  
  .sidebar {
    width: 250px;
  }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
  .container {
    max-width: 1000px;
  }
  
  .content-grid {
    display: grid;
    grid-template-columns: 300px 1fr 200px;
    grid-gap: 2rem;
  }
  
  .sidebar {
    grid-column: 1;
  }
  
  .main-content {
    grid-column: 2;
  }
  
  .page-toc {
    grid-column: 3;
  }
}

Cross-Device Compatibility

/* Ensure compatibility across different devices and browsers */

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo, .icons {
    /* Use high-resolution images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print styles */
@media print {
  .navbar, .sidebar, .mobile-toc {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: black;
  }
  
  .callout {
    border: 1px solid black;
    background: white;
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
    color: black;
  }
  
  pre, blockquote {
    page-break-inside: avoid;
    border: 1px solid black;
  }
  
  a {
    color: black;
    text-decoration: none;
  }
  
  /* Show URLs for external links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
}

Accessibility and Inclusive Design

/* Ensure sufficient color contrast ratios */
:root {
  /* WCAG AA compliant color combinations */
  --high-contrast-text: #1a1a1a;
  --medium-contrast-text: #4a4a4a;
  --accessible-link: #0066cc;
  --accessible-link-hover: #004499;
  --accessible-focus: #005fcc;
}

/* Focus indicators for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
  outline: 2px solid var(--accessible-focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Skip links for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-blue);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0.25rem;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .callout {
    border-width: 3px;
    border-style: solid;
  }
  
  table {
    border: 2px solid var(--high-contrast-text);
  }
  
  code {
    border: 1px solid var(--high-contrast-text);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Interactive Element Enhancement

/* Enhanced form styling for accessibility */
.form-group {
  margin-bottom: 1.5rem;
}

label {
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  display: block;
}

input, textarea, select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accessible-focus);
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.1);
}

/* Button styling */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.5;
  min-height: 44px; /* WCAG minimum touch target size */
}

.btn-primary {
  background-color: var(--primary-blue);
  color: white;
}

.btn-primary:hover {
  background-color: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
  background-color: var(--primary-blue);
  color: white;
}

Brand Consistency and Style Guidelines

Examples of how to include branding.

/* Consistent brand application */
.brand-header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #34495e 100%);
  color: white;
  padding: 3rem 0;
  text-align: center;
  margin-bottom: 3rem;
}

.brand-header h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border: none;
  color: white;
}

.brand-header p {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* Logo and branding elements */
.logo {
  height: 40px;
  width: auto;
  margin-right: 1rem;
}

.brand-colors {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
}

.color-swatch {
  width: 100px;
  height: 100px;
  border-radius: 0.5rem;
  display: flex;
  align-items: end;
  padding: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.color-swatch.primary { background-color: var(--primary-blue); }
.color-swatch.accent { background-color: var(--accent-blue); }
.color-swatch.success { background-color: var(--success-green); }
.color-swatch.warning { background-color: var(--warning-orange); }
.color-swatch.danger { background-color: var(--danger-red); }

Typography Scale

/* Consistent typography system */
.text-xs { font-size: 0.75rem; line-height: 1.5; }
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-base { font-size: 1rem; line-height: 1.6; }
.text-lg { font-size: 1.125rem; line-height: 1.6; }
.text-xl { font-size: 1.25rem; line-height: 1.5; }
.text-2xl { font-size: 1.5rem; line-height: 1.4; }
.text-3xl { font-size: 1.875rem; line-height: 1.3; }
.text-4xl { font-size: 2.25rem; line-height: 1.3; }
.text-5xl { font-size: 3rem; line-height: 1.2; }

/* Font weight utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

Performance Optimization

/* Efficient CSS practices for fast loading */

/* Use CSS custom properties for theme switching */
:root {
  --primary: #2c3e50;
  --secondary: #3498db;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --border-radius: 0.375rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.15);
}

/* Minimize reflows and repaints */
.optimized-layout {
  contain: layout style paint;
  will-change: transform;
}

/* Use transform for animations instead of changing layout properties */
.smooth-hover {
  transition: transform 0.3s ease;
}

.smooth-hover:hover {
  transform: translateY(-2px);
}

/* Optimize images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.lazy-image {
  loading: lazy;
  decoding: async;
}

Critical CSS Inlining

For optimal performance, inline critical above-the-fold styles:

<!-- Inline critical CSS in document head -->
<style>
/* Critical styles for immediate rendering */
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.navbar {
  background: #2c3e50;
  color: white;
  padding: 1rem 0;
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}
</style>

<!-- Load non-critical CSS asynchronously -->
<link rel="preload" href="assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Next Steps

To implement effective styling in your cybersecurity case studies:

1. Review quality assurance processes for design consistency
2. Explore multimedia integration for enhanced visual content
3. Study narrative design for visual character representation
4. Learn cross-case continuity for brand consistency across materials