Summary -
In this topic, we described about the <style> tag along with detailed example.
<style> tag used to define styles for the HTML document. The styles are typically CSS. The styles applies are mostly at page level. The <style> tag will mostly place inside the <head> tag.
The coding related to styles specify inside the <style> tag. HTML document can contain multiple <style> tags. If any style rule can contain in more than one <style> tag, the last <style> tag rule will be applied to HTML document.
<style> tag supports by all kind of browsers. <style> tag has no ending tag in HTML. By using <style> tag, external style sheet can’t be added to browser.
To add external stylesheet to HTML document, <link> tag needs to be coded which will discuss later. All the attributes are optional.
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| media | Specifies which media/device the styles are customized for. | Media_query such as screen, print, screen and max-width:1000. |
| type | Specifies the media type of the <style> tag. | text/css |
| scoped | Specifies the element (parent/child) to which the styles needs to be applied. | None |
Syntax -
<style>...</style>
Example -
<!DOCTYPE html>
<html>
<head>
<style>
h3 {color:green;}
p1 {color:blue;}
</style>
</head>
<body>
<h3>This is heading</h3>
<p1>This is paragraph.</p1>
</body>
</html>