Setelah kita bahas tentang Apa itu CSS?, Selector pada CSS, cara menghubungkan CSS dengan HTML , tentu kita sudah mengetahui maksud dari bagan sytax CSS yaitu .selector{Property:Value;} , tentu kita sudah paham dan hapal syntaxnya, tinggal kita pelajari nama-nama properti dan valuenya, dan kita terapkan ke dalam bagan syntax CSS, selamat mencoba dan berikut daftar Properti beserta Valuenya :
| Properti untuk mengatur Teks | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| font-family | family-name generic-family | Arial, Tahoma serif, sans-serif | CSS1 |
| font-size | (pt), (px), (percent) | pt is Point, i.e. 12pt. px is Pixel, i.e. 20px. | CSS1 |
| font-size-adjust | (number), none, inherit | CSS2 | |
| font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit | CSS2 | |
| font-style | normal, italic, oblique | CSS1 | |
| font-variant | normal, small-caps | CSS1 | |
| font-weight | normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller | Number can be 100, 200, 300, 400, 500, 600, 700, 800, or 900. | CSS1 |
| font | Any of the above values separated by spaces. | {font: tahoma 12pt oblique bold} | CSS1 |
| letter-spacing | normal, 1em | 1em, 2em, and so on. | CSS1 |
| text-align | left, right, center, justify | CSS1 | |
| text-decoration | none, underline, overline, line-through, blink | CSS1 | |
| text-shadow | none, color length length length, inherit | CSS2 | |
| text-transform | none, capitalize, uppercase, lowercase | CSS1 | |
| text-indent | (length), (percent) | Length is in pixels. | CSS1 |
| word-spacing | normal, 1em | 1em, 2em, and so on. | CSS1 |
-----------------------------
| Color/Background Properties | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| background-attachment | scroll, fixed | CSS1 | |
| background-color | (color), transparent | Color is in hex code. | CSS1 |
| background-image | none, (location) | CSS1 | |
| background-position | (percent), (length), top, center, bottom, left, center, right | CSS1 | |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | CSS1 | |
| background | Any of the above background values separated by spaces. | {background: URL(back.gif) repeat fixed} | CSS1 |
| color | (color) | Color is in hex code. This refers to the foreground color. | CSS1 |
-----------------------------
| Box Properties | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| margin-bottom | (length), (percent), auto | Length is in pixels. | CSS1 |
| margin-left | (length), (percent), auto | Length is in pixels. | CSS1 |
| margin-right | (length), (percent), auto | Length is in pixels. | CSS1 |
| margin-top | (length), (percent), auto | Length is in pixels. | CSS1 |
| margin | Any of the above margin values in top, right, bottom, left order separated by spaces. | {margin: 5px 2px 5px 3px} When only one value is present, all margins are affected. | CSS1 |
| padding-bottom | (length), (percent) | Length is in pixels. | CSS1 |
| padding-left | (length), (percent) | Length is in pixels. | CSS1 |
| padding-right | (length), (percent) | Length is in pixels. | CSS1 |
| padding-top | (length), (percent) | Length is in pixels. | CSS1 |
| padding | Any of the above padding values in top, right, bottom, left order separated by spaces. | {padding: 5em 6em 3em 6em} When only one value is present, all sides are affected. | CSS1 |
| border-bottom-width | medium, thin, thick, (length) | Length is in pixels. | CSS1 |
| border-bottom | Any of the border-top-bottom, border-color and border-style values. | {border-bottom: thin inset blue} | CSS1 |
| border-color | (color) | Color is in hex code. | CSS1 |
| border-left-width | medium, thin, thick, (length) | Length is in pixels. | CSS1 |
| border-left | Any of the border-top-left, border-color and border-style values. | {border-left: thick inset green} | CSS1 |
| border-right-width | medium, thin, thick, (length) | Length is in pixels. | CSS1 |
| border-right | Any of the border-right-width, border-color and border-style values. | {border-right: thin inset blue} | CSS1 |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | CSS1 | |
| border-top-width | medium, thin, thick, (length) | Length is in pixels. | CSS1 |
| border-top | Any of the border-top-width, border-color and border-style values. | {border-top: thin inset red} | CSS1 |
| border | Any of the border values. Applies to all borders. | {border: medium blue} | CSS1 |
| height | auto, (length), (percent) | Length is in pixels. | CSS1 |
| width | auto, (length), (percent) | Length is in pixels. | CSS1 |
-----------------------------
| Klasifikasi | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, none | CSS2 | |
| list-style-image | none, (url) | CSS1 | |
| list-style-position | outside, inside | CSS1 | |
| list-style | Any of the above list-style values separated by spaces. | {list-style: disc inside} | CSS1 |
| white-space | normal, pre, nowrap | CSS1 | |
-----------------------------
| Visual Effects | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| clip | auto, (shape) | Currently, the only valid shape is "rect(top,right,bottom,left)". | CSS2 |
| cursor | auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help | CSS1 | |
| outline-width | medium, thin, thick, (length), inherit | CSS2 | |
| outline-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | CSS2 | |
| outline-color | (color), invert, inherit | CSS2 | |
| outline | Any of the above outline values separated by spaces. | {outline: dotted thick} | CSS2 |
| overflow | visible, hidden, scroll, auto | CSS2 | |
| visibility | inherit, visible, hidden | CSS2 | |
------------------------------------------
| Generated content, automatic numbering, dan lists | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| content | (string), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit | Used with the :before, :after pseudo-elements. | CSS2 |
| counter-reset | (identifier) (integer), none , inherit | Used with the counter() and counters() functions of the content property. | CSS2 |
| counter-increment | (identifier) (integer), none , inherit | Used with the counter() and counters() functions of the content property. | CSS2 |
| marker-offset | (length), auto, inherit | CSS2 | |
| quotes | (string)(string) or more, inherit | CSS2 | |
-----------------------------------------------------
| Visual Formatting | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| bottom | auto, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| clear | none, left, right, both, inherit | CSS1 | |
| direction | ltr, rtl, inherit | ltr - Left-to-Right rtl - Right-to-Left | CSS2 |
| display | inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit | CSS2 | |
| float | none, left, right, inherit | CSS1 | |
| height | auto, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| line-height | normal, (length), (percent) | Length is in pixels. | CSS1 |
| left | auto, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| max-height | none, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| max-width | none, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| min-height | inherit, (length), (percent) | Length is in pixels. | CSS2 |
| min-width | inherit, (length), (percent) | Length is in pixels. | CSS2 |
| position | static, absolute, relative, fixed, inherit | CSS2 | |
| right | auto, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| top | auto, inherit, (length), (percent) | Length is in pixels. | CSS2 |
| unicode-bidi | normal, embed, bidi-override, inherit | Length is in pixels. | CSS2 |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent) | CSS1 | |
| width | auto, (length), (percent) | Length is in pixels. | CSS2 |
| z-index | auto, inherit, (integer) | CSS2 | |
------------------------------------------
| Tabel | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| border-collapse | collapse, separate, inherit | CSS2 | |
| border-spacing | (length)(length), inherit | CSS2 | |
| caption-side | top, bottom, left, right, inherit | CSS2 | |
| empty-cells | show, hide, inherit | CSS2 | |
| speak-header | once, always, inherit | CSS2 | |
| table-layout | auto, fixed, inherit | CSS2 | |
-------------------------------------------------
| Aural | |||
| Nama Properti | Values | Contoh/Notes | CSS Level |
| volume | number, percentage, silent, x-soft, soft, medium, loud, x-loud, inherit | CSS2 | |
| speak | normal, none, spell-out, inherit | CSS2 | |
| pause-before | time, percentage, inherit | CSS2 | |
| pause-after | time, percentage, inherit | CSS2 | |
| pause | time, percentage, inherit | CSS2 | |
| cue-before | uri, none, inherit | CSS2 | |
| cue-after | uri, none, inherit | CSS2 | |
| cue | Any of the above cue properties. | CSS2 | |
| play-during | uri, mix, repeat, auto, none, inherit | CSS2 | |
| azimuth | angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards, inherit | CSS2 | |
| elevation | angle, below, level, above, higher, lower, inherit | CSS2 | |
| speech-rate | number, x-slow, slow, medium, fast, x-fast, faster, slower, inherit | CSS2 | |
| voice-family | specific-voice|generic-voice | CSS2 | |
| pitch | frequency, x-low, low, medium, high, x-high, inherit | CSS2 | |
| pitch-range | number, inherit | CSS2 | |
| stress | number, inherit | CSS2 | |
| richness | number, inherit | CSS2 | |
| speak-punctuation | code, none, inherit | CSS2 | |
| speak-numeral | digits, continuous, inherit | CSS2 | |
------------------------------
Post A Comment: