Style

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.

See also: Relation , Shell

Parameters

Name Type Required Default Description
href String or IAsset 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 no literal:stylesheet Defines the relationship between the current document and the targeted document.
title String no The title of the stylesheet.
media String no Specifies on which device this stylesheet will apply.

Body: allowed

Informal parameters: forbidden

Reserved parameters: none

Examples

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>