CSS 1 Declarations - og hvordan du bruker dem
Font/Background
Font/Background:| Font and Background Properties | ||
| Property | Valid Values | Example |
| font-family | [font name or type] | font-family:Verdana, Arial; |
| font-style | normal | italic | font-style:italic; |
| font-variant | normal | small-caps | font-variant:small-caps; |
| font-weight | normal | bold | font-weight:bold; |
| font-size | [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length | font-size:12px; |
| font | [ font-style | font-variant | font-weight ] ? font-size [ / line-height ] ? font-family | font:bold 12px Arial; |
| Property | Valid Values | Example |
| color | color | color:red |
| background-color | color | transparent | background-color:yellow |
| background-image | url | none | background-image:url(house.jpg) |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | background-repeat:no-repeat |
| background-attachment | scroll | fixed | background-attachment:fixed |
| background-position | [ position | length ] | {1,2} | [ top | center | bottom ] | [ left | center | right ] | background-position:top center |
| background | transparent | color || url | repeat | scroll | position | background:silver url(house.jpg) repeat-y |
Text
Text:| Text Properties | ||
| Property | Valid Values | Example |
| letter-spacing | normal | length | letter-spacing:5px |
| text-decoration | none | underline | overline | line-through | text-decoration:underline |
| vertical-align | sub | super | | vertical-align:sub |
| text-transform | capitalize | uppercase | lowercase | none | text-transform:lowercase |
| text-align | left | right | center | justify | text-align:center |
| text-indent | length | percentage | text-indent:25px |
| line-height | normal | number | length | percentage | line-height:15px |
Box
Box:| Box Properties | ||
| Property | Valid Values | Example |
| margin-top | length | percentage | auto | margin-top:5px |
| margin-right | length | percentage | auto | margin-right:5px |
| margin-bottom | length | percentage | auto | margin-bottom:1em |
| margin-left | length | percentage | auto | margin-left:5pt |
| margin | length | percentage | auto {1,4} | margin: 10px 5px 10px 5px |
| padding-top | length | percentage | padding-top:10% |
| padding-right | length | percentage | padding-right:15px |
| padding-bottom | length | percentage | padding-bottom:1.2em |
| padding-left | length | percentage | padding-left:10pt; } |
| padding | length | percentage {1,4} | padding: 10px 10px 10px 15px |
| border-top-width | thin | medium | thick | length | border-top-width:thin |
| border-right-width | thin | medium | thick | length | border-right-width:medium |
| border-bottom-width | thin | medium | thick | length | border-bottom-width:thick |
| border-left-width | thin | medium | thick | length | border-left-width:15px |
| border-width | thin | medium | thick | length {1,4} | border-width: 3px 5px 3px 5px |
| border-top-color | color | border-top-color:navajowhite |
| border-right-color | color | border-right-color:whitesmoke |
| border-bottom-color | color | border-bottom-color:black |
| border-left-color | color | border-left-color:#C0C0C0 |
| border-color | color {1,4} | border-color: green red white blue; } |
| border-top-style | none | solid | double | groove | ridge | inset | outset | border-top-style:solid |
| border-right-style | none | solid | double | groove | ridge | inset | outset | border-right-style:double |
| border-bottom-style | none | solid | double | groove | ridge | inset | outset | border-bottom-style:groove |
| border-left-style | none | solid | double | groove | ridge | inset | outset | border-left-style:none |
| border-style | none | solid | double | groove | ridge | inset | outset | border-style:ridge; } |
| border-top | border-width | border-style | border-color | border-top: medium outset red |
| border-right | border-width | border-style | border-color | border-right: thick inset maroon |
| border-bottom | border-width | border-style | border-color | border-bottom: 10px ridge gray |
| border-left | border-width | border-style | border-color | border-left: 1px groove red |
| border | border-width | border-style | border-color | border: thin solid blue |
| float | none | left | right | float:none |
| clear | none | left | right | both | clear:left |
Classification
Classification:| Classification Properties | ||
| Property | Valid Values | Example |
| display | none | block | inline | list-item | display:none |
| list-style-type | disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | list-style-type:upper-alpha |
| list-style-image | url | none | list-style-image:url(icFile.gif) |
| list-style-position | inside | outside | list-style-position:inside |
| list-style | keyword | position | url | list-style: square outside url(icFolder.gif) |
Positioning
Positioning:| Positioning Properties | |||
| Property | Valid Values | Example | Applies to |
| clip | shape | auto | clip:rect(0px 200px 200px 0px) | all elements |
| height | length | auto | height:200px | DIV, SPAN and replaced elements |
| left | length | percentage | auto | left:0px | absolutely and relatively positioned elements |
| overflow | visible | hidden | scroll | auto | overflow:scroll | all elements |
| position | absolute| relative | static | position:absolute | all elements |
| top | length | percentage | auto | top:0px | absolutely and relatively positioned elements |
| visibility | visible | hidden | inherit | visibility:visible | all elements |
| width | length | percentage | auto | width:80% | DIV, SPAN and replaced elements |
| z-index | auto | integer | z-index:-1 | absolutely and relatively positioned elements |
Printing
Printing:| Printing Properties | ||
| Property | Valid Values | Example |
| page-break-before | auto | always | left | right | page-break-before:always |
| page-break-after | auto | always | left | right | page-break-before:auto |
Printing
Printing:| Pseudo Classes | ||
| Property | Valid Values | Example |
| cursor | auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | { cursor:hand; } |
| active, hover, link, visited | n/a | a:hover { color:red; } |
| first-letter, first-line | any font manipulating declaration | p:first-letter{ float:left;color:blue } . |
Examples
Examples:| Example of use in HTML document: <font size="3" style="color:blue; text-decoration:none;">Some text</font> |
| Example of use in CSS stylesheet: .classname { color:green; text-decoration:underline; } |
More resources
More resources:|
This list has been published on trust-me.nu since 1996 together with alot of other resources for the web. |
