CSS Mobile Profile Tutorial - Properties
What is CSS Mobile Profile? Internet Programming 3 Description
This tutorial can be used as a reference for the properties and values contained in the CSS Mobile Profile.
The CSS Mobile Profile is a subset of CSS 2 specified to identify a minimum set of properties, selectors and values to support building Web pages for mobile devices.
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| font |
caption small-caption icon menu status-bar message-box |
Used for setting all the font properties in one declaration. | Yes |
font: oblique small-caps 900 12px/14px arial
font: menu
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| text-align |
left right center justify |
Used to align text in an element. | Yes |
text-align: right
text-align: center
|
| text-indent | length % | Used to indent the first line in an element. Note: Negative values are allowed | Yes |
text-indent: -5px
text-indent: 10px
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| list-style |
list-style-type list-style-position list-style-image |
Used for setting all of the properties for a list in one declaration | Yes |
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| color | color | Used for setting the color of a text. | Yes |
color: rgb(254,255,200)
color : #FFFFFF
color : blue
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| visibility |
visible hidden |
Used to set if an element should be visible or invisible. | No |
visibility: visible visibility: hidden |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| background |
background-color background-image background-repeat background-attachment background-position |
Used for setting all background properties in one declaration | No | background: #FFFFFF |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| margin |
margin-top margin-right margin-bottom margin-left |
Used for setting the margin properties in one declaration. | No |
h4 {margin: 20px} all margins will be 20pxh4 {margin: 20px 5%} top and bottom margin will be 20px, left and right margin will be 5% of the element width.h4 {margin: 20px 5% 5px} top margin will be 20px, left and right margin will be 5% of the element width, bottom margin will be 5px.h1 {margin: 20px 5% -5px auto} top margin will be 20px, right margin will be 5% of the total width of the element, bottom margin will be -5px, left margin will be set by the browser |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| border |
border-width border-style border-color |
Used for setting all of the properties for the four borders in one declaration. | No |
border: solid #FFFFFF 7pt
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| padding |
padding-top padding-right padding-bottom padding-left |
Used for setting all of the padding properties in one declaration. Note: Negative values are not allowed. | No |
div {padding: 2px}
padding will be 2px on all four sides
div {padding: 2px 2%}
top and bottom padding will be 2px, left and right
padding will be 2% of the width of the closest element.
div{padding: 2px 2% 2px}
top padding will be 2px, left and right padding will be 2%
of the width of the closest element, bottom padding will be 2px
div {padding:2px 2% 2px 2px}
top padding will be 2px, right padding will be 2% of the width
of the closest element, bottom padding will be 2px, left padding will be 2px
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| width |
auto % length |
Used for setting the width of an element | No |
width: 50px
|
| height |
auto length % |
Used for setting the height of an element | No |
height: 50px
|
| vertical-align |
baseline sub super top text-top middle bottom text-bottom length % |
Used to set the vertical alignment of an element. | No |
vertical-
vertical-
vertical-
vertical- |