<w> smolweb

style: The Style Information element

The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

Best Practices

Prefer External CSS Files

Recommended approach: Use external CSS files linked with the <link> element instead of inline <style> elements:

<!--  Preferred: External CSS file -->
<link rel="stylesheet" href="/css/style.css">

<!--   Less optimal: Inline style element -->
<style>
  body { font-family: sans-serif; }
</style>

Minimize CSS Rules (SmolWeb Principles)

Keep your CSS minimal and purposeful. Focus on:

Avoid Inline Style Attributes

Never use the style attribute on individual elements:

<!-- L Bad: Inline styles -->
<p style="color: red; font-size: 16px;">This approach is discouraged</p>

<!--  Good: Use CSS classes -->
<p class="warning">This approach maintains separation of concerns</p>

Attributes

Specific attributes

Recommended attributes

type="text/css" specifies the styling language as a MIME type. For CSS, this is text/css. While this is the default and can often be omitted in modern browsers, it’s recommended for clarity.

Allowed attributes

media="[media query]" specifies which media/device the CSS is optimized for. Common values include:

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My Personal Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!--  Preferred: External CSS -->
  <link rel="stylesheet" href="/css/main.css">
  
  <!--   Only when necessary: Inline styles for specific media -->
  <style type="text/css" media="print">
    @media print {
      .no-print { display: none; }
      body { font-size: 12pt; }
      a::after { content: " (" attr(href) ")"; }
    }
  </style>
  
  <!-- Conditional styles for older browsers -->
  <style type="text/css" media="screen and (max-width: 480px)">
    .desktop-only { display: none; }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Corner of the Web</h1>
    <nav class="no-print">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Building a Sustainable Website</h2>
      <p>A personal website should be lightweight, accessible, and built to last.</p>
      <p class="desktop-only">This content only appears on larger screens.</p>
    </article>
  </main>
</body>
</html>

SmolWeb CSS Philosophy

When you do use <style> elements, follow these principles:

<style type="text/css">
/* Minimal, purposeful CSS */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  max-width: 65ch;
  margin: 0 auto;
  padding: 1rem;
}

/* Focus on readability */
h1, h2, h3 {
  line-height: 1.2;
}

/* Accessible colors */
a {
  color: #0066cc;
}

a:visited {
  color: #551a8b;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Print styles when needed */
@media print {
  .no-print { display: none; }
}
</style>

Why Avoid Inline Styles?

  1. Separation of concerns - Keep content and presentation separate
  2. Maintainability - Easier to update styles in one place
  3. Reusability - Style rules can be shared across elements
  4. Performance - External CSS can be cached by browsers
  5. Accessibility - Easier to provide alternative stylesheets
  6. File size - Prevents repetition and reduces HTML size