<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>Stylesheets</h3>
In addition to the Bootstrap stylesheet, Tapestry adds its own stylesheets to style some of its core components.<br/><br/>
To add your own stylesheet(s) to the page, use either <code>@Import</code> in the Java class or <code><link></code> in the template.<br/>
Tapestry will slot your stylesheet(s) in after the others. This allows you to add your styles and override the others.<br/><br/>
In this page we've used @Import. Our stylesheet affects class <code>eg</code>:
<div class="eg">
Hello, ${username}.
</div>
Components and mixins can also add stylesheets. Using @Import, each stylesheet will only be added once, regardless of
how many components and mixins in the page specify it.<br/><br/>
Tapestry can automatically load an alternative stylesheet for Internet Explorer. For more information see the references.<br/><br/>
References:
<a href="http://www.w3.org/Style/CSS/">Cascading Style Sheet</a>,
<a href="http://tapestry.apache.org/css.html">Tapestry CSS Support</a>,
<a href="http://tapestry.apache.org/component-parameters.html#ComponentParameters-Asset%3ABindings">Asset: Bindings</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/Import.html">@Import</a>.<br/><br/>
<t:pagelink page="Index">Home</t:pagelink><br/><br/>
<t:tabgroup>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/styling/Stylesheets.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/styling/Stylesheets.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/olive.css"/>
</t:tabgroup>
</body>
</html>