Pengertian CSS (Cascading Style Sheet)

Sederhananya CSS adalah bahasa yang berfungsi untuk merubah tampilan halaman web “sebenarnya tag_html”. itu definisi saya tentang css, untuk lebih jelasnya silakan googling :)

Dasar-dasr CSS “cascading style sheet”

cara kerja css

cara kerja css ini sangat simple, kita hanya perlu tulis selector berserta property dan valuenya, maka tampilan tag-html juga akan berubah, misal: ingin merubah tag body, tulis seperti ini

body{ /*warna latar belakang*/background-color:/*misal*/yellow;/*kuning*/ /* warna */color: red ;/* merah*/ }

ok, untuk percobaan coba edit terserah.html tadi lalu masukan style ini

body{ background-color:yellow; color: red ; }

tepat dibawah

<style type="text/css">

lalau jalankan terserah.html
nah, terlihat kan perubahanya?
keterangan*
body, adalah yang akan kita ubah
background-color adalah property dimana tag body nanti akan memiliki nilai yellow, jadi logikanya warna latar body akan menjadi yellow atau kuning, simple kan?

komentar css

sama seperti HTML, kita juga bisa menambahkan komentar kedalam style yang kita tulis, komentar ini fungsinya ialah agar orang yang membaca bisa memahami style yang kita tulis, tentunya kita juga dimudahkan dalam mengingat code yang kita tulis.
aturan penulisan komentar css diawali dengan /*(slah + bintang) tulis komentar disini dan diakhiri dengan */(bintang + slash).
keunikan komentar css
tidak seperti HTML yang penulisan komentarnya hanya diluar tag, komentar css ini lebih enak digunakan, kita bisa menulis komentar diantara property, value, maupun selector, contoh :

h1/* ini komentar css, komentar css yang kita tulis tidak akan dijalankan */ {/* ini komentar css*/ color/* ini komentar css*/:/* ini komentar css*/blue;/* ini komentar css*/ }/* ini komentar css*/ /* dan ini komentar css*/

jika tanpa komentar seperti ini

h1{color:blue;}

metode penulisan css

didalam css, kita mengenal 4 metode penulisan, diantaranya inline style, internal style, external style, import style, berikut keteranganya

inline style

inline style : inti dari penulisan inline style ini ialah css-nya langsung ditulis bersamaan dengan tag html, contoh

<span style='color:pink;'>warna pink.</span>

Dan property dan value cssnya ditulis didalam value atribut html :)

internal style

internal style : metode internal style maksudnya ialah style css-nya digabung atau ditulis bersamaan dengan tag-tag html, namun penempatan style css-nya harus didalam tag

<style type="text/css"> /*disini*/ </style>

dan harus diletakan di element head

<head> <style type="text/css"> /*disini*/ </style> </head>
eksternal style

eksternal style : external style ini ialah metode penulisan css, dimana source style-nya terpisah dengan document html, dan untuk memangilnya kita menggunakan ini

<link rel="stylesheet" type="text/css" href="lokasi_file_css.css">

dimana value dari

href

adalah lokasi_file_css-nya

import style : hampir sama dengan external style, document html dan source css-nya terpisah. bedanya kita memanggil source css-nya dengan sintaks seperti ini

/* misal */ @import url(lokasi_file_css-nya); /* end */

dan penempatanya bisa di internal style maupun external style.
keunikan dari import style ini ialah, kita bisa mengimport beberapa file css sekaligus dan didalam import tadi masaih bisa diimpor lagi :)

maksudnya gini, misal sobat membuat file css dengan nama misal-satu.css dan misal-dua.css
nah untuk memangginnya kita menggunkan sintaks seperti ini

/* mengimport css */ @import url(misal-satu.css);/*jika disimpan di-folder yang sama*/ @import url(misal-dua.css);/* jika disimpan di folder yang sama*/ /* end */

seperti yang terurai diatas, didalam file yang di import tadi kita bisa mengimport lagi, contohnya : isi dari file misal-satu.css seperti ini

/* misal */ @import url(nama_folder/import_lagi.css); /* end */

dengan demikian, selain mengimport misal-satu.css, kita juga mengimport import_lagi.css “terletak didalam nama_folder”, beribet gituh maksudnya untuk apa? dengan teknik ini, setidaknya kita bisa menyembunyikan style yang sudah kita tulis agar tidak dilihat netter yang belum paham struktur css :(
biasanya ini dilakukan agar design kita tidak dicontek oleh web lain. tapi, sekarang ini semua website sudah bisa kita contek tampilanya, kan sourcenya sudah ada, kita tinggal salin aja sourcenya hahahahaha ;coba cari dimana saya letakkan source css home indaam.com, #PR hohohoho, tapi jagan pake pengaya/plugins ya :) ;

sintaks css

sintaks css ini juga sangat mudah, kira-kira seperti ini

tag_html/* atau */ selector_id/* atau */ selector_class/* atau */ { property: value; property_lain: value; property_lain_lagi : value; } /* atau */ p{ font-family:arial; } .warna_merah{ color:red; } #id_unik{/* selector id diawali dengan # *pager * */ text-align:left; font-size:40px; } /* kira kira seperti itulah sintaksnya*/

keterangan*

  • diawali dengan selector, atau tag
  • lalu { *buka kurung karawal*
  • diikuti dengan property
  • setelah peroperty, tambahkan : *titik dua*
  • kemudian masukan value dari peroperty itu,
  • dan setiap value diakhiri dengan ; *titik koma*
  • untuk mengakhiri ditutup dengan } *tutup kurung karawal *
  • /* selesai */

selector id dan class

selector class

selector class : seperti yang terurai diatas, penulisan css selector class adalah seperti ini

.nama_class{/* diawali dengan dot lalu nama class */ color:red; }

agar style ini bisa berjalan kita harus menambahkan atribut class pada tag html dan valuenya diisi dengan nama_class

contoh

<span class='nama_class'>aaaaaaa</span> <div class='nama_class'>bbbbbbb</div>

dengan demikian tag html yang diberi atribut class dengan value nama_class akan memiliki style sesuai dengan property yang kita tulis *contoh diatas akan mambuat text aaaaaa dan bbbbbbb berwarna merah atau red*

contoh 2
edit kembali terserah.html
lalu tambahkan style ini

.sideleft{ background:black; color:white; font-weight:bold; }

tepat dibawah

<style type="text/css">

save lalu jalankan terserah.html
nantinya sidebar kanan akan memiliki style warna-latar hitam, warna text putih dan hurufnya tebal, simple kan?

selector id

hampir sama dengan selector class, hanya saja id ini harus unik, jadi untuk pemakainya hanya boleh sekali

misal css-nya seperti ini

#nama_id{ /* misal */background:black; }

dan pada penulisan HTML, ID-nya pun harus ditulisa sekali

<div id="nama_id"> misal </div>

dan jika ditulis lebih dari sekali, maka itu salah!

property dan value

anggap saja property dalam css itu adalah style perintah, misal color, font, background dll.
property css ini sudah memiliki value khusus dengan kata lain property dan value dalam css tidak boleh dicampur aduk. contoh : color, karena property-nya adalah color maka valuenya harus warna pula, misal red, blue, silver, black, yellow dll. bisa juga dengan hex color, rgb, rgba, hsv.
Jadi, jika sobat menulis property color lalu valuenya adalah misal(arial, margin, left, 13px) itu salah besar. sama halnya jika sobat menulis property font lalu valuenya misal red.

Apa yang harus diperhatikan dari CSS

yang paling pertama adalah sintaks atau aturan penulisan dan yang kedua adalah propery dan value-nya, sobat juga harus tahu nilai defaut dari html, misal tag span, a, strong, em dsb memiliki style display:inline dan tag div, form, body dsb memiliki style display:block.

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s