THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
Tapestry CSS Support
Most web applications delegate to 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 CSSthe stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to be simple and semantic, which usually makes it easier to read and maintain.
Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for assets.
Default CSS Stylesheet
Tapestry includes a built-in stylesheet, default.css, is in 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 you to override Tapestry's default styles to be overriddenwith your own.
All the styles in the default stylesheet are prefixed with "t-" (for Tapestry).
Adding your own CSS
A page or component (for example, a layout component) that is rendering the <head> tag can add a stylesheet directly in the markup.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<head> <link href="/css/myappsite.css" rel="stylesheet" type="text/css"/> . . . |
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<head>
<link href="${context:css/myappsite.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
...
@Import Annotation
Another approach to adding a stylesheet is to include an @IncludeStylesheet annotation Import annotation (starting with Tapestry 5.2) on your component class:
| Code Block | ||||
|---|---|---|---|---|
| ||||
@IncludeStylesheet@Import(stylesheet="context:css/myappsite.css") public class MyComponent { } |
(For Tapestry 5.0 and 5.1, use the deprecated @IncludeStyleSheet annotation instead.)
As with included JavaScript libraries, each stylesheet will only be added once, regardless of the number of components that include it via the annotation.