Syntax
<style>
body { font-family: sans-serif; }
</style>Examples
Basic Embedded Styles
Adding page-specific CSS directly in the document.
<head>
<style>
body { margin: 0; font-family: system-ui; }
h1 { color: #1f2937; }
</style>
</head>Media-Specific Styles
Using the media attribute to apply styles conditionally.
<style media="print">
nav, footer { display: none; }
</style>Component-Scoped Styles
A style block for a specific reusable component.
<style>
.card { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 16px; }
</style>
<div class="card">Card content</div>Attributes
- media (string): A media query specifying when the styles apply
- type (string): Defaults to text/css; rarely needs to be set explicitly
Best practices
- Prefer external stylesheets via <link> for anything beyond a handful of page-specific rules, for better caching and maintainability
- Use style blocks for critical above-the-fold CSS you want inlined for faster first paint
- Avoid inline style attributes on individual elements for anything reusable — a style block or external file keeps things DRY
- Keep embedded styles scoped and specific to avoid unexpectedly overriding global styles elsewhere on the site
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<meta>
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<link>
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<link>
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.