7.1

Styling
The style files hold the styling parameters for your skin. It defines the fonts, colors, borders, backgrounds, width and height
specifications of the user interface elements.
This section contains answers to the following questions:
l "Tags, IDs and classes" (page 223)
l "CSS Syntax" (page 223)
l "Style organization" (page 224)
Key Concepts
To apply styling to HTML elements, you should understand the following key concepts:
l "Tags, IDs and classes" (page 223)
l "CSS Syntax" (page 223)
Tags, IDs and classes
Each element on the page is rendered using standard HTML tags or by using <div> and <span> tags that have a unique iden-
tifier and/or a class.
IDs are used when there is only one occurrence on a page, classes are used when there are one or more occurrences on a
page. CSS IDs are similar to classes in that they define a special case for an element. In other words, they assign an identifier.
Standards specify that any given id name can only be defined once within a page or document.
You can reveal ID and class information by viewing the source of the web page or by using additional web developer browser
extensions. Your style files will need to refer to these elements to set their formatting.
<div id="fcCompanyNameLine">
<span id="fcCompanyNameLabel">Company name:
<span>*</span>
</span>
<span>
<input type="text" value="Oasis" name="fcCompanyName"
id="fcCompanyNameField"/>
</span>
</div>
CSS Syntax
The CSS syntax is made up of the following parts: a selector, a property and a value:
selector {property: value}
Normally the selector is the HTML element/tag you wish to style, the property is the attribute you wish to change, and each
property can take a value. A colon is used to separate the property and its value. They are surrounded by curly braces, see
the snippet below:
©2010 Objectif Lune Inc - 223 -