<style> Tag Syntax

Rules for coding HTML style elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

CSS <style> tag as metadata content
How to code a style element in the head section
<head>
   ... metadata content ...
   <title>... text content ...</title>
   ...
   <style type="text/css">
      ... inline styles ...
   </style>
   ...
</head>
  1. Inside the <head> section of the HTML document where metadata content is allowed, code one or more optional style elements.
  2. Begin the style element with a starting <style> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include the CSS style information between the starting and ending <style> tags.
  4. End the style element with a matching </style> closing tag.
CSS <style> tag as flow content
How to code a scoped style element in the body section
<div>
   <style scoped="scoped" type="text/css">
      ...
   </style>
   ... flow content expected ...
</div>
  1. Inside an element where flow content is expected, code a style element immediately after the starting tag for the element to which the style is to apply.
  2. Begin the style element with <style scoped="scoped">. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include the CSS style information between the starting and ending <style> tags.
  4. End the style element with a matching </style> closing tag.
  5. Do not code a style attribute on the parent element because browsers will use the style information in the <style> tag instead of the style attribute.

<style> Content Model

Contents of the <style> Tag

Content model: CSS style information