1. Pengenalan CSS
CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer
untuk mengatur style halaman web mereka, mulai dari memformat text, sampai memformat
layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh kekonsistenan style pada
elemen tertentu.
Perkembangan CSS sendiri diawali pada tahun 1996, di mana W3C (World Wide Web
Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk
membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C
mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC
web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang
sampai saat ini masih terus diperbarui lagi.
2. Metode Implementasi/ Penulisan dan Sintaks CSS
2.1 Metode Penulisan CSS
didalam css, kita mengenal 4 metode penulisan, diantaranya inline style, internal style, external
style, import style, berikut keteranganya
NOTE!: Tulisan yang diapit slash bintang dan bintang slash, seperti ini>> /* */ ,
adalah sebuah komentar dan bukanlah bagian dari pengkodean
A. 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.
B. 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>
C. 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
D. 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 masih bisa
diimpor lagi maksudnya, misal kita 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”
2.2. Sintaksis CSS
Pengelompokan dalam sintaks CSS kurang lebih seperti ini:
A. Selector = Terdiri dari tag,class,ID
B. Declaration = Mendeskripsikan property dan value
*)dalam coding:
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;
}
/* kurang lebih 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/ semicolon)
• untuk mengakhiri ditutup dengan } (tutup kurung karawal)
• /* selesai */
2.3 Selector ID dan Class
A. 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
Tambahkan style ini
.sideleft{
background:black;
color:white;
font-weight:bold;}
tepat dibawah <style type="text/css">
nantinya sidebar kanan akan memiliki style warna-latar hitam, warna text putih dan hurufnya
tebal
B. 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 ditulis sekali
<div id="nama_id">
misal
</div>
dan jika ditulis lebih dari sekali, maka itu salah!
C. 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 kita menulis property color lalu valuenya adalah misal(arial, margin, left, 13px)
itu salah besar. sama halnya jika kita menulis property font lalu valuenya misal red.
3 Contoh-Contoh Penggunaan CSS
PENULISAN PADA TAG DENGAN ATRIBUT STYLE
4 Kelebihan dan Kekurangan dari CSS
A. Kelebihan
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain seefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.
7. dan masih banyak lagi.
B. Kekurangan
1. Tampilan pada browser berbeda-beda.
2. Kadang juga terdapat browser yang tidak support CSS (browser lama).
3. Harus tahu cara menggunakannya.
4. dibutuhkan waktu lebih lama dalam membuatnya.
5. Belum lagi ada bug/error dalam CSS.
