Stylesheets

In addition to the Bootstrap stylesheet, Tapestry adds its own stylesheets to style some of its core components.

To add your own stylesheet(s) to the page, use either @Import in the Java class or <link> in the template.
Tapestry will slot your stylesheet(s) in after the others. This allows you to add your styles and override the others.

In this page we've used @Import. Our stylesheet affects class eg:
Hello, world.
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.

Tapestry can automatically load an alternative stylesheet for Internet Explorer. For more information see the references.

References: Cascading Style Sheet, Tapestry CSS Support, Asset: Bindings, @Import.

Home


<!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 &nbsp; 
     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>&lt;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>



package jumpstart.web.pages.examples.styling;

import org.apache.tapestry5.annotations.Import;

@Import(stylesheet = "css/examples/olive.css")
public class Stylesheets {

    public String getUsername() {
        return "world";
    }

}



.eg {
                margin: 20px 0;
                padding: 14px;
                color: olive;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}