Style Sheets

Style Sheet Properties

Font Properties

Property Valid Values Sample Usage Applies to Inherited?
font-family [ [ family-name | generic-family ], ]* [ family-name | generic-family ] { font-family: Verdana, MS Sans Serif; } all elements yes
font-style normal | italic { font-style:italic; } all elements yes
font-variant normal | small-caps { font-variant:small-caps: } all elements yes
font-weight normal | bold { font-weight:bold; } all elements yes
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length { font-size:12pt; } all elements yes
font [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family { font: bold 12pt Arial; } all elements yes

Color and Background Properties

Property Valid Values Sample Usage Applies to Inherited?
color color { color:salmon; } all elements yes
background-color color | transparent { background-color:crimson; } all elements no
background-image url | none { background-image:url(bgWood.jpg); } all elements no
background-repeat repeat | repeat-x | repeat-y | no-repeat { background-repeat:no-repeat; } all elements no
background-attachment scroll | fixed { background-attachment:fixed; } all elements no
background-position [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] { background-position: top center;} block-level and replaced elements no
background transparent | color || url || repeat || scroll || position { background: silver url(bgRock.jpg) repeat-y } all elements no

Text Properties

Property Valid Values Sample Usage Applies to Inherited?
letter-spacing normal | length { letter-spacing:2pt; } all elements yes
text-decoration none | underline | overline | line-through { text-decoration:underline; } all elements no
vertical-align sub | super | { vertical-align:sub; } inline elements no
text-transform capitalize | uppercase | lowercase | none { text-transform:lowercase; } all elements yes
text-align left | right | center | justify { text-align:center; } block-level elements yes
text-indent length | percentage { text-indent:20px; } block-level elements yes
line-height normal | number | length | percentage { line-height:5pt; } all elements yes

Box Properties

Property Valid Values Sample Usage Applies to Inherited?
margin-top length | percentage | auto { margin-top:5px; } block-level and replaced elements no
margin-right length | percentage | auto { margin-right:5px; } block-level and replaced elements no
margin-bottom length | percentage | auto { margin-bottom:1em; } block-level and replaced elements no
margin-left length | percentage | auto { margin-left:5pt; } block-level and replaced elements no
margin length | percentage | auto {1,4} { margin: 10px 5px 10px 5px; } block-level and replaced elements no
padding-top length | percentage { padding-top:10%; } block-level and replaced elements no
padding-right length | percentage { padding-right:15px; } block-level and replaced elements no
padding-bottom length | percentage { padding-bottom:1.2em; } block-level and replaced elements no
padding-left length | percentage { padding-left:10pt; } block-level and replaced elements no
padding length | percentage {1,4} { padding: 10px 10px 10px 15px; } block-level and replaced elements no
border-top-width thin | medium | thick | length { border-top-width:thin; } block-level and replaced elements no
border-right-width thin | medium | thick | length { border-right-width:medium; } block-level and replaced elements no
border-bottom-width thin | medium | thick | length { border-bottom-width:thick; } block-level and replaced elements no
border-left-width thin | medium | thick | length { border-left-width:15px; } block-level and replaced elements no
border-width thin | medium | thick | length {1,4} { border-width: 3px 5px 3px 5px; } block-level and replaced elements no
border-top-color color { border-top-color:navajowhite; } block-level and replaced elements no
border-right-color color { border-right-color:whitesmoke; } block-level and replaced elements no
border-bottom-color color { border-bottom-color:black; } block-level and replaced elements no
border-left-color color { border-left-color:#C0C0C0; } block-level and replaced elements no
border-color color {1,4} { border-color: green red white blue; } block-level and replaced elements no
border-top-style none | solid | double | groove | ridge | inset | outset { border-top-style:solid; } block-level and replaced elements no
border-right-style none | solid | double | groove | ridge | inset | outset { border-right-style:double; } block-level and replaced elements no
border-bottom-style none | solid | double | groove | ridge | inset | outset { border-bottom-style:groove; } block-level and replaced elements no
border-left-style none | solid | double | groove | ridge | inset | outset { border-left-style:none; } block-level and replaced elements no
border-style none | solid | double | groove | ridge | inset | outset { border-style:ridge; } block-level and replaced elements no
border-top border-width | border-style | border-color { border-top: medium outset red; } block-level and replaced elements no
border-right border-width | border-style | border-color { border-right: thick inset maroon; } block-level and replaced elements no
border-bottom border-width | border-style | border-color { border-bottom: 10px ridge gray; } block-level and replaced elements no
border-left border-width | border-style | border-color { border-left: 1px groove red; } block-level and replaced elements no
border border-width | border-style | border-color { border: thin solid blue; } block-level and replaced elements no
float none | left | right { float:none; } DIV, SPAN, and replaced elements no
clear none | left | right | both { clear:left; } all elements no

Classification Properties

Property Valid Values Sample Usage Applies to Inherited?
display none | block | inline | list-item { display:none; } TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, IFRAME, IMG, BODY, MARQUEE, SELECT no
list-style-type disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none { list-style-type:upper-alpha; } list-item elements yes
list-style-image url | none { list-style-image:url(icFile.gif); } list-item elements yes
list-style-position inside | outside { list-style-position:inside; } list-item elements yes
list-style keyword || position || url { list-style: square outside url(icFolder.gif); } list-item elements yes

Positioning Properties

Property Valid Values Sample Usage Applies to Inherited?
clip shape | auto { clip:rect(0px 200px 200px 0px); } all elements no
height length | auto { height:200px; } DIV, SPAN and replaced elements no
left length | percentage | auto { left:0px; } absolutely and relatively positioned elements no
overflow visible | hidden | scroll | auto { overflow:scroll; } all elements no
position absolute| relative | static { position:absolute; } all elements no
top length | percentage | auto { top:0px; } absolutely and relatively positioned elements no
visibility visible | hidden | inherit { visibility:visible; } all elements no
width length | percentage | auto { width:80%; } DIV, SPAN and replaced elements no
z-index auto | integer { z-index:-1; } absolutely and relatively positioned elements no

Printing Properties

These two properties allow the developer to specify exact locations for page breaks that affect the printing of the document.

Property Valid Values Sample Usage Applies to Inherited?
page-break-before auto | always || left | right { page-break-before:always; } block-level elements no
page-break-after auto | always || left | right { page-break-before:auto; } block-level elements no

Pseudo Classes and Other Properties

Property Valid Values Sample Usage Applies to Inherited?
cursor2 auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help { cursor:hand; } all elements yes
active, hover2, link, visited n/a a:hover { color:red; } all elements yes
first-letter, first-line n/a p:first-letter { font-size: 3em; float: left;} all elements no



Sizzling HTML Jalfrezi
ContactPurchase
Page Contents
Previous pageJalfrezi ContentsNext page

Click Here!