<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>
- Inside the <head> section of the HTML document where metadata content is allowed, code one or more optional style elements.
- 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. - Include the CSS style information between the starting and ending <style> tags.
- 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>
- 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.
- 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. - Include the CSS style information between the starting and ending <style> tags.
- End the style element with a matching
</style>
closing tag. - Do not code a
style
attribute on the parent element because browsers will use the style information in the <style> tag instead of thestyle
attribute.
<style> Content Model
Contents of the <style> Tag
Content model: CSS style information