Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kodekode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

SINTAX CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value. Format penulisan kalimat CSS:
selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

h3 { color: red } Perhatikan penulisan h1. h2 dan h3 semua menggunakan warna merah. tag h1. dan ukuran font 150%. Penggunaan Banyak Properties Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( . Pengelompokan Selectors Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Value adalah nilai dari pengaturannya. Cara Penulisan Yang Baik Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent.h3 {color:red. dengan type font arial. maka kode CSS nya menjadi: h1.Property untuk menunjukkan. ga harus kok. font-family:arial. Contoh Syntax: h1 { color: red } Contoh di atas menunjukkan Selector: h1 Property: color Value: red Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red). ). font-size:150%. . h2 dan h3 di atur agar menggunakan warna merah.h2. Misalkan anda mau mengatur agar tag h1.} Pada contoh di atas. bagian (properti) dari selector yang hendak diatur.h2.h2.h3 yang dipisahkan oleh koma. Ya cuma biar rapih dan lebih mudah di baca aja sih. Contoh: h1.

/* Tulis komentar anda di sini */ p { text-align: justify. ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. } Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS.h2. /* Tulis komentar anda di sini */ color: blue. font-family:arial. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode.h1. } . font-family: arial. font-size:150%.h3 { color:red. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website. tapi hanya sebagai catatan untuk diri anda. CSS Comment Kadang kala.

karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.} </style> </head> Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru. elemen paragraf <P> di format agar tulisannya menggunakan warna biru. tidak akan menggunakan warna biru. .IMPLEMENTASI CSS Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web. Embedded CSS Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. </p> Pada contoh di atas. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Contoh: <head> <style type="text/css" media=screen> p {color:blue. Elemen paragraf lain. Contoh: <P style=”color:blue”> Isi paragraf. yaitu:     Inline CSS Embed atau memasang kode css ke dalam bagian <head> Nge link ke external CSS Import CSS file Yuk kita bahas satu per satu… Inline CSS Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format.

font-size: 8pt } Sementara di halaman web yang sama. di antara tag <head> ada kode CSS sbb: . anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda.css. Penggunaan Lebih dari Satu Kode CSS Apabila ada lebih dari satu kode CSS untuk satu elemen. 2. Contoh: 1.External CSS Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran . Contoh: @import "style. Dengan cara ini. } 4. maka yang akan digunakan adalah kode yang lebih spesifik.css"). text-align: left.css dari semua halaman web. menggunakan eksternal style sheet untuk memformat elemen H1 sbb: h1 { color: red. h1 {color: red. atau @import url("style. lalu tuliskan kode-kode css di dalam file tersebut. Misalkan dalam satu halaman web. di antara tag <head> dan </head> <head> <link rel=”stylesheet” href=”style. misalkan: style. Caranya dengan memasukkan kode di bawah ini. dan berinama. p {font-family: arial.css". Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini. Anda membuat satu file dengan notepad atau teks editor lain.css” type=”text/css”> </head> Import CSS Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import. font-size: small.css. Langkah kedua adalah memanggil file style.} 3.

Cara penulisan Class Selector: .} Perhatikan tanda titik di setiap awal nama Class. text-align: right. Dalam kasus seperti ini. dari eksternal style sheet. anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>. Pada contoh-contoh di pelajaran sebelumnya.nama-class {Property:value. Class Selector Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Jadi. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan. text-align=right. maka yang akan aktif adalah kode yang lebih spesifik. anda melihat penggunaan tag HTML sebagai selector. text-align=left sementara dari internal style sheet. font-size: 20pt } Perhatikan bagaimana pemformatan saling bertabrakan.nama-class {property:value. Untuk kasus seperti ini. font-size: 20pt CLASS ID SELECTOR Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. kode yang akan diimplementasikan adalah sbb: color: red. . dalam hal ini. anda bisa menggunakan Class selector dan ID selector. internal style sheet lebih spesifik dibandingkan eksternal style sheet. Misalkan anda membuat kode CSS untuk tag <h1>. dalam contoh di atas.} Untuk menempelkan class ke dalam tag HTML: taghtml.h1 { text-align: right.

gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web. Cara penulisan ID Selector: #nama-ID {property:value.kiri {color:blue. Untuk membedakannya.} h1. misalnya untuk memformat bagian menu / sidebar.tengah {color:red.} Perhatikan tanda # di setiap awal nama ID. . Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.Contoh: Penulisan kode CSS: .tengah {text-align:center. Tag H1 tengah akan berwarna hitam Tag H1 kiri akan berwarna biru ID Selector ID Selector mirip dengan Class selector.} h1.} Untuk menempelkan ID selector ke dalam tag HTML: taghtml#nama-ID {Property:value.tengah {color:black.} p.</p> <h1 > Tag H1 tengah akan berwarna hitam</h1> </div> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1> Hasil: Teks tengah akan berwarna merah.} Pemakaian kode CSS <div class=tengah> <p>Teks tengah akan berwarna merah.

/.3503:9:5 .

39./.7../.342039.9.:39:203:8.7 $0.3-07. 908..

/.3 .

4/0 9.9.80-..5.3/-.9.80-.3...3/...  .9/.. ..3:39:/7.

7. %:842039./83 .3/.

 5  909 .3:891 .

7.3/. %:842039./83 .

447-:0 1439 1.7.2. . <             .

34/0$$0/...7.8..24/0%.202.!%$$$ /.

.../:3.9:5078.447-:0  85.%....3.3/.38:30/.39/..:2021472.34/0.30.9: O O O O 330$$ 2-0/..3.  4394 !890 ..947/.2-.7.3.380-.9.3.24/0$$  .-. 20207:.333/1472.2.7.8..9:002038.2...9:  330$$ 4/0$$/9:8.3.9:.29.7.8.7.$$ 25479$$10 :9.880/.3800..:202.3503:8.30.88.98:./ 03009073.1  .9 !03:8.

.7.3/2:.7.7.-7:  02035.-07..7.//.3203:3.:.7.7./.3 9/...3839.1!/1472.5 !.:5.  !03:8.890.3.3.93.33.:0  2-0//0/$$ 3/.9.703.1.34/0$$3.-7: .3..7.9..79:8.203:3.8 002035.3$$/03.39.1472. 002035./.:/:9/03.34/0$$/.1.-8..73.5745079 .3.4394/.9.3.73.9.3/9039:.7.3../03.2030250.0.

.7/03..3/.890/.39.39.3.3/.3$$ /03.0./03..7./ !03:8.

890  4394 0./ 890950909.

.8820/.7003 5.8.447-:0< .

890 .

..30-90780-:9./ .00203!/.2.-7:  .73.8802:..4394/.3/1472.9.31439-07.0..9 203:3.2..2.

7.3...3.9:1090758.28..39.9 03.1439 8082.202..3.3/.7.3202.30- .2./.9073.30- .310890 .310$$90780-:90/..:9:8.0/:.<   ..3-073./.-:.3:39:802:...3.21090780-:9    51439 1.7.0.3.7./.7.88 ..88 3/..34/0/-.3 890 ./9:8/.88/...2.3/.3.3 /.3  4394   3/...3 /.2.88//..9.7.9.: 507:202.9:8094/0$$.3 . 28. ..7802:.34/0 4/0.8:.3. 3 .:9080/947.3/03.9:10/03./:.202-:..3/:3.3.//.507:2028.44770/<   . /03.2..2.3.3/825.3$$/03.30-.2802:.334905../.3/.98..8.25032502039./.$$ 4/0$$09073..

88 950 909.0./ 0./ 370 8908009 701 890 .

88  ..

9:4/0$$:39:8.2.3089073..4/0$$8-- .0.9:.3/:3.30-/..../.203:3..0.:  25479:7 890 .-.9.0-/./.-8.:./.9:4/0$$ 5.38.28.30-890203:3.30-....3.9:00203 2.900203 8--  .28:.39.3/.9:.2../.44770/ 909 ..9.4/0 .7.25479  4394 25479890 .7.3019 1439 8059 < $02039.30-85081  8.8908009:39:2021472.30./....2.7$.39. /.2./ 25479$$ 3/.88  ..203 25479$$0/..88  !03:3.78.3.

/.739073.8908009 909 ..9.8908009 909 .4394/.3-079.8-- .3.4/0..3/3.3.3 /.379 1439 80 59   .8:88050793 2..89080090-85081/-.9.3.379  .3  39073..2.3.3/2502039.2..379 1439 80 59 < !07.8 4/0..30-85081 /. 909 .3-.38../.44770/ 909 .7./ /.3019 802039.2..7089073.91.9./.8.5021472..2.8908009  .3..-7.3089073..

.

3-.9503:3. $0.380-0:23.39...%80-.@ ..4394 ...35079.7.3/.7.33 2021472..$$-.3/.3/. ./../.4394/50.3.73.800.3/9:8..2.947  8.800./.9.83.7.2..99.3839./03.947 !. .3..202-:.50..3.94/0$$:39:9.20.35..

3/.39.947 .7. ./442 7-07.2.503:8.88$00.8:88050793 . .:0< &39:2030250.503.3800.2  &39:. .3/.39.8.3.5.3.3/..880/.9.7/03..2.3/./.-7:802039..29.88800.3/:3..885745079.2.3.88800.73..947  .3/.99/809.9:.../442903.2.5.947 3.203:3./..947/..88/.78..-:3.9.947.203:3.:0< !07.7.88$00.339.  .-07.88800.574507908.39.883.. .3 ..5745079-07-0/.88!745079.9..30-/.33203:3.....3-0-07.947/ :.88 ..3..73.-8.74/0%.% 9.3/.3.92 3.

/.  .

909 . 5%08903.03907< 5 903.88903.447-:0<  903..34/0$$ /..3-07.447-..34/0$$ 903..3.4394 !03:8. ...< !02..73.44770/<  7...207.

3-07.73..9..903.5 %.2.

 .

3-07./.7...-7:. .887%.73.

3.88800../.3.3.947 $00.207..800..3.:39: 2021472.3.3.30.2:3.2.3-07.28.28.947 &39:202-0/.73..33.9-.947:39: 2021472... . :3.947275/03.  SY SY `WZYSSSZTW^cS^ZS`S ^SSZTW^cS^ZST^a $00.9:.8 %08903...3203:.9:.:8.9-.

39..3/.:0< &39:2030250./3.2.33203:3.923.39.503:8.% 9..947/:.29.3$00.7...947 3..../.3800. /.3/.7 4/0%.8/0-.3.2.:0< !07.5.88800.3/.9470/.7/03.7  . .2.2./809..3/.39.3.. !745079. 5745079.203:3.9.

   ./.

 .

Sign up to vote on this title
UsefulNot useful