Page added by Ulrich Stärk

Tapestry CSS Support

Cascading Style Sheets (CSS) is an important technology, even with Tapestry. Tapestry works best when the rendered HTML is simple and semantic – semantic meaning HTML that goes back to its roots, simple, straightforward, with tags used for structure and, as much as possible, details about font, color and layout delegated to CSS.

Default CSS Stylesheet

Tapestry includes a built-in stylesheet, default.css, is all HTML documents (documents that have an outer <html> element and a nested <head> element). The default.css stylesheet is always ordered first ... any additional stylesheets will come after. This allows Tapestry's default styles to be overridden.

All the styles in the default stylesheet are prefixed with "t-" (for Tapestry).

Adding your own CSS

A page or component that is rendering the <head> tag can add a stylesheet directly in the markup.

<head>
  <link href="" class="code-quote">"/css/myapp.css" rel="stylesheet" type="text/css"/>
  . . .


If you want to leverage Tapestry's localization support, you may want to make use of an expansion and the asset: binding prefix:


<head>
  <link href="" class="code-quote">"${context:css/myapp.css}" rel="stylesheet" type="text/css"/>
  . . .



The "context:" prefix means that the remainder of the expansion is a path to a context asset, a resource in the web application root (src/main/webapp in your workspace).

Using the IncludeStylesheet Annotation

Another approach to adding a stylesheet is to include an [IncludeStylesheet|../apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html] annotation on your component class:


@IncludeStylesheet("context:css/myapp.css")
public class MyComponent
{

}



As with included _javascript_ libraries, each stylesheet will only be added once, regardless of the number of components that include it via the annotation.

Change Notification Preferences

View Online

[CONF] Apache Tapestry > CSS

CSS

Page added by Ulrich Stärk

Tapestry CSS Support

Default CSS Stylesheet

Adding your own CSS

Using the IncludeStylesheet Annotation

Reply via email to