Skip to Content

Changes for page Development-CSS

Last modified by Pascal Robert on 2010/09/13 00:25
From version 3.1
edited by Quinton Dolan
on 2007/07/12 20:21
Change comment: There is no comment for this version
To version 4.1
edited by Pascal Robert
on 2007/09/03 15:19
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Programming__WebObjects-Web Applications-Development-CSS
1 +Web Applications-Development-CSS
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.qdolan
1 +XWiki.probert
Content
... ... @@ -1,10 +1,10 @@
1 -== Overview ==
1 +== Overview ==
2 2  
3 3  CSS stands for Cascading Style Sheets. It's provides a mechanism to separate the presentation of your HTML page from the logical structure and content of your HTML page.
4 4  
5 -== Referencing a Style Sheet ==
5 +== Referencing a Style Sheet ==
6 6  
7 -=== Style Block ===
7 +=== Style Block ===
8 8  
9 9  The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
10 10  
... ... @@ -20,7 +20,7 @@
20 20  
21 21  {{/code}}
22 22  
23 -=== Static Reference ===
23 +=== Static Reference ===
24 24  
25 25  Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
26 26  
... ... @@ -32,11 +32,11 @@
32 32  
33 33  However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
34 34  
35 -=== Project WOnder ===
35 +=== Project WOnder ===
36 36  
37 37  Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
38 38  
39 -=== Mike Schrag's MDTStyleSheet ===
39 +=== Mike Schrag's MDTStyleSheet ===
40 40  
41 41  The following dynamic element can be used to include a stylesheet in your page. It supports the bindings "rel", "type", "href", "src", etc similar to a WOImage.
42 42  
... ... @@ -65,9 +65,9 @@
65 65  
66 66  {{/code}}
67 67  
68 -== Stylesheet Component ==
68 +== Stylesheet Component ==
69 69  
70 -Here is a trivial example on how to define style sheets properties at
70 +Here is a trivial example on how to define style sheets properties at
71 71  runtime:
72 72  
73 73  Simply create a component with your style sheets properties:
... ... @@ -108,7 +108,7 @@
108 108   .TwoThirdWidth { width: 66%; text-align:left; vertical-align:top; }
109 109   .FixColumn { width: 250px; text-align:left; vertical-align:top; }
110 110  
111 - .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>);
111 + .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>);
112 112   background-position: center center; background-repeat: no-repeat; }
113 113  </style>
114 114  
... ... @@ -152,10 +152,8 @@
152 152  
153 153  {{/code}}
154 154  
155 -== Related Links ==
155 +== Related Links ==
156 156  
157 157  * [[CSS Programming]]
158 158  * [[CSS on Wikipedia>>http://en.wikipedia.org/wiki/Cascading_Style_Sheets]]
159 159  * [[W3 Schools on CSS>>http://www.w3schools.com/css/default.asp]]
160 -
161 -Category:WebObjects