| Contains style information for a document, or part of a document. | HTML 4, 4.01, 5 |
HTML Syntax
<style
media = screen | print | all
type = media type
>
The <style> element allows authors to embed a style sheet that contains the styles for use within the current page.
A style sheet basically specifies how HTML elements should render in a user’s browser.
<style> tags should appear in the <head> section of an HTML document, to separate style information from the document content.
The element does not present any content for the user.
Please see Style Sheet Basics and Using Style Sheets for more information on using the <style> element.
The CSS Properties Reference provides a list of the core CSS style properties that can be used within the <style> element.
NOTE: Both start and end tags are required.
The <style> element supports the following attributes, in addition to global attributes common to all HTML elements.
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the style tag |
The below code snippet shows how style rules are declared within the style element.
<head>
<style>
body { background-color: white; color: black; }
h1 { font: bold 18pt arial ; }
p { font: 11pt arial; text-indent: 0.5in; }
</style>
</head>
The below shows how the style object is accessed in client-side script to change the styles of an element.
selector.style.CSS-property = value;
This example shows the effect of applying different style rules to elements of the same document.
Show me
Style Sheet Basics Using Stylesheets CSS Properties Reference