CSS Definitions (...attributes)
More about
Cascading Style Sheets, other css sites:
W3C ,
Eric Meyer ,
Builder ,
w3schools ,
Tutorial ,
10 tricks ,
University of Html ,
css Zen Garden ,
| Declaration | Explanation | Example | ||
|---|---|---|---|---|
| Property | Value | |||
| anchor:link a:link a.classname:link | All links on page will appear as directed, by color, size, underlined or not... | must be defined in the correct order: link, visited, hover, focus, active |
||
| anchor:visited a:visited a.classname:visited | Links that have already been visited by user. | must be defined in the correct order: link, visited, hover, focus, active |
||
| anchor:hover a:hover a.classname:hover | Works like a mouseover, can change colors or size... | must be defined in the correct order: link, visited, hover, focus, active |
||
| anchor:focus a:focus a.classname:focus | For Keyboard only, tab to link, can change color or size... | add to a:hover so they will act the same: a:hover, a:focus, a:active {color:white;} |
||
| anchor:active a:active a.classname:active | For IE6 & 7, can change color or size... | add to a:hover so they will act the same: a:hover, a:focus, a:active {color:white;} |
||
| background | Combination of background attachment, color, image, position and repeat properties. | |||
| background-attachment | scroll || fixed | Determines if background image(s) is fixed in place as text/page content scrolls over it, or will scroll as the text/page content scrolls. | ||
| background-color | color || transparent | Background color of element, body, table, tr, td... | ||
| background-image | url || none | Background image of an element | {background-image: url(background.gif);} | |
| background-position | percent || length || top || center || bottom || left || right | Sets initial position of background image. | ||
| background-repeat | repeat || repeat-x || repeat-y || no-repeat | How a background image is tiled | ||
| border | solid || ridge || double || inset || outset || dotted || dashed || groove | Sets all four borders of an element. (Can be a combination of border-width or border-style) | {border: 5px;} all sides {border: 2px 5px 10px 15px;} top right bottom left {border: 2px 10px;} top&bottom left&right {border: 2px 5px 10px;} top right&left bottom |
|
| border-bottom | Sets bottom border of element. Can be combination of width and style. | |||
| border-bottom-width | length || thin || medium || thick | Sets weight of an element's bottom border. | ||
| border-color | color | Sets color of all four borders of an element. | ||
| border-left | Sets left border of element. Can be combination of width and style. | |||
| border-left-width | length || thin || medium || thick | Sets weight of an element's left border. | ||
| border-right | Sets right border of element. Can be combination of width and style. | |||
| border-right-width | length || thin || medium || thick | Sets weight of an element's right border. | ||
| border-style | dashed || dotted || double || groove || inset || none || outset || ridge || solid | Sets all four borders of element. | ||
| border-top | Sets top border of element. Can be combination of width and style. | |||
| border-top-width | length || thin || medium || thick | Sets weight of an element's top border. | ||
| border-width | length || thin || medium || thick | Sets weight an element's four borders. | ||
| clear | both || left || none || right | Sets which margins of an element must not be adjacent to a floating element. | ||
| color | (foreground, text?) color | Sets color of an element. | ||
| cursor | default || auto || crosshair || move || pointer || wait || help || x-resize | Sets the cursor type. | ||
| display | block || inline || list-item || none | Controls how an element is displayed. | ||
| filter | flipv || fliph | flip vertical, flip horizontal | fliph will appear this way... | |
| flipv will appear this way... | ||||
| float | left || none || right | Determines if element will float to left or right. | ||
| font | Sets all font properties for an element (combination of family, size, style, variant, weight). | |||
| font-family | list of font names | Name of fonts (Arial, Helvetica, sans-serif...) | ||
| font-size | xx-small || x-small || small || medium || larger || x-large || xx-large || larger || smaller || length || percent | Font size. | xx-small ≈ 1 x-small ≈ 2 small ≈ 3 medium ≈ 4 larger ≈ 5 x-large ≈ 6 xx-large ≈ 7 |
|
| font-style | normal || italic || oblique | Style of font face. | ||
| font-variant | normal || small-caps | Makes a font in small caps. | ||
| font-weight | normal || bold || bolder || lighter || number(100-900, in multiples of 100) | Defines font weight. 400 is normal, 700 is bold. | ||
| height | length || auto | Height of an element. | ||
| left | Controls the left 'position' of element on screen. Default is {left: 0px;}, browser defaults vary in appearance. | absolute/fixed {left: 40px;} relative {left: 15em;} |
||
| letter-spacing | length || normal | Puts additional space between characters. | ||
| line-height | length || number || percentage || normal | Sets distance between text baselines. | ||
| list-style | sets overall style of a list element. (Combination of image, position and type) | |||
| list-style-image | url || none | Uses image as a list marker. | ||
| list-style-position | inside || outside | Indents or outdents list item's marker compared to the item's content. | ||
| list-style-type | circle || disc || square || decimal || lower-alpha || lower-roman || none || upper-alpha || upper-roman | Defines a list item's marker style. | ||
| margin | length || percent || auto | Defines all four sides of margin of element. (default=0) Always from edge of page. | {margin: 5px;} all sides {margin: 2px 5px 10px 15px;} top right bottom left {margin: 2px 5px 10px;} top right&left bottom |
|
| margin-bottom | length || percent || auto | Defines bottom of margin of element. (default=0) Always from edge of page. | ||
| margin-left | length || percent || auto | Defines left of margin of element. (default=0) Always from edge of page. | ||
| margin-right | length || percent || auto | Defines right of margin of element. (default=0) Always from edge of page. | ||
| margin-top | length || percent || auto | Defines top of margin of element. (default=0) Always from edge of page. | ||
| min-width | specifys minimum width of element | {min-width: 600px;} | ||
| max-width | specifys maximum width of element | {max-width: 600px;} | ||
| overflow | scroll || hidden || visible || auto || inherit | Controls how content is display if content "overflows" the element's size. (creates scrollbar) | ||
| padding | Defines all padding values of an element. | {padding: 5px;} all sides {padding: 2px 5px 10px 15px;} top right bottom left {padding: 2px 5px 10px;} top right&left bottom |
||
| padding-bottom | length || percent | Defines bottom padding of an element. (default=0) | ||
| padding-left | length || percent | Defines left padding of an element. (default=0) | ||
| padding-right | length || percent | Defines right padding of an element. (default=0) | ||
| padding-top | length || percent | Defines top padding of an element. (default=0) | ||
| position | absolute || relative || fixed | Controls the 'position' of element on screen. Coordinates of topmost, leftmost edge of element. Default is {top: 0px; left: 0px;}, browser defaults vary in appearance. | {position: absolute; top: 20px; left: 40px;} {position: relative; top: 10em; left: 15em;} {position: fixed; top: 0px; left: 0px;} |
|
| text-align | center || justify || left || right | Sets alignment of text. | ||
| text-decoration | blink || line-through || none || overline || underline | Defines decoration for text - combinations allowed. | ||
| text-indent | length || percent | Indentation for an element. (default=0) | ||
| text-transform | capitalize || none || lowercase || uppercase | Transform text. | ||
| top | Controls the top 'position' of element on screen. Default is {top: 0px;}, browser defaults vary in appearance. | absolute/fixed {top: 20px;} relative {top: 10em;} |
||
| vertical-align | percent || baseline || bottom || middle || sub || super || text-bottom || text-top || top | Sets vertical position of element. | ||
| word-spacing | length || normal | Insert extra spaces between words. | ||
| white-space | normal || nowrap || pre | Defines how white space is handled within an element. | ||
| width | length || percent || auto | Determines width of an element. | ||
| writing-mode | lr-tb || rl-tb || tb-rl lr || rl || tb |
left-right&top-bottom (normal "alphabetic" text) right-left&top-bottom (Arabic and Hebrew text.) top-bottom&right-left (Chinese and Japanese text) lr=lr-tb, rl=rl-tb, tb=tb-rl | writing-mode: tb-rl; |
|
| writing-mode + filter | tb-rl, flipv, fliph | writing-mode: tb-rl; filter: flipv fliph; |
||
More about: css , more , styles , W3C , Builder , w3schools , Tutorial , University of Html , css Zen Garden ,
