<style>

<style> embeds a stylesheet in a document, normally in the head or another context allowing metadata. Its rules affect matching elements throughout that document, not only elements next to the style tag.

Two rules in source order

Both rules have equal specificity and origin. The later rule wins for the heading’s color.

<h1>The later color wins</h1>
<p>Inspect the heading’s computed color.</p>

h1 {
  color: #166534;
}
h1 {
  color: #2563eb;
}
body {
  font-family: system-ui, sans-serif;
}

Attributes and scope

media can limit the stylesheet to a media condition, such as print. nonce can allow a particular inline style under an appropriate Content Security Policy; it must match a server-generated policy value, not a hard-coded recipe. CSS is the default type, so type="text/css" is unnecessary.

The old scoped attribute is not a modern mechanism for restricting ordinary style tags. Use deliberate selectors, CSS scoping where supported, or a shadow root when you need an encapsulated component. The examples on this site use isolated documents so demonstration selectors cannot alter the article.

Exercise and next lesson

Reverse the two heading declarations and compare the color. Then change one selector’s specificity: source order no longer explains the whole result. Learn the cascade and specificity before solving conflicts with repeated !important.

Use link when CSS should live in a reusable external file.

Sources and browser support

MDN: style describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.