カスケーディングスタイルシート(CSS)はTapestryにおいても重要な技術のひとつです。 レンダリングされたHTMLがシンプルでセマンティックなときにTapestryは最もうまく動作します -- セマンティックとは、タグは文書構造を記述するために用いるという単純でまっすぐなHTMLのルーツへ還り、 フォントや色やレイアウトの詳細はできる限りCSSに委譲する、ということです。
Tapestryは組み込みのスタイルシートである default.css を持っており、 (<html>要素があり、その内側に<head>要素がある)全てのHTMLドキュメントに使用されます。 default.css スタイルシートは常に 一番最初 です ... そして他のスタイルシートがそれに続きます。 これにより、Tapestryのデフォルトスタイルを上書きすることができます。
デフォルトスタイルシート内のスタイルは全て、(Tapestry用であることを表す) "t-" が頭に付いています。
<head> タグをレンダリングするページまたはコンポーネントは、マークアップ内に直接スタイルシートを追加することができます。
<head> <link href="/css/myapp.css" rel="stylesheet" type="text/css"/> . . .
Tapestryのローカライズ機能を使いたい場合、式展開と asset: バインディングプリフィックスを使います。
<head>
<link href="${asset:context:css/myapp.css}" rel="stylesheet" type="text/css"/>
. . ."asset:" プリフィックスは式の残りの部分がリソースへのパスであることを示します。"context:" の部分は、 Webアプリケーションのルート(ワークスペース内の src/main/webapp)にあるリソースであることを示します。 "context:" が無い場合はクラスパス内のリソースであり、コンポーネントのJavaクラスからの相対パスとなります。
別の方法として、コンポーネントクラスに IncludeStylesheet アノテーションを付ける方法もあります。
@IncludeStylesheet("context:css/myapp.css")
public class MyComponent
{
}アノテーションによってスタイルシートをインクルードするコンポーネントが複数あっても、 JavaScriptライブラリの場合と同様に、各スタイルシートは一度しかインクルードされません。