css1 properties
DESCRIPTION
CSS1 propertiesTRANSCRIPT
Page 1CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
CSS1 Properties
Syntax Used in PropertyDefinitionsFont PropertiesColor and BackgroundPropertiesText PropertiesBox PropertiesClassificationPropertiesUnits
Syntax Used in Property Definitions
<Foo>Value of type Foo. Common types are discussedin the Units section.
FooA keyword that must appearliterally(though without case sensitivity). Commasand slashesmustalso appearliterally.
A B CA mustoccur, then B, then C, in that order.
A | BA or B mustoccur.
A || BA or B or both mustoccur, in any order.
[ Foo ]Brackets are used to group items together.
Foo*Foo is repeated zero or more times.
Foo+Foo is repeated one or more times.
Foo?Foo is optional.
Foo{A,B}Foo mustoccur at least A times and at mostB times.
Font Properties
Font FamilyFont StyleFont VariantFont WeightFont SizeFont
Font Family
Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
PossibleValues: <family-name>
Anyfont familyname maybe used
Page 2CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
<generic-family>
serif (e.g., Times)sans-serif (e.g., Arial or Helvetica)cursive(e.g., Zapf-Chancery)fantasy (e.g., Western)monospace(e.g., Courier)
InitialValue: Determinedby browser
Appliesto: All elements
Inherited: Yes
Font families maybe assignedby a specific font name or a genericfont family. Obviously, defininga specific font will not be as likely tomatch as a genericfont family. Multiplefamily assignmentscan be made, and if a specific font assignmentis made it shouldbe followedby a genericfamily name in case the first choice is not present.
A sample font-family declaration mightlook like this:
P { font-family: "New Century Schoolbook", Times, serif }
Notice that the first two assignmentsare specific type faces: New CenturySchoolbookand Times. However, since both of them are seriffonts, the genericfont familyis listed as a backup in case the system does not have either of these but has another serif font which meetsthe qualifications.
Anyfont name containingwhitespacemustbe quoted, with either single or double quotes.
The font family mayalso be given with the fontproperty.
Font Style
Syntax: font-style: <value>
PossibleValues: normal | italic | oblique
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The font-style propertydefines that the font be displayedin one of three ways: normal, italic or oblique (slanted). A samplestyle sheetwith font-style declarationsmight look like this:
H1 { font-style: oblique }P { font-style: normal }
Font Variant
Syntax: font-variant: <value>
PossibleValues: normal | SMALL-CAPS
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The font-variantpropertydetermines if the font is to displayin normalor SMALL-CAPS. Small-caps are displayedwhen all the letters ofthe word are in capitals with uppercasecharacters slightlylarger than lowercase. Later versionsof CSS maysupportadditionalvariantssuch as condensed, expanded, small-caps numeralsor other custom variants. An example of a font-variant assignmentwould be:
SPAN { font-variant: small-caps }
Page 3CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Font Weight
Syntax: font-weight: <value>
PossibleValues: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The font-weight propertyis used to specifythe weight of the font. The bolder and lightervalues are relative to the inherited font weight,while the other values are absolutefont weights.
Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is notavailable, an alternate will be chosen on the following basis:
500 may be switched with 400, and vice versa100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise
Some example font-weight assignmentswould be:
H1 { font-weight: 800 }P { font-weight: normal }
Font Size
Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
PossibleValues: <absolute-size>
xx-small | x-small| small | medium | large | x-large | xx-large
<relative-size>larger | smaller
<length><percentage> (in relation to parent element)
InitialValue: medium
Appliesto: All elements
Inherited: Yes
The font-size propertyis used to modify the size of the displayedfont. Absolutelengths (using units like pt and in) shouldbe usedsparinglydue to their weaknessin adaptingto different browsingenvironments. Fontswith absolutelengths can very easily be too smallor too large for a user.
Some example size assignmentswould be:
H1 { font-size: large }P { font-size: 12pt }LI { font-size: 90% }STRONG { font-size: larger }
Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these unitsunreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parentelement's font size. This makes rules like
H1 { font-size: 200% }
Page 4CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODYwould most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IEwould probably be considered xx-large.
Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.
Font
Syntax: font: <value>
PossibleValues: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
InitialValue: Not defined
Appliesto: All elements
Inherited: Yes
The font propertymaybe used as a shorthandfor the variousfont properties, as well as the line height. For example,
P { font: italic bold 12pt/14pt Times, serif }
specifies paragraphswith a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.
Color and Background Properties
ColorBackgroundColorBackgroundImageBackgroundRepeatBackgroundAttachmentBackgroundPositionBackground
Color
Syntax: color: <color>
InitialValue: Determinedby browser
Appliesto: All elements
Inherited: Yes
The color propertyallowsauthorsto specify the color of an element. See the Units section for color value descriptions. Some examplecolor rules include:
H1 { color: blue }H2 { color: #000080 }H3 { color: #0c0 }
To help avoid conflicts with user style sheets, backgroundand color propertiesshouldalways be specified together.
BackgroundColor
Page 5CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Syntax: background-color: <value>
PossibleValues: <color> | transparent
InitialValue: transparent
Appliesto: All elements
Inherited: No
The background-color propertysets the backgroundcolor of an element. For example:
BODY { background-color: white }H1 { background-color: #000080 }
To help avoid conflicts with user style sheets, background-imageshouldbe specified wheneverbackground-color is used. In mostcases, background-image: none is suitable.
Authorsmayalso use the shorthandbackgroundproperty, which is currentlybetter supportedthan the background-color property.
BackgroundImage
Syntax: background-image: <value>
PossibleValues: <url> | none
InitialValue: none
Appliesto: All elements
Inherited: No
The background-imagepropertysets the backgroundimage of an element. For example:
BODY { background-image: url(/images/foo.gif) }P { background-image: url(http://www.htmlhelp.com/bg.png) }
When a backgroundimage is defined, a similar backgroundcolor shouldalso be defined for those not loadingimages.
Authorsmayalso use the shorthandbackgroundproperty, which is currentlybetter supportedthan the background-imageproperty.
BackgroundRepeat
Syntax: background-repeat: <value>
PossibleValues: repeat | repeat-x | repeat-y | no-repeat
InitialValue: repeat
Appliesto: All elements
Inherited: No
The background-repeat propertydetermines how a specified backgroundimage is repeated. The repeat-x value will repeat the imagehorizontallywhile the repeat-y value will repeat the imagevertically. For example:
BODY { background: white url(candybar.gif); background-repeat: repeat-x }
In the above example, the image will only be tiled horizontally.
Authorsmayalso use the shorthandbackgroundproperty, which is currentlybetter supportedthan the background-repeat property.
BackgroundAttachment
Page 6CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Syntax: background-attachment: <value>
PossibleValues: scroll | fixed
InitialValue: scroll
Appliesto: All elements
Inherited: No
The background-attachmentpropertydetermines if a specified backgroundimagewill scroll with the content or be fixed with regard tothe canvas. For example, the following specifies a fixed backgroundimage:
BODY { background: white url(candybar.gif); background-attachment: fixed }
Authorsmayalso use the shorthandbackgroundproperty, which is currentlybetter supportedthan the background-attachmentproperty.
BackgroundPosition
Syntax: background-position: <value>
PossibleValues: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
InitialValue: 0% 0%
Appliesto: Block-level and replaced elements
Inherited: No
The background-positionpropertygives the initialposition of a specified backgroundimage. This propertymayonly be applied to block-level elements and replaced elements. (A replacedelementis one for which only the intrinsicdimensionsare known; HTMLreplacedelements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)
The easiestway to assigna backgroundposition is with keywords:
Horizontalkeywords(left, center, right)Vertical keywords(top, center, bottom)
Percentagesand lengths mayalso be used to assignthe position of the backgroundimage. Percentagesare relative to the size of theelement. Althoughlengths are allowed, they are not recommendeddue to their inherent weaknessin dealingwith differing displayresolutions.
When using percentagesor lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65%specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value suchas 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner ofthe element.
If only the horizontal value is given, the verticalposition will be 50%. Combinationsof lengths and percentagesare allowed, as arenegative positions. For example, 10% -2cm is permitted. However, percentagesand lengths cannot be combined with keywords.
The keywordsare interpretedas follows:
top left = left top = 0% 0%top = top center= centertop = 50% 0%right top = top right = 100% 0%left = left center= center left = 0% 50%center= centercenter= 50% 50%right = right center= centerright = 100% 50%bottomleft = left bottom= 0% 100%bottom= bottomcenter= centerbottom= 50% 100%bottomright = right bottom= 100% 100%
If the backgroundimageis fixed with regard to the canvas, the image is placed relative to the canvas insteadof the element.
Authorsmayalso use the shorthandbackgroundproperty, which is currentlybetter supportedthan the background-positionproperty.
Page 7CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Background
Syntax: background: <value>
PossibleValues: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The backgroundpropertyis a shorthandfor the more specific background-related properties. Some examples of backgrounddeclarationsfollow:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }BLOCKQUOTE { background: #7fffd4 }P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
A value not specified will receive its initialvalue. For example, in the first three rules above, the background-positionpropertywill beset to 0% 0%.
To help avoid conflicts with user style sheets, backgroundand color propertiesshouldalways be specified together.
Text Properties
Word SpacingLetter SpacingText DecorationVertical AlignmentText TransformationText AlignmentText IndentationLine Height
Word Spacing
Syntax: word-spacing: <value>
PossibleValues: normal | <length>
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The word-spacingpropertydefines an additionalamountof space betweenwords. The value mustbe in the length format; negativevalues are permitted.
Examples:
P EM { word-spacing: 0.4em }P.note { word-spacing: -0.2em }
Letter Spacing
Page 8CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Syntax: letter-spacing: <value>
PossibleValues: normal | <length>
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The letter-spacingpropertydefines an additionalamountof space betweencharacters. The value mustbe in the length format; negativevalues are permitted. A settingof 0 will prevent justification.
Examples:
H1 { letter-spacing: 0.1em }P.note { letter-spacing: -0.1em }
Text Decoration
Syntax: text-decoration: <value>
PossibleValues: none | [ underline || overline || line-through|| blink ]
InitialValue: none
Appliesto: All elements
Inherited: No
The text-decorationpropertyallowstext to be decorated through one of five properties: underline, overline, line-through, blink, or thedefault, none.
For example, one can suggestthat links not be underlinedwith
A:link, A:visited, A:active { text-decoration: none }
Vertical Alignment
Syntax: vertical-align: <value>
PossibleValues: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
InitialValue: baseline
Appliesto: Inlineelements
Inherited: No
The vertical-align propertymaybe used to alter the vertical positioningof an inline element, relative to its parent element or to theelement's line. (An inline elementis one which has no line break before and after it, for example, EM, A, and IMG in HTML.)
The value maybe a percentagerelative to the element's line-height property, which would raise the element's baseline the specifiedamountabove the parent's baseline. Negativevalues are permitted.
The value mayalso be a keyword. The following keywordsaffect the positioningrelative to the parent element:
baseline(align baselinesof element and parent)middle(align verticalmidpointof element with baselineplus half the x-height--the height of the letter "x"--of the parent)sub (subscript)super(superscript)text-top (align tops of element and parent's font)text-bottom(align bottoms of element and parent's font)
The keywordsaffecting the positioningrelative to the element's line are
top (align top of element with tallest element on the line)
Page 9CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
bottom(align bottom of element with lowestelement on the line)
The vertical-align propertyis particularlyuseful for aligningimages. Some examples follow:
IMG.middle { vertical-align: middle }IMG { vertical-align: 50% }.exponent { vertical-align: super }
Text Transformation
Syntax: text-transform: <value>
PossibleValues: none | Capitalize| UPPERCASE| lowercase
InitialValue: none
Appliesto: All elements
Inherited: Yes
The text-transformpropertyallowstext to be transformedby one of four properties:
capitalize (capitalizesfirst characterof each word)uppercase(capitalizesall characters of each word)lowercase(uses small letters for all characters of each word)none (the initialvalue)
Examples:
H1 { text-transform: uppercase }H2 { text-transform: capitalize }
The text-transformpropertyshouldonly be used to express a stylistic desire. It would be inappropriate, for example, to use text-transformto capitalizea list of countriesor names.
Text Alignment
Syntax: text-align: <value>
PossibleValues: left | right | center | justify
InitialValue: Determinedby browser
Appliesto: Block-level elements
Inherited: Yes
The text-align propertycan be applied to block-level elements (P, H1, etc.) to give the alignmentof the element's text. This propertyissimilar in function to HTML's ALIGNattributeon paragraphs, headings, and divisions.
Some examples follow:
H1 { text-align: center }P.newspaper { text-align: justify }
Text Indentation
Syntax: text-indent: <value>
PossibleValues: <length> | <percentage>
InitialValue: 0
Appliesto: Block-level elements
Inherited: Yes
Page 10CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
The text-indentpropertycan be applied to block-level elements (P, H1, etc.) to define the amountof indentationthat the first line of theelement shouldreceive. The value mustbe a length or a percentage; percentages refer to the parent element's width. A common use oftext-indentwould be to indent a paragraph:
P { text-indent: 5em }
Line Height
Syntax: line-height: <value>
PossibleValues: normal | <number> | <length> | <percentage>
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The line-height propertywill accept a value to control the spacing betweenbaselinesof text. When the value is a number, the line heightis calculated by multiplyingthe element's font size by the number. Percentagevalues are relative to the element's font size. Negativevalues are not permitted.
Line height mayalso be given in the fontpropertyalong with a font size.
The line-height propertycould be used to double space text:
P { line-height: 200% }
Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily makepages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.
Box Properties
Top MarginRight MarginBottom MarginLeft MarginMarginTop PaddingRight PaddingBottom PaddingLeft PaddingPaddingTop Border WidthRight Border WidthBottom Border WidthLeft Border WidthBorder WidthBorder ColorBorder StyleTop BorderRight BorderBottom BorderLeft BorderBorderWidthHeightFloatClear
Page 11CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Top Margin
Syntax: margin-top: <value>
PossibleValues: <length> | <percentage> | auto
InitialValue: 0
Appliesto: All elements
Inherited: No
The margin-top propertysets the top marginof an element by specifying a length or a percentage. Percentagevalues refer to the parentelement's width. Negativemarginsare permitted.
For example, the following rule would eliminate the top marginof a document:
BODY { margin-top: 0 }
Note that adjoiningverticalmarginsare collapsed to use the maximumof the marginvalues.
Right Margin
Syntax: margin-right: <value>
PossibleValues: <length> | <percentage> | auto
InitialValue: 0
Appliesto: All elements
Inherited: No
The margin-right propertysets the right marginof an element by specifying a length or a percentage. Percentagevalues refer to theparent element's width. Negativemarginsare permitted.
Example:
P.narrow { margin-right: 50% }
Note that adjoininghorizontal marginsare not collapsed.
Bottom Margin
Syntax: margin-bottom: <value>
PossibleValues: <length> | <percentage> | auto
InitialValue: 0
Appliesto: All elements
Inherited: No
The margin-bottompropertysets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to theparent element's width. Negativemarginsare permitted.
Example:
DT { margin-bottom: 3em }
Note that adjoiningverticalmarginsare collapsed to use the maximumof the marginvalues.
Page 12CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Left Margin
Syntax: margin-left: <value>
PossibleValues: <length> | <percentage> | auto
InitialValue: 0
Appliesto: All elements
Inherited: No
The margin-left propertysets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parentelement's width. Negativemarginsare permitted.
Example:
ADDRESS { margin-left: 50% }
Note that adjoininghorizontal marginsare not collapsed.
Margin
Syntax: margin: <value>
PossibleValues: [ <length> | <percentage> | auto ]{1,4}
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The marginpropertysets the marginsof an element by specifying betweenone and four values, where each value is a length, apercentage, or auto. Percentage values refer to the parent element's width. Negativemarginsare permitted.
If four values are given, they applyto top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If twoor three values are given, the missingvalues are taken from the opposite side.
Examplesof margindeclarationsinclude:
BODY { margin: 5em } /* all margins 5em */P { margin: 2em 4em } /* top and bottom margins 2em, left and right margins 4em */DIV { margin: 1em 2em 3em 4em } /* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */
Note that adjoiningverticalmarginsare collapsed to use the maximumof the marginvalues. Horizontalmarginsare not collapsed.
Usingthe marginpropertyallowsone to set all margins; alternatively, the propertiesmargin-top, margin-bottom, margin-left, andmargin-right maybe used.
Top Padding
Syntax: padding-top: <value>
PossibleValues: <length> | <percentage>
InitialValue: 0
Appliesto: All elements
Inherited: No
Page 13CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
The padding-top propertydescribes how much space to put betweenthe top border and the content of the selector. The value is either alength or a percentage. Percentagevalues refer to the parent element's width. Negativevalues are not permitted.
Right Padding
Syntax: padding-right: <value>
PossibleValues: <length> | <percentage>
InitialValue: 0
Appliesto: All elements
Inherited: No
The padding-right propertydescribes how much space to put betweenthe right border and the content of the selector. The value is eithera length or a percentage. Percentage values refer to the parent element's width. Negativevalues are not permitted.
Bottom Padding
Syntax: padding-bottom: <value>
PossibleValues: <length> | <percentage>
InitialValue: 0
Appliesto: All elements
Inherited: No
The padding-bottompropertydescribes how much space to put betweenthe bottom borderand the content of the selector. The value iseither a length or a percentage. Percentagevalues refer to the parent element's width. Negativevalues are not permitted.
Left Padding
Syntax: padding-left: <value>
PossibleValues: <length> | <percentage>
InitialValue: 0
Appliesto: All elements
Inherited: No
The padding-left propertydescribes how much space to put betweenthe left borderand the content of the selector. The value is either alength or a percentage. Percentagevalues refer to the parent element's width. Negativevalues are not permitted.
Padding
Syntax: padding: <value>
PossibleValues: [ <length> | <percentage> ]{1,4}
InitialValue: 0
Appliesto: All elements
Inherited: No
The paddingpropertyis a shorthandfor the padding-top, padding-right, padding-bottom, and padding-left properties.
Page 14CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
An element's paddingis the amountof space betweenthe border and the content of the element. Betweenone and four values are given,where each value is either a length or a percentage. Percentagevalues refer to the parent element's width. Negativevalues are notpermitted.
If four values are given, they applyto top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If twoor three values are given, the missingvalues are taken from the opposite side.
For example, the following rule sets the top paddingto 2em, the right paddingto 4em, the bottom paddingto 5em, and the left paddingto 4em:
BLOCKQUOTE { padding: 2em 4em 5em }
Top Border Width
Syntax: border-top-width: <value>
PossibleValues: thin | medium | thick | <length>
InitialValue: medium
Appliesto: All elements
Inherited: No
The border-top-width propertyis used to specifythe widthof an element's top border. The value maybe one of three keywords, whichare not affected by font size, or a length, which can be used to achieve relative widths. Negativevalues are not allowed.
One mayalso use the border-top, border-width, or bordershorthandproperties.
Right Border Width
Syntax: border-right-width: <value>
PossibleValues: thin | medium | thick | <length>
InitialValue: medium
Appliesto: All elements
Inherited: No
The border-right-width propertyis used to specifythe widthof an element's right border. The value maybe one of three keywords,which are not affected by font size, or a length, which can be used to achieve relativewidths. Negativevalues are not allowed.
One mayalso use the border-right, border-width, or bordershorthandproperties.
Bottom Border Width
Syntax: border-bottom-width: <value>
PossibleValues: thin | medium | thick | <length>
InitialValue: medium
Appliesto: All elements
Inherited: No
The border-bottom-widthpropertyis used to specify the widthof an element's bottom border. The value maybe one of three keywords,which are not affected by font size, or a length, which can be used to achieve relativewidths. Negativevalues are not allowed.
One mayalso use the border-bottom, border-width, or bordershorthandproperties.
Page 15CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Left Border Width
Syntax: border-left-width: <value>
PossibleValues: thin | medium | thick | <length>
InitialValue: medium
Appliesto: All elements
Inherited: No
The border-left-width propertyis used to specifythe widthof an element's left border. The value maybe one of three keywords, whichare not affected by font size, or a length, which can be used to achieve relative widths. Negativevalues are not allowed.
One mayalso use the border-left, border-width, or bordershorthandproperties.
Border Width
Syntax: border-width: <value>
PossibleValues: [ thin | medium | thick | <length> ]{1,4}
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The border-widthpropertyis used to set the border widthof an element by specifying betweenone and four values, where each value isa keyword or a length. Negativelengths are not permitted.
If four values are given, they applyto top, right, bottom, and left borderwidth, respectively. If one value is given, it applies to all sides. Iftwo or three values are given, the missingvalues are taken from the opposite side.
This propertyis a shorthandfor the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.
One mayalso use the bordershorthandproperty.
Border Color
Syntax: border-color: <value>
PossibleValues: <color>{1,4}
InitialValue: The value of the color property
Appliesto: All elements
Inherited: No
The border-color propertysets the color of an element's border. Between one and four color values are specified. If four values aregiven, theyapplyto top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or threevalues are given, the missingvalues are taken from the opposite side.
One mayalso use the bordershorthandproperty.
Border Style
Page 16CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Syntax: border-style: <value>
PossibleValues: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
InitialValue: none
Appliesto: All elements
Inherited: No
The border-style propertysets the style of an element's border. This propertymustbe specified for the border to be visible.
Between one and four keywordsare specified. If four values are given, they applyto top, right, bottom, and left border style, respectively.If one value is given, it applies to all sides. If two or three values are given, the missingvalues are taken from the opposite side.
One mayalso use the bordershorthandproperty.
Top Border
Syntax: border-top: <value>
PossibleValues: <border-top-width> || <border-style> || <color>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The border-top propertyis a shorthandfor settingthe width, style, and color of an element's top border.
Note that only one border-style value maybe given.
One mayalso use the bordershorthandproperty.
Right Border
Syntax: border-right: <value>
PossibleValues: <border-right-width> || <border-style> || <color>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The border-right propertyis a shorthandfor settingthe width, style, and color of an element's right border.
Note that only one border-style value maybe given.
One mayalso use the bordershorthandproperty.
Bottom Border
Syntax: border-bottom: <value>
PossibleValues: <border-bottom-width> || <border-style> || <color>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
Page 17CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
The border-bottompropertyis a shorthandfor settingthe width, style, and color of an element's bottom border.
Note that only one border-style value maybe given.
One mayalso use the bordershorthandproperty.
Left Border
Syntax: border-left: <value>
PossibleValues: <border-left-width> || <border-style> || <color>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The border-left propertyis a shorthandfor settingthe width, style, and color of an element's left border.
Note that only one border-style value maybe given.
One mayalso use the bordershorthandproperty.
Border
Syntax: border: <value>
PossibleValues: <border-width> || <border-style> || <color>
InitialValue: Not defined
Appliesto: All elements
Inherited: No
The borderpropertyis a shorthandfor settingthe width, style, and color of an element's border.
Examplesof borderdeclarationsinclude:
H2 { border: groove 3em }A:link { border: solid blue }A:visited { border: thin dotted #800080 }A:active { border: thick double red }
The borderpropertycan only set all four borders; only one border widthand border style maybe given. To givedifferent values to anelement's four borders, an author mustuse one or more of the border-top, border-right, border-bottom, border-left, border-color,border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.
Width
Syntax: width: <value>
PossibleValues: <length> | <percentage> | auto
InitialValue: auto
Appliesto: Block-level and replaced elements
Inherited: No
Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replacedelementis one forwhich only the intrinsicdimensionsare known; HTMLreplaced elements include IMG, INPUT, TEXTAREA, SELECT, andOBJECT.) The initialvalue for the width propertyis auto, which results in the element's intrinsicwidth(i.e., the widthof the elementitself, for example the widthof an image). Percentagesrefer to the parent element's width. Negativevalues are not allowed.
Page 18CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
This propertycould be used to givecommon widthsto some INPUTelements, such as submit and reset buttons:
INPUT.button { width: 10em }
Height
Syntax: height: <value>
PossibleValues: <length> | auto
InitialValue: auto
Appliesto: Block-level and replaced elements
Inherited: No
Each block-level or replaced element can be given a height, specified as a length or as auto. (A replacedelementis one for which onlythe intrinsicdimensionsare known; HTMLreplaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) Theinitialvalue for the height propertyis auto, which results in the element's intrinsicheight (i.e., the height of the element itself, forexample the height of an image). Negativelengths are not allowed.
As with the widthproperty, height can be used to scale an image:
IMG.foo { width: 40px; height: 40px }
In most cases, authorsare advised to scale the imagein an image editing program, since browserswill not likely scale images with highquality, and since scaling down causesthe user to downloadan unnecessarilylarge file. However, scaling throughthe widthand heightpropertiesis a useful option for user-defined style sheets in order to overcomevision problems.
Float
Syntax: float: <value>
PossibleValues: left | right | none
InitialValue: none
Appliesto: All elements
Inherited: No
The float propertyallowsauthorsto wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left andALIGN=right for the IMG element, but CSS1 allowsall elements to "float," not just the imagesand tables that HTML 3.2 allows.
Clear
Syntax: clear: <value>
PossibleValues: none | left | right | both
InitialValue: none
Appliesto: All elements
Inherited: No
The clear propertyspecifies if an element allowsfloating elements to its sides. A value of left moves the element below any floatingelement on its left; right acts similarlyfor floating elements on the right. Othervalues are none, which is the initialvalue, and both,which moves the element below floating elements on both of its sides. This propertyis similar in function to HTML 3.2's <BRCLEAR=left|right|all|none>, but it can be applied to all elements.
Classification Properties
Page 19CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
DisplayWhitespaceList Style TypeList Style ImageList Style PositionList Style
Display
Syntax: display: <value>
PossibleValues: block | inline | list-item | none
InitialValue: block
Appliesto: All elements
Inherited: No
The displaypropertyis used to define an element with one of four values:
block(a line break before and after the element)inline (no line break before and after the element)list-item (same as blockexcept a list-item marker is added)none (no display)
Each element typically is given a default displayvalue by the browser, basedon suggestedrenderingin the HTMLspecification.
The displaypropertycan be dangerousbecauseof its ability to displayelements in whatwould otherwisebe an improperformat. The useof the value none will turn off displayof the element to which it is assigned, includingany children elements!
Whitespace
Syntax: white-space: <value>
PossibleValues: normal | pre | nowrap
InitialValue: normal
Appliesto: All elements
Inherited: Yes
The white-spacepropertywill determinehow spaceswithin the element are treated. This propertytakes one of three values:
normal (collapsesmultiplespacesinto one)pre (does not collapse multiplespaces)nowrap(does not allow line wrappingwithout a <BR> tag)
List Style Type
Syntax: list-style-type: <value>
PossibleValues: disc | circle | square| decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
InitialValue: disc
Appliesto: Elements with displayvalue list-item
Inherited: Yes
The list-style-type propertyspecifies the type of list-item marker, and is used if list-style-imageis none or if image loadingis turned off.
Page 20CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
Examples:
LI.square { list-style-type: square }UL.plain { list-style-type: none }OL { list-style-type: upper-alpha } /* A B C D E etc. */OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
List Style Image
Syntax: list-style-image: <value>
PossibleValues: <url> | none
InitialValue: none
Appliesto: Elements with displayvalue list-item
Inherited: Yes
The list-style-imagepropertyspecifies the imagethat will be used as list-item marker when image loadingis turned on, replacing themarker specified in the list-style-type property.
Examples:
UL.check { list-style-image: url(/LI-markers/checkmark.gif) }UL LI.x { list-style-image: url(x.png) }
List Style Position
Syntax: list-style-position: <value>
PossibleValues: inside | outside
InitialValue: outside
Appliesto: Elements with displayvalue list-item
Inherited: Yes
The list-style-positionpropertytakes the value inside or outside, with outsidebeing the default. This propertydetermines where themarker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. Anexample renderingis:
Outside rendering: * List item 1 second line of list item
Inside rendering: * List item 1 second line of list item
List Style
Syntax: list-style: <value>
PossibleValues: <list-style-type> || <list-style-position> || <url>
InitialValue: Not defined
Appliesto: Elements with displayvalue list-item
Inherited: Yes
The list-style propertyis a shorthandfor the list-style-type, list-style-position, and list-style-imageproperties.
Examples:
Page 21CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
LI.square { list-style: square inside }UL.plain { list-style: none }UL.check { list-style: url(/LI-markers/checkmark.gif) circle }OL { list-style: upper-alpha }OL OL { list-style: lower-roman inside }
Units
LengthUnitsPercentage UnitsColor UnitsURLs
Length Units
A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviationthat indicates the unit. Thereare no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letterunit identifier.
Both relativeand absolute length units are supportedin CSS1. Relativeunits givea length relative to another length property, and arepreferred since theywill better adjust to different media. The following relative unitsare available:
em (ems, the height of the element's font)ex (x-height, the height of the letter "x")px (pixels, relative to the canvas resolution)
Absolutelength units are highlydependent on the output medium, and so are less useful than relative units. The following absoluteunitsare available:
in (inches; 1in=2.54cm)cm (centimeters; 1cm=10mm)mm(millimeters)pt (points; 1pt=1/72in)pc (picas; 1pc=12pt)
Percentage Units
A percentagevalue is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentagevalue.
Percentage values are relative to other values, as defined for each property. Most often the percentagevalue is relative to the element'sfont size.
Color Units
A color value is a keyword or a numericalRGBspecification.
The 16 keywordsare taken from the WindowsVGApalette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow.
RGBcolors are given in one of four ways:
#rrggbb(e.g., #00cc00)#rgb (e.g., #0c0)rgb(x,x,x) where x is an integer between0 and 255 inclusive(e.g., rgb(0,204,0))rgb(y%,y%,y%) where y is a number between0.0 and 100.0 inclusive(e.g., rgb(0%,80%,0%))
The examples above all specify the same color.
DouglasR. Jacobsonhas also developed a handy quick reference RGBColor Chart (61 kB).
URLs
Page 22CSS1 Properties
1/24/2012 11:19:53 AMhttp://htmlhelp.com/reference/css/all-properties.html
A URLvalue is given by url(foo), where foo is the URL. The URLmaybe optionally quoted with either single (') or double (") quotesand maycontain whitespacebefore or after the (optionally quoted) URL.
Parentheses, commas, spaces, single quotes, or double quotes in the URLmustbe escaped with a backslash. Partial URLsare interpretedrelative to the style sheet source, not to the HTMLsource.
Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use fullURLs where possible.
Examples:
BODY { background: url(stripe.gif) }BODY { background: url(http://www.htmlhelp.com/stripe.gif) }BODY { background: url( stripe.gif ) }BODY { background: url("stripe.gif") }BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */
Home, Forums, Reference, Tools, FAQs, Articles, Design, Links
Copyright© 1996 - 2006. All rights reserved.