(printable version)Three Ways to use Styles |
||
| Inline Styles | <element style = "property:value; property:value;property:value;" > | |
| Internal Styles |
<head>
<style
type
=
"text/css"
>
selector
{
property:value;
}
property:value;
etc ...
</style>
</head>
|
|
| External Styles | Webpage Head | External Style Sheet - stylefile.css |
|
<head>
<link
href
=
"path_to/stylefile.css"
rel = "stylesheet" type = "text/css" />
</head>
|
selector
{
property:value;
}
property:value;
etc ...
|
|
(printable version)CSS - Properties and Values(Not a Complete List) |
|
| Properties | Values |
| background | color url(url) repeat attachment position |
| background-attachment | inherit | scroll | fixed |
| background-color |
color name rgb( p, p, p) where 0% ≤ p ≤ 100% rgb( x, x, x) where 0 ≤ x ≤ 255 #hhhhhh where 0 ≤ h ≤ f |
| background-image | url( path_to_file) |
| background-position |
x y where x is the horizontal position and can be: number | left | center | right where y is the vertical position and can be: number | top | center | bottom |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat |
| background-size | width height |
| border |
width style color for example: 1px solid rgb(100,50,200) (style can be solid | dashed | dotted | double | outset | inset | groove | ridge | none ) |
| border-bottom |
width style color Note: length is the width of the border ex. 1px solid rgb(100,50,200) |
| border-left | |
| border-right | |
| border-top | |
| border-collapse (tables) | collapse | separate | inherit |
| border-radius | length (for example, 4em) |
| border-width | number |
| bottom | length | percent | auto | inherit |
| box-shadow |
none |
h-shadow v-shadow blur spread color |
inset |
initial |
inherit (ex. 10px 10px 5px #ddeeff) |
| clear | left | right | both | none | inherit |
| color |
color name or rgb( p, p, p) where 0% ≤ p ≤ 100% or rgb( x, x, x) where 0 ≤ x ≤ 255 or #hhhhhh where 0 ≤ h ≤ f |
| display | block | inline |
| float | left | right | both | none | inherit |
| font | style variant weight size height family |
| font-family | name of font |
| font-size | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| font-style | italic | oblique | normal |
| font-variant | normal | small-caps | inherit |
| font-weight | bold | bolder | lighter | 100 ... 900 | normal |
| height | auto, number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| letter-spacing | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| line-height | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| list-style-type |
disc |
circle |
square |
decimal |
decimal-leading-zero |
lower-roman | upper-roman | lower-alpha | upper-alpha | none |
| list-style-image | url(path_to_file) |
| list-style-position | inside | outside |
| list-style | type image position |
| margin-top | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| margin-right | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| margin-bottom | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| margin-left | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| margin | top right bottom left (ex. 10px 5px 10px 15px) |
| max-width | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| overflow | auto | hidden | scroll | visible |
| padding-top | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| padding-right | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| padding-bottom | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| padding-left | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| padding | top right bottom left (ex. 10px 5px 10px 15px) |
| position | static | relative | absolute | fixed | inherit |
| text-align | center | left | right | justify |
| text-decoration | blink | line-through | overline | underline | none |
| text-indent | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| text-transform | capitalize | uppercase | lowercase | none |
| vertical-align (tables, img) | baseline | inherit | bottom | middle | sub | super | text-bottom | text-top | top |
| white-space | normal | pre | nowrap | pre-wrap | pre-line | inherit |
| width | number (units - mm, cm, em, ex, in, pt, px, pc, %) |
| word-spacing | number (units - mm, cm, em, ex, in, pt, px, pc, %) |