| |
Cascading Style Sheets
Properties
------------
The core of Cascading Style Sheets are the properties, individual elements that can be grouped together and defined as a Style. From the Rules section, we know that a rule is composed of a selector and a declaration. The declaration defines the property or properties of that style. It has the following form:
| { property: value } |
Properties specified in CSS1 are divided into a number of different categories: Type, Background, Block or Text Spacing, Box or Border, and List. Below is a list of each category, their common properties, and possible values. To see the World Wide Web Consortium's (W3C) detailed specifications for that property and its values, click on its name. Bolded items indicate that the property can accept more than one value at once. Common units of value are length, percentage, color, and a url.
Some properties may not be supported by all browsers. Check the Browser Support Tables for what your browser/s will support. CSS2 advanced formatting properties will not be covered in this basic section. For more information about CSS2, check the Links page.
Type Properties
Property
Name |
Possible Values |
| font-family | family name: Times
New Roman, Helvetica generic family name: sans-serif, cursive, monospace i.e. body { font family: Verdana, Arial, Helvetica, sans-serif } |
| font-size |
absolute-size: xx-small,
x-small, small, medium, large, etc. relative-size: larger, smaller length: 3.5 em (points, mm, cm, picas, inches, pixels, ems, exs) percentage: 90% i.e. p { font-size: 12pt } |
| font-style | normal, italic, oblique i.e. h1 { font-style: italic } |
| line-height | number:1.2 length:12 pts (mm, cm, picas, inches, pixels, ems, exs) percentage:150% i.e. p { line-height: 2 em } |
| font-weight | normal, bold, bolder, lighter, 100 - 900 i.e. strong { font-weight: 700 } |
| font-variant | normal, small-caps i.e. h2 { font-variant: small-caps } |
| font | used to set multiple font properties all at once: font-familly,
font-size, font-style, font-weight, font-variant i.e. blockquote{ font: 14pt bold "Georgia", serif } |
| case (text-transform) |
capitalize, uppercase, lowercase, none i.e. h3 { text-transform: uppercase } |
| text-decoration | underline, overline, line-through, blink i.e. a:link { text-decoration: underline } |
| color (foreground color) |
natural language:
red RGB range 0-255: rgb(255, 0, 0) hexadecimal: #FF00CC i.e. p { color: rgb (255, 0, 0) } |
Background Properties
Property
Name |
Possible Values |
| background-color | natural language:
red RGB range 0-255: rgb(255, 0, 0) hexadecimal: #FF00CC transparent i.e. body { background-color: #FF0000 } |
| background-image | image link: url
(marble.gif) none i.e. table{ background-image: url (blueswirl.gif) } |
| background-repeat | horizontally & vertically:
repeat horizontally: repeat-x vertically: repeat-y none: no-repeat i.e. body { background-image: url (blueswirl.gif); background-repeat: repeat-y; } |
| background-attachment | scroll, fixed i.e. body { background-image: url (blueswirl.gif); background-repeat: repeat-y; background-attachment fixed; } |
| background-position H-value, V-value |
horizontal position:
left, center, right vertical position: top, center, bottom length: 10 mm ( points, cm, picas, inches, pixels, ems, exs ) percentage of window: 10% i.e. body { background-image: url (blueswirl.gif); background-position: 100%,100%; } |
| background | used to set multiple background properties all at once: background-color, background-image, background-repeat, background-attachment i.e. p { background: url (star.jpg) blue fixed } |
Block or Text Spacing Properties
Property
Name |
Possible Values |
| word-spacing | length: 12 pts (mm,
cm, picas, inches, pixels, ems, exs) This can be a negative or positive number. The length specified is an amount added the the default word-space length. i.e. h1 { word-spacing: 15 pixels } |
| letter-spacing | same values set as word-spacing i.e. blockquote { letter-spacing: 10mm } |
| vertical-align | baseline, sub,super, top, text-top, middle, bottom,
text-bottom percentage from baseline:10% i.e. h2 { vertical-align: super } |
| text-align | left, right, center, justify i.e. h2 { text-align: center } |
| text-indent | length:10 mm (points,
cm, picas, inches, pixels, ems, exs) percentage of window: 5% i.e. p { text-indent: 5em } |
| whitespace | normal, pre, no wrap i.e. p { white-space: normal } |
| display | block, inline, list-item, none i.e. l1 { display: list-item } |
Box or Border Properties
Some Box properties, also known as Border properties, may accept up
to four values.
Property
Name |
Possible Values |
| margin margin-top margin-right margin-bottom margin-left |
auto length:0.1 in (points, mm, cm, picas, pixels, ems, exs) i.e. h1 { margin-top: 30px } h2 { margin: 25px 40px 25px 30px } |
| padding padding-top padding-right padding-bottom padding-left |
length:10 cm (points,mm,
picas, inches, pixels, ems, exs) i.e. blockquote { padding-left: 2em } blockquote{ padding: 3em, 2em, 4em, 2em } |
| border-width border-top-width border-right-width border-bottom-width border-left-width |
thin, medium, thick length:12 px (points. mm, cm, picas, inches, ems, exs) i.e. img { border-color: black} img { border-color: red blue yellow green} |
| border-color | natural language:
red RGB range 0-255: rgb(255, 0, 0) hexadecimal: #FF00CC i.e. img { border-color: black} img { border-color: red blue yellow green} |
| border-style | dotted, dashed, solid, double, groove, ridge, inset,
outset i.e. .border_first_box { border-style: solid groove dashed dotted } |
| border-top |
used to set multiple border-top properties all at once:
border-top-width, border-style, color i.e. h2 { border-top: 5px red dotted } |
| border-right |
used to set multiple border-right properties all at
once:
border-right-width, border-style, color i.e.h2 { border-right: 3px green solid } |
| border-bottom |
used to set multiple border-bottom properties all at
once:
border-bottom-width, border-style, color i.e.h2 { border-bottom: 5px orange dotted } |
| border-left | used to set multiple border-left properties all at
once:
border-left-width, border-style, color ie. h2 { border-left: 3px yellow solid } |
| border | used to set multiple border properties all at once:
border-width, border-style, border-color i.e.h2 { border: 10px gray double } |
| width | auto length:12 px (points. mm, cm, picas, inches, ems, exs) i.e. img { width: 300px } |
| height | auto length:12 px (points. mm, cm, picas, inches, ems, exs) i.e. img { height: 450px } |
| float | left, right, none i.e. img { float: right } |
| clear | left, right, both, none i.e. h1 { clear: both } |
List Properties
Property
Name |
Possible Values |
| type (list-style-type) |
disc, circle, square, decimal, lower-roman, upper-roman,
lower-alpha, none i.e. ol { list-style-type: circle } |
| bullet
image (list-style-image) |
image link: url
(marble.gif) i.e. ul { list-style-image: url (marble.gif) } |
| position (list-style-position) |
inside, outside i.e. ol { list-style-position: inside } |
| list-style | used to set multiple list-style properties all at once: background-color, background-image, background-repeat, background-attachment i.e. ul { list-style: square outside } |