6.6 KiB
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. Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum.
/* 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.
<!-- 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:
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
and the following markup:
<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.
Ehas the highest precedence because of the keyword!important.
It is recommended to avoid this unless it is strictly necessary to use.Fis next, because it is inline style.Ais next, because it is more "specific" than anything else.
more specific = more specifiers. here 3 specifiers: 1 tagnamep+
class nameclass1+ 1 attributeattr='value'Cis next. although it has the same specificness asB
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 is one of the best sources for this.