Skip to content

Previous | Index

CSS Fundamentals

This is a practical CSS starter for users newer to frontend styling.

What CSS Does

HTML defines structure. CSS defines visual presentation.

In SimplyPages, Java builds HTML and CSS controls how that HTML looks.

Three Ways Styles Apply

  1. Class-based rules (recommended)
  • Example class in code: .withClass("card")
  • Rule in stylesheet: .card { ... }
  1. ID-based rules
  • Example ID in code: .withId("sales-summary")
  • Rule in stylesheet: #sales-summary { ... }
  1. Inline styles (highest priority)
  • Example in code: .addStyle("margin-top", "16px")

Specificity and Override Order

When multiple rules target the same element:

  1. Inline style usually wins.
  2. More specific selectors win over less specific ones.
  3. If specificity is equal, later-loaded stylesheet rule wins.
  1. Add stable classes/IDs in components/modules.
  2. Put most styling in CSS files.
  3. Use inline styles only for one-off runtime values.

Minimal Example

Java:

Div card = new Div()
    .withClass("metric-card")
    .withId("active-users-card")
    .withChild(Header.H3("Active Users"));

CSS:

.metric-card {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 16px;
}

#active-users-card {
  background: #f8fafc;
}

Common CSS Units

  • px: fixed size (16px)
  • %: relative to parent (100%)
  • rem: relative to root font size (1rem)
  • vh/vw: viewport-relative units

Layout Basics You Will Use Most

  • Flexbox for row/column alignment.
  • Grid for dashboard-like multi-column layouts.
  • Spacing consistency with shared classes.

Prefer CSS variables for app-wide theme values:

:root {
  --sp-theme-accent: #0f766e;
  --sp-theme-accent-hover: #115e59;
  --sp-theme-surface-raised: #f8fafc;
  --page-gutter: 20px;
}

Then consume the variables in your selectors:

.metric-card {
  border-color: var(--sp-theme-accent);
  padding: var(--page-gutter);
}

SimplyPages-Specific Next Steps

This page is only the CSS primer. For framework behavior and load order:

  1. Read docs/core/05-css-defaults-overrides-and-structure.md.
  2. Read docs/core/06-shell-project-structure-and-asset-load-chain.md.