Declares a stylesheet to be included in the current page. This component is a special case of the Relation component,
Note that a Shell component is required when using the Style element.
The Shell component is responsible for gathering all Style
components found in a page, and rendering them inside the
<head> tag.
| Name | Type | Direction | Required | Default | Description |
|---|---|---|---|---|---|
| href | String or IAsset | in | no | The target URL of the related resource. If this value is provided and is not null, this component behaves exactly like the Relation component, i.e. it renders a <link>
tag in the html header.Otherwise, it renders a <style> tag which includes its contents.
|
|
| rel | String | in | no | literal:stylesheet | Defines the relationship between the current document and the targeted document. |
| title | String | in | no | The title of the stylesheet. | |
| media | String | in | no | Specifies on which device this stylesheet will apply. |
Body: allowed
Informal parameters: forbidden
Reserved parameters: none
This example demonstrates how a component (in this case Book) can declare
additional css files and use specific styles. In this case, both declarations
(a css file and an inline style) are rendered inside the
<head> tag of the containing page.
Home.html
<html jwcid="@Shell" title="Style Example">
<body jwcid="@Body">
<span jwcid="@Book"/>
</body>
</html>
Book.html
<link jwcid="@Style" href="main.css" media="all"/>
<style jwcid="@Relation" media="print">
body {background:none;}
</style>
Book details ...
Book.jwc
<component-specification allow-body="yes" allow-informal-parameters="no"> </component-specification>