+ All Categories
Home > Education > Css1 properties

Css1 properties

Date post: 13-Jan-2015
Category:
Upload: sahil-alipuria
View: 204 times
Download: 1 times
Share this document with a friend
Description:
CSS1 properties
Popular Tags:
22
Page 1 CSS1 Properties 1/24/2012 11:19:53 AM http://htmlhelp.com/reference/css/all-properties.html CSS1 Properties Syntax Used in Property Definitions Font Properties Color and BackgroundProperties Text Properties Box Properties ClassificationProperties Units Syntax Used in Property Definitions <Foo> Value of type Foo. Common types are discussedin the Units section. Foo A keyword that must appearliterally(though without case sensitivity). Commasand slashes mustalso appearliterally. ABC A must occur, then B, then C, in that order. A|B A or B must occur. A || B A 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 most B times. Font Properties Font Family Font Style Font Variant Font Weight Font Size Font Font Family Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] PossibleValues: <family-name> Any font family name maybe used
Transcript
Page 1: Css1 properties

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 2: Css1 properties

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 3: Css1 properties

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 4: Css1 properties

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 5: Css1 properties

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 6: Css1 properties

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 7: Css1 properties

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 8: Css1 properties

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 9: Css1 properties

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 10: Css1 properties

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 11: Css1 properties

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 12: Css1 properties

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 13: Css1 properties

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 14: Css1 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 15: Css1 properties

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 16: Css1 properties

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 17: Css1 properties

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 18: Css1 properties

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 19: Css1 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 20: Css1 properties

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 21: Css1 properties

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 22: Css1 properties

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.


Recommended