diff options
Diffstat (limited to 'id-id/css-id.html.markdown')
| -rw-r--r-- | id-id/css-id.html.markdown | 235 |
1 files changed, 235 insertions, 0 deletions
diff --git a/id-id/css-id.html.markdown b/id-id/css-id.html.markdown new file mode 100644 index 00000000..7b0d8a6d --- /dev/null +++ b/id-id/css-id.html.markdown @@ -0,0 +1,235 @@ +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] +translators: + - ["Eka Y Saputra", "http://github.com/ekajogja"] +lang: id-id +filename: learncss-id.css +--- + +Pada mulanya, web tidak memiliki elemen visual, murni teks saja. Tapi seiring +perkembangan peramban, laman web dengan elemen visual menjadi umum. +CSS adalah bahasa standar yang ada untuk menjaga keterpisahan antara +konten (HTML) serta tampilan-dan-kesan laman web. + +Singkatnya, fungsi CSS ialah menyajikan sintaks yang memampukan kita untuk +menyasar elemen tertentu dalam sebuah laman HTML dan menerapkan +berbagai properti visual bagi elemen tersebut. + +Seperti bahasa lainnya, CSS memiliki banyak versi. Di artikel ini, kita fokus +pada CSS2.0 yang meskipun bukan versi termutakhir namun paling kompatibel +dan didukung secara luas. + +**CATATAN:** Lantaran keluaran dari CSS berwujud efek-efek visual, maka untuk +mempelajarinya, kita perlu mencoba berbagai hal dalam dunia olah CSS semisal +[dabblet](http://dabblet.com/). Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum. + + +```css +/* comments appear inside slash-asterisk, just like this line! */ + +/* #################### + ## SELECTORS + ####################*/ + +/* Generally, the primary statement in CSS is very simple */ +selector { property: value; /* more properties...*/ } + +/* the selector is used to target an element on page. + +You can target all elments on the page! */ +* { color:red; } + +/* +Given an element like this on the page: + +<div class='some-class class2' id='someId' attr='value' /> +*/ + +/* you can target it by it's class name */ +.some-class { } + +/*or by both classes! */ +.some-class.class2 { } + +/* or by it's tag name */ +div { } + +/* or it's id */ +#someId { } + +/* or by the fact that it has an attribute! */ +[attr] { font-size:smaller; } + +/* or that the attribute has a specific value */ +[attr='value'] { font-size:smaller; } + +/* start with a value*/ +[attr^='val'] { font-size:smaller; } + +/* or ends with */ +[attr$='ue'] { font-size:smaller; } + +/* or even contains a value */ +[attr~='lu'] { font-size:smaller; } + + +/* and more importantly you can combine these together -- there shouldn't be +any spaaace between different parts because that makes it to have another +meaning.*/ +div.some-class[attr$='ue'] { } + +/* you can also select an element based on how it's parent is.*/ + +/*an element which is direct child of an element (selected the same way) */ +div.some-parent > .class-name {} + +/* or any of it's parents in the tree */ +/* the following basically means any element that has class "class-name" +and is child of a div with class name "some-parent" IN ANY DEPTH */ +div.some-parent .class-name {} + +/* warning: the same selector wihout spaaace has another meaning. +can you say what? */ +div.some-parent.class-name {} + +/* you also might choose to select an element based on it's direct +previous sibling */ +.i-am-before + .this-element { } + +/*or any sibling before this */ +.i-am-any-before ~ .this-element {} + +/* There are some pseudo classes that allows you to select an element +based on it's page behaviour (rather than page structure) */ + +/* for example for when an element is hovered */ +:hover {} + +/* or a visited link*/ +:visited {} + +/* or not visited link*/ +:link {} + +/* or an input element which is focused */ +:focus {} + + +/* #################### + ## PROPERTIES + ####################*/ + +selector { + + /* Units */ + width: 50%; /* in percent */ + font-size: 2em; /* times current font-size */ + width: 200px; /* in pixels */ + font-size: 20pt; /* in points */ + width: 5cm; /* in centimeters */ + width: 50mm; /* in millimeters */ + width: 5in; /* in inches */ + + /* Colors */ + background-color: #F6E; /* in short hex */ + background-color: #F262E2; /* in long hex format */ + background-color: tomato; /* can be a named color */ + background-color: rgb(255, 255, 255); /* in rgb */ + background-color: rgb(10%, 20%, 50%); /* in rgb percent */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ + + /* Images */ + background-image: url(/path-to-image/image.jpg); + + /* Fonts */ + font-family: Arial; + font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ + font-family: "Courier New", Trebuchet, Arial; /* if first one was not found + browser uses the second font, and so forth */ +} + +``` + +## Usage + +Save any CSS you want in a file with extension `.css`. + +```xml +<!-- you need to include the css file in your page's <head>: --> +<link rel='stylesheet' type='text/css' href='filepath/filename.css' /> + +<!-- you can also include some CSS inline in your markup. However it is highly +recommended to avoid this. --> +<style> + selector { property:value; } +</style> + +<!-- or directly set CSS properties on the element. +This has to be avoided as much as you can. --> +<div style='property:value;'> +</div> + +``` + +## Precedence + +As you noticed an element may be targetted by more than one selector. +and may have a property set on it in more than one. +In these cases, one of the rules takes precedence over others. + +Given the following CSS: + +```css +/*A*/ +p.class1[attr='value'] + +/*B*/ +p.class1 {} + +/*C*/ +p.class2 {} + +/*D*/ +p {} + +/*E*/ +p { property: value !important; } + +``` + +and the following markup: + +```xml +<p style='/*F*/ property:value;' class='class1 class2' attr='value'> +</p> +``` + +The precedence of style is as followed: +Remember, the precedence is for each **property**, not for the entire block. + +* `E` has the highest precedence because of the keyword `!important`. + It is recommended to avoid this unless it is strictly necessary to use. +* `F` is next, because it is inline style. +* `A` is next, because it is more "specific" than anything else. + more specific = more specifiers. here 3 specifiers: 1 tagname `p` + + class name `class1` + 1 attribute `attr='value'` +* `C` is next. although it has the same specificness as `B` + but it appears last. +* Then is `B` +* and lastly is `D`. + +## Compatibility + +Most of the features in CSS2 (and gradually in CSS3) are compatible across +all browsers and devices. But it's always vital to have in mind the compatiblity +of what you use in CSS with your target browsers. + +[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this. + +## Further Reading + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) + |