Zope3 - Cascading Style Sheets - Style Guide

Introduction

No.	Tag	Class	Description	Sample HTML code	Rendered result
HTML elements
These elements are declared for use in standard page templates used in ZCML directives. Schema widgets also use these styles.
1	a	--	Link	<a href="#">a link</a>	a link
2	p	--	Block text	<p>block text</p>	block text
Form elements
1	form	--	form	<form>some text</form>	some text
2	div	row	Contains a input field with label	<div class="row"> label and input field </div>	label and input field
2.1	div	row div.label	Contains a input field with label	<div class="row"> <div class="label"> <label for="yx" title="xy"> Label text </label> </div> </div>	Label text
2.2	div	row div.field	Contains a input field with label	<div class="row"> <div class="field"> <input type=text" id="xy"> </div> </div>
2.3	div	row div.label div.field	Contains a input field with label	<div class="row"> <div class="field"> <label for="yx" title="xy"> Label text </label> <input type=text" id="xy"> </div> </div>	Label text

No.	Description	Sample HTML code
Form rules
Form fields
1	Use the following coding style to define form fields and labels.	<div class="row"> <div class="label"> <label for="yx" title="xy"> Label text </label> </div> <div class="field"> <input type=text" id="xy"...> </div> </div>
Associate labels explicitly with their controls
3	In other words it means: use <label> along with your <input type="text"/>, your <input type="checkbox"/> and your <input type="radio"/> elements. Using labels makes it possible to use the pointer on the label (by clicking on the label) to activate the input field, so that it is easier to focus a text input, a check box or a radio box, just like it is in heavy client applications such as Firefox. More information about "Labeling form controls": http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels	<div class="row"> <div class="label"> <label for="yx" title="xy"> Label text </label> </div> <div class="field"> <input type=text" id="xy"...> </div> </div>