59 60 iv XHTML Mobile Profile Reference Version 1.0 Contents
61 62 See “
Attributes
class Element class. id Element identity. style Specifies style properties. See “Using Style Sheets” on page 4. title Element title. xml:lang Element language code. If set, this overrides the language code set by a parent element. media The destination medium for the style information. type text/css | text/javascript Defines the content type. xml:space preserve Preserves spacing.
Version 1.0 XHTML Mobile Profile Reference 63 Elements and Attributes 2
Examples The following XHTML-MP document generates the display shown in Figure 2-29.
This is a red paragraph.
This paragraph has no style settings.
This is a red paragraph.
Figure 2-30.
Blue heading And this is blue text
Type Selector The type selector specifies style rules for a specific element. All instances of the element in the document use the style rules.
Pattern Meaning E Matches any E element.
Type Selector Blue heading 76 XHTML Mobile Profile Reference Version 1.0 CSS Selectors Selectors 3
Descendent Selectors You can use descendent selectors to apply style rules to an element if it is contained within a specified element. The style rules are applied no matter how deeply nested the second element is within the first element.
Pattern Meaning E F Matches any F element that is a descendent of an E element. Not limited to two elements in the list. The universal selector can be used.
Descendent Selector List Item 1 is Red List Item 2 is Red List Item 1 is normal List Item 2 is normal Version 1.0 XHTML Mobile Profile Reference 77 CSS Selectors 3 Selectors
Child Selectors The child selector refines the descendent selector. You can use this selector to specify the exact nesting to which the style rules are applied.
Pattern Meaning F>E Matches any E element that is a child of an F element. The universal selector can be used. G>F>E Matches any E element that is a child of an F element that is a child of a G element. and so on...
Child Selector Table of Contents
This word is red.
Class Selectors Class selectors apply to elements whose class attribute is set to a value listed in the style sheet. Class selectors can apply to specific elements or to all elements.
Pattern Meaning .class_name Matches any element with the class attribute set to class_name. E.class_name Matches any E element with the class attribute set to class_name.
Class Selector Green heading This text is red.
78 XHTML Mobile Profile Reference Version 1.0 CSS Selectors Selectors 3
Link Pseudo Class Selectors You can use style sheet selectors to specify the display of links both before and after they’ve been visited. These selectors have no effect on nonhyperlink elements.
Pattern Meaning E:link Matches element E if the element is a link that has not been visited. E:visited Matches element E if the element is a link that has been visited.
Link Pseudo Class Selectors Openwave Systems ID Selectors ID selectors apply to elements whose id attribute is set to a value listed in the style sheet. ID selectors can apply to specific elements or to all elements.
Pattern Meaning #id_name Matches any element with an id attribute set to id_name. E#id_name Matches any E element with an id attribute set to id_name.
ID Selector Green heading This text is red.
Version 1.0 XHTML Mobile Profile Reference 79 CSS Selectors 3 Selectors
80 XHTML Mobile Profile Reference Version 1.0 Chapter 4 CSS Properties 4
The Openwave Mobile Browser supports the following Cascading Style Sheets (CSS) properties.
Text Properties The text style properties affect how text appears on a page.
Property Description Values Example vertical-align Sets the vertical alignment of baseline, img {vertical-align: middle} an element's baseline with sub, super, Places the image in the middle of the respect to the line-height top, baseline. of its parent element. Can text-top, only be applied to inline middle, elements. bottom, text-bottom text-align Sets the horizontal alignment left H3 {text-align: center} of the text in an element. Can right Places the heading in the middle of the only be applied to block-level center line. elements. text-indent Sets the indentation of the cm p {text-indent: 2em} first line in an element. Most em Indents the first line of the paragraph 2 em often used to create a tab ex spaces. effect for paragraphs. in Applies only to block-level mm elements; negative values are pc permitted. px pt %
Version 1.0 XHTML Mobile Profile Reference 81 CSS Properties 4 Text Properties
Property Description Values Example word-spacing Sets the amount of white cm p {word-spacing: 1pt} space between words in em Puts an extra 1 point of space between each addition to the normal word ex word in the paragraph. spacing. Words are defined in as strings of characters mm surrounded by white space. pc px pt % letter-spacing Sets the amount of white cm p {letter-spacing: 0} space between letters in em Prevents any extra space from being added addition to the normal ex between letters in a paragraph. spacing. Letters are defined in as any displayed character. mm pc px pt % white-space Defines how white space nowrap, h1 {white-space: nowrap } within the element is treated. overflow The heading is not wrapped. line-height Sets the vertical distance cm p {line-height: 12pt} between baselines in an em Sets 12 points of space from baseline to element. Negative values are ex baseline in a paragraph. not permitted. in mm pc px pt % text-decoration Sets certain effects to the none, h1 {text-decoration: underline} text, such as underline and underline, Underlines all level 1 headings. blink. Combinations of the blink values are legal.
82 XHTML Mobile Profile Reference Version 1.0 CSS Properties Font Properties 4
Font Properties The Openwave Mobile Browser supports the font properties listed in the following table. Font property support includes font name matching but does not include font name synthesis.
Property Description Values Example font-family Declares a specific font family name p {font-family: helvetica, to be used, or a generic generic name arial, sans-serif} font family, or both. (serif or sans- Displays the paragraph in Helvetica, if Mobile devices may serif) available. If not, tries Arial, and then any support a limited sans-serif font family. number of fonts. font-style Selects between italics normal, italic h1 {font-family: arial; font- and normal. style: italic} Displays the heading in Arial and italic. font-weight Selects between normal normal, bold blockquote {font-weight: bold} and bold weight. Displays the blockquote in bold. font-size Sets the size of the font. larger, smaller, p {font-size: 12pt} This can be defined in x-small, small, Displays the paragraph in 12-point type. absolute size, relative medium, large, size, or percentage. x-large h1 {font-size: 150%} Displays all level 1 headlines at 150% of their normal size. font Shorthand for the P { font: italic bold 12pt various font properties. Times, serif } The paragraph is displayed in italics, bold, 12pt, Times font. If Times is not available, another serif font is used.
Version 1.0 XHTML Mobile Profile Reference 83 CSS Properties 4 Background Properties
Background Properties You can use the background properties to set foreground or text colors, background colors, and background images.
Property Description Values Example color Sets the color of a color name p {color: red} given element. For hex value Displays the paragraph text in text, this sets the text red. color; for other elements, such as HR, it sets the foreground color. Mobile devices may support a limited number of colors. background-color Sets the background color name h1 {background-color: color of an element. hex value green} This background Displays the background area of extends out to the edge all level 1 headings in green. of the element's border. Mobile devices may support a limited number of colors. background-image Sets an image to be the url, localsrc blockquote {background- background pattern. In image: conjunction with the url (..images/sand.gif)} other background Displays the sand.gif image in properties, tiles or the
element repeats in one background area. direction only. background-repeat Sets the repeat style repeat, repeat-x, blockquote {background- for a background repeat-y, no-repeat image: image. url (..images/sand.gif); background-repeat: repeat} Displays the sand.gif image in the element background area and repeats the image vertically and horizontally to fill the entire background area. background Shorthand for the more table {background: specific background- #00FF00} related properties. Sets a green background for all tables in the document. 84 XHTML Mobile Profile Reference Version 1.0 CSS Properties Margin Properties 4
Margin Properties You can use the margin properties to change an element’s default margins.
Property Description Values Example margin-left Sets the size of the left margin of cm div {margin-left: 6em} em an element. Negative values are Places the
element left permitted. ex margin 6 em spaces from the left of in the page. mm pc px pt % margin-right Sets the size of the right margin of cm div {margin-right: 1em} em an element. Negative values are Places the
element right permitted. ex margin 1 em space from the right of in the page. mm pc px pt % margin-top Sets the size of the top margin of cm div {margin-top: 2em } em an element. Negative values are Places the
element 2 em permitted. ex spaces further down the page. in mm pc px pt % margin-bottom Sets the size of the bottom margin cm div {margin-bottom: 2cm} of an element. Negative values are em Creates a 2 cm margin below the ex permitted.
element. in mm pc px pt % margin Shorthand for margin-related
h1 {margin: 10px} properties. Makes all margins 10 pixels wide. Version 1.0 XHTML Mobile Profile Reference 85 CSS Properties 4 Border Properties
Border Properties You can use the border properties to create borders to elements. The Openwave Mobile Browser supports only solid border style.
Property Description Values Example border-left-width Sets the left cm table {border-left-width: border width. em 4px} ex Displays the left border 4 pixels wide. in mm pc px pt % border-right-width Sets the right cm table {border-right-width: border width. em 4px} ex Displays the right border 4 pixels in wide. mm pc px pt % border-top-width Sets the top cm table {border-top-width: border width. em 4px} ex Displays the top border 4 pixels wide. in mm pc px pt % border-bottom-width Sets the cm table {border-bottom-width: bottom em 4px} border width. ex Displays the bottom border 4 pixels in wide. mm pc px pt % border-left-color Sets the left color name table {border-left-color: border color. hex value #00FF00} Mobile Displays the left border in green. devices may support a limited number of colors.
86 XHTML Mobile Profile Reference Version 1.0 CSS Properties Border Properties 4
Property Description Values Example border-right-color Sets the right color name table {border-right-color: border color. hex value #00FF00} Mobile Displays the right border in green. devices may support a limited number of colors. border-top-color Sets the top color name table {border-top-color: border color. hex value #00FF00} Mobile Displays the top border in green. devices may support a limited number of colors. border-bottom-color Sets the color name table {border-bottom-color: bottom hex value #00FF00} border color. Displays the bottom border in green. Mobile devices may support a limited number of colors. border-left Shorthand table { border-left: 2pt for left #00FF00} border Displays the left border 2 points wide properties. in green. border-right Shorthand table { border-right: 2pt for left #00FF00} border Displays the right border 2 points properties. wide in green. border-top Shorthand table { border-top: 2pt for left #00FF00} border Displays the top border 2 points wide properties. in green. border-bottom Shorthand table { border-bottom: 2pt for left #00FF00} border Displays the bottom border 2 points properties. wide in green. border Shorthand table {border: 4pt #FF0000 for all border Displays all borders 4 points wide in properties. red.
Version 1.0 XHTML Mobile Profile Reference 87 CSS Properties 4 Padding Properties
Padding Properties You can use the padding properties to define an object and its margin or border.
Property Description Values Example padding-left Sets the left padding cm td { padding-left:1cm } between an object and em Sets the left padding in the table cell at its left margin or border. ex 1cm. in mm pc px pt % padding-right Sets the right padding cm td { padding-right:1cm } between an object and em Sets the right padding in the table cell at its right margin or ex 1 cm. border. in mm pc px pt % padding-top Sets the top padding cm td { padding-top:1cm } between an object and em Sets the top padding in the table cell at 1 its top margin or border. ex cm. in mm pc px pt % padding-bottom Sets the bottom padding cm td { padding-bottom:1cm } between an object and em Sets the bottom padding in the table cell its bottom margin or ex at 1 cm. border. in mm pc px pt % padding Shorthand for padding td { padding-bottom:1cm } properties. Sets all padding in the table cell at 1 cm.
88 XHTML Mobile Profile Reference Version 1.0 CSS Properties Dimension Properties 4
Dimension Properties You can use the dimension properties to change an element’s default height and width.
Property Description Values Example height Sets the element height. cm img.button {height: 70px} em Sets all button class images 70 pixels high. ex in mm pc px pt % width Sets the element width. cm img.button {width: 100px} em Sets all button class images 100 pixels wide. ex in mm pc px pt %
Version 1.0 XHTML Mobile Profile Reference 89 CSS Properties 4 Classification Properties
Classification Properties You can use the classification properties to define bullets, images, and positioning for ordered and unordered lists.
Property Description Values Example list-style-type Declares the type disc, circle, square ul {list-style-type: of bullets or decimal square} numbers in an Displays unordered list items unordered or with square bullets. ordered list. Applies to elements with a display value of list-item. list-style-image Declares an src, localsrc ul {list-style-image: url image to be used (../images/smiley.gif) } as the bullet in an Displays unordered list items unordered list. with the smiley.gif image as Applies to the bullet. elements with a display value of list-item. list-style-position Declares the inside, outside ul {list-style-position: position of the outside } bullet or number Creates a hanging indent. in an unordered or ordered list ul {list-style-postion: with respect to inside } the content of the Sets the bullet and the second line list item. Applies of the text flush left. to elements with a display value of list-item. list-style Shorthand for ol {list-style: decimal list-style inside} properties. Displays ordered list with decimal numbering positioned inside.
90 XHTML Mobile Profile Reference Version 1.0 Index
Symbols b element 13–14 !DOCTYPE element 7 big element 16 blockquote element 17–18 body element 18 A border 87 abbr attribute border-bottom 87 in td element 67 border-bottom-color 87 in th element 70 border-bottom-width 86 abbr element 11 border-left 87 accesskey attribute 8 border-left-color 86 accesskey attribute border-left-width 86 in a element 9 border properties 86–87 in input element 39 border-right 87 in label element 43 border-right-width 86 in textarea element 68 border-top 87 acronym element 11–12 border-top-color 87 action attribute border-top-width 86 in form element 30 bottom-right-color 87 address element 12–13 br element 18–19 a element 8–10 align attribute C in td element 67 in th element 70, 71 caption element 19 alt attribute charset attribute in img element 37 in a element 9 archive attribute in link element 45 in object element 49 checked attribute axis attribute in input element 39 in td element 67 child selectors 78 in th element 70 cite attribute in blockquote element 17 in q element 57 B cite element 20–21 background 84 class attribute background-color 84 in abbr element 11 background-image 84 in acronym element 12 background properties 84 in address element 12 background-repeat 84 in a element 9, 70 base element 15 in b element 14
Version 1.0 XHTML Mobile Profile Reference 91 Index
in big element 16 in object element 49 in blockquote element 17 color 84 in body element 18 color properties 84 in br element 19 colors 4 in caption element 19 cols attribute in cite element 20 in textarea element 68 in code element 21 colspan attribute in dd element 23 in td element 67 in dfn element 24 in th element 70 in div element 25 comments 7 in dl element 26 content attribute in dt element 27 in meta element 48 in em element 27 in fieldset element 29 D in form element 30 in h1 to h6 element 31 data attribute in hr element 33 in object element 49 in i element 34 dd element 22–23 in img element 37 declare attribute in input element 39 in object element 49 in kdb element 41 descendent selectors 77 in label element 43 dfn element 24 in li element 44 dimension properties 89 in link element 45 disabled attribute in object element 49 in optgroup element 52 in ol element 51 div element 25–26 in optgroup element 52 dl element 26 in option element 53 dt element 27 in p element 54 in pre element 56 E in q element 57 in samp element 58 elements 3 in select element 59 !DOCTYPE 7 in small element 60 a 8–10 in span element 61 abbr 11 in strong element 62 acronym 11–12 in style element 63 address 12–13 in table element 65 b 13–14 in td element 67 base 15 in textarea element 68 big 16 in tr element 71 blockquote 17–18 in ul element 72 body 18 in var element 74 br 18–19 classid attribute caption 19 in object element 49 cite 20–21 classification properties 90 code 21–22 class selectors 78 dd 22–23 codebase attribute dfnDefault Para font> 24 in object element 49 divDefault Para font> 25–26 code element 21–22 dl 26 codetype attribute dt 27
92 XHTML Mobile Profile Reference Version 1.0 Index
em 27–28 in label element 43 fieldset 28–29 form element 30 form 30 h1 to h6 31–32 G head 32 hr 32–33 grouping 75 html 33 i 34 H img 35–39 input 39–41 h1 to h6 element 31–32 kbd 41–42 head element 32 label 43 headers attribute li 44 in td element 67 link 45–46 in th element 70 meta 47–48 height 89 object 49–50 height attribute ol 50–51 in img element 37 optgroup 52 in object element 49 option 52–54 href attribute 8 p 54 href attribute param 55 in a element 9 pre 55–56 in base element 15 q 57 in link element 45 samp 58 hreflang attribute select 59 in a element 9 small 60 in link element 45 span 61 hr element 32–33 strong 62 html element 33 style 63–64 http-equiv attribute table 65–66 in meta element 48 td 67 hyperlinks 8 textarea 68–69 th 69–70 I title 71 icons 35 tr 71–72 id attribute ul 72–73 in abbr element 11 var 74 in acronym element 12 em element 27–28 in address element 12 enctype attribute in a element 9, 70 in form element 30 in b element 14 in big element 16 F in blockquote element 17 fieldset element 28–29 in body element 18 font 83 in br element 19 font-family 83 in caption element 19 font properties 83 in cite element 20 font-size 83 in code element 21 font-style 83 in dd element 23 font-weight 83 in dfn element 24 for attribute in div element 25
Version 1.0 XHTML Mobile Profile Reference 93 Index
in dl element 26 line-height 82 in dt element 27 link element 4 in em element 27 link element 45–46 in fieldset element 29 link pseudo class selectors 79 in form element 30 links 8 in h1 to h6 element 31 list-style 90 in hr element 33 list-style-image 90 in i element 34 list-style-position 90 in img element 37 list-style-type 90 in input element 39 longdesc attribute in kdb element 41 in img element 37 in label element 43 in li element 44 M in link element 45 in object element 49 margin 85 in ol element 51 margin-bottom 85 in optgroup element 52 margin-left 85 in option element 53 margin properties 85 in param element 55 margin-right 85 in p element 54 margin-top 85 in pre element 56 maxlength attribute in q element 57 in input element 39 in samp element 58 media attribute in select element 59 in link element 45 in small element 60 in style element 63 in span element 61 meta element 47–48 in strong element 62 method attribute in style element 63 in form element 30 in table element 65 MIME type 9, 45, 49, 55 in td element 67 mobile browser device viii in textarea element 68 multiple attribute in tr element 71 in select element 59 in ul element 72 in var element 74 N ID selectors 79 i element 34 name attribute img element 35–39 in input element 39 inheritance 75 in meta element 48 input element 39–41 in object element 49 in param element 55 in select element 59 K in textarea element 68 kbd element 41–42 O L object element 49–50 label attribute ol element 50–51 in optgroup element 52 optgroup element 52 label element 43 option element 52–54 letter-spacing 82 li element 44
94 XHTML Mobile Profile Reference Version 1.0 Index
P select element 59 padding 88 selectors 75–79 padding-bottom 88 child 78 padding-left 88 class 78 padding properties 88 descendent 77 padding-right 88 ID 79 padding-top 88 link pseudo class 79 param element 55 type 76 p element 54 universal 76 pre element 55–56 size attribute profile attribute in input element 39 in head element 32 in select element 59 properties 81–90 small element 60 background 84 span element 61 border 86–87 src attribute classification 90 in img element 37 color 84 in input element 40 dimension 89 standby attribute font 83 in object element 49 margin 85 start attribute padding 88 in ol element 51 text 81–82 strong element 62 style attribute 5 style attribute Q in abbr element 11 q element 57 in acronym element 12 in address element 12 in a element 9, 70 R in b element 14 rel attribute in big element 16 in a element 9 in blockquote element 17 in link element 45 in body element 18 requirements 3 in br element 19 rev attribute in caption element 19 in a element 9 in cite element 20 in link element 45 in code element 21 rows attribute in dd element 23 in textarea element 68 in dfn element 24 rowspan attribute in div element 25 in td element 67 in dl element 26 in th element 70 in dt element 27 in em element 27 in fieldset element 29 S in form element 30 samp element 58 in h1 to h6 element 31 scheme attribute in hr element 33 in meta element 48 in i element 34 scope attribute in img element 37 in td element 67 in input element 39 in th element 70 in kdb element 41 selected attribute 53 in label element 43
Version 1.0 XHTML Mobile Profile Reference 95 Index
in li element 44 in blockquote element 17 in link element 45 in body element 18 in object element 49 in br element 19 in ol element 51 in caption element 19 in optgroup element 52 in cite element 20 in option element 53 in code element 21 in p element 54 in dd element 23 in pre element 56 in dfn element 24 in q element 57 in div element 25 in samp element 58 in dl element 26 in select element 59 in dt element 27 in small element 60 in em element 27 in span element 61 in fieldset element 29 in strong element 62 in form element 30 in style element 63 in h1 to h6 element 31 in table element 65 in hr element 33 in td element 67 in i element 34 in textarea element 68 in input element 39 in tr element 71 in kdb element 41 in ul element 72 in label element 43 in var element 74 in li element 44 style element 63–64 in link element 45 style guide 3 in object element 49 style sheets 4 in ol element 51 in optgroup element 52 in option element 53 T in p element 54 tabindex attribute in pre element 56 in a element 9 in q element 57 in input element 40 in samp element 58 in object element 49 in select element 59 in select element 59 in small element 60 in textarea element 68 in span element 61 table attribute in strong element 62 in table element 65 in style element 63 table element 65–66 in table element 65 targets 8 in td element 67 td element 67 in textarea element 68 text-align 81 in tr element 71 textarea element 68–69 in ul element 72 text-decoration 82 in var element 74 text-indent 81 title element 71 text properties 81–82 tr element 71–72 th element 69–70 type attribute title attribute in a element 9 in abbr element 11 in input element 40 in acronym element 12 in link element 45 in address element 12 in object element 49 in a element 9, 37, 70 in param element 55 in b element 14 in style element 63 in big element 16 type selector 76
96 XHTML Mobile Profile Reference Version 1.0 Index
U in em element 27 ul element 72–73 in fieldset element 29 universal selector 76 in form element 30 in h1 to h6 element 31 in head element 32 V in hr element 33 valign attribute in html element 33 in td element 67 in i element 34 in th element 70, 71 in img element 37 value attribute in input element 39 in input element 40 in kdb element 41 in li element 44 in label element 43 in option element 53 in li element 44 in param element 55 in link element 45 valuetype attribute in meta element 48 in param element 55 in object element 49 var element 74 in ol element 51 version attribute in optgroup element 52 in html element 33 in option element 53 vertical-align 81 in p element 54 in pre element 56 in q element 57 W in samp element 58 white-space 82 in select element 59 width 89 in small element 60 width attribute in span element 61 in img element 37 in strong element 62 in object element 49 in style element 63 word-spacing 82 in table element 65 in td element 67 in textarea element 68 X in title element 71 XHTML Basic 1 in tr element 71 xml lang attribute in ul element 72 in abbr element 11 in var element 74 in acronym element 12 xmlnsattribute in address element 12 in html element 33 in a element 9, 70 xml space attribute in b element 14 in pre element 56 in big element 16 in style element 63 in blockquote element 17 in body element 18 in br element 19 in caption element 19 in cite element 20 in code element 21 in dd element 23 in dfn element 24 in div element 25 in dl element 26 in dt element 27
Version 1.0 XHTML Mobile Profile Reference 97 Index
98 XHTML Mobile Profile Reference Version 1.0