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:
- Essential styling only - Don’t over-design
- Progressive enhancement - Start with good defaults
- Readable typography - Ensure good contrast and readability
- Responsive design - Mobile-first approach
- Fast loading - Minimal file sizes
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:
- all: Suitable for all devices (default)
- screen: Computer screens, tablets, phones
- print: Print preview mode and printed pages
- (min-width: 600px): Custom media queries
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?
- Separation of concerns - Keep content and presentation separate
- Maintainability - Easier to update styles in one place
- Reusability - Style rules can be shared across elements
- Performance - External CSS can be cached by browsers
- Accessibility - Easier to provide alternative stylesheets
- File size - Prevents repetition and reduces HTML size