Cascading Style Sheet (CSS)

Jumat, 21 Agustus 2009

Cascading Style Sheet (CSS)

Diposting oleh ADHIE BLOG di Jumat, Agustus 21, 2009 . Jumat, 21 Agustus 2009

Apa sech yang di maksud dengan Cascading Style Sheet yang bisa kita singkat CSS.

CSS adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website yang akan kita bangun. Dengan menggunakan CSS, pengaturan tampilan halaman web kita tersebut dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website.

Style Sheets merupakan mekanisme yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web atau blog, akan tetapi penggunaan CSS merupakan suatu kelebihan tersendiri. Suatu CSS merupakan tempat dimana anda mengontrol dan mengatur style-style yang ada. CSS mendeskripsikan bagaimana tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakannya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font Arial dan masih banyak lagi yang bisa anda lakukan dengan style sheet.

Penggunaan CSS

CSS dapat dibuat hanya dengan menggunakan Notepad atau text editor sederhana lainnya dan disimpan dengan ekstensi .css. Agar halaman website dapat membaca file CSS tersebut maka perlu ditambahkan baris kode tertentu pada bagian <head></head> halaman website tersebut seperti contoh di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Judul Halaman</title>
<!-- Baris yang ditambahkan -->
<link rel="stylesheet" href="[URL]" type="text/css" media="screen" />
<!-- Akhir dari baris yang ditambahkan -->
</head>
<body>
	<div>
		<h1>Contoh Halaman Website</h1>
		<p>
		  Ini adalah isi paragraf
		  dari contoh halaman website
		</p>
	</div>
</body>
</html>
[URL] = Alamat URL tempat file CSS tersebut disimpan
 
Penulisan kode CSS
Kode CSS disebut dengan style. Penulisan kode CSS dalam sebuah file CSS adalah dengan format sebagai berikut:
 
tag { property: value; }
 
tag = tag XHTML, atau nama layer dimana style tersebut berfungsi.
property = Detail yang tampilannya diubah dengan style tersebut.
value = Nilai dari properti di atas.
Sebagai contoh, untuk mengubah format tampilah dari sebuah judul artikel (header) yang memiliki kode <h1>Contoh Halaman Website</h1> menjadi bergaris bawah, berwarna biru dan berukuran 28 pixel, maka dalam file CSS dapat ditulis:
 
h1 { text-decoration: underline,  color: blue; font-size: 28px; }
 
Hal tersebut akan menimbulkan efek yang sama untuk setiap kali kode <h1> ... </h1> digunakan dalam halaman XHTML.
Cara penulisan lainnya adalah dengan mendefinisikan style berdasarkan class atau ID layer. Untuk cara ini, maka kode XHTML harus mendefinisikan nama class atau identitas layer yang digunakan seperti pada contoh berikut:
Header dengan class bernama “judul”
Pada halaman XHTML ditulis:
<h1 class="judul">Contoh Halaman Website</h1>
Pada file CSS didefinisikan:
.judul { text-decoration: underline, color: blue; font-size: 28px; }Kode ini tidak merubah semua tag <h1> ... </h1>, namun akan merubah semua tag yang memiliki nama class yang sama seperti misalnya:
<div class="judul"> ... </div>
Header dengan ID bernama “judul”
Pada halaman XHTML ditulis:
<h1 class="judul">Contoh Halaman Website</h1>
Pada file CSS didefinisikan:
#judul { text-decoration: underline, color: blue; font-size: 28px; }
Kode ini juga memiliki pengaruh yang sama dengan penggunaan berdasarkan class. 
Kode-kode CSS yang lebih lengkap dapat Anda pelajari dari file yang dapat Anda unduh dari sini.
Hal utama yang perlu diperhatikan adalah bahwa penulisan style dalam CSS harus berurutan dan diperhatikan agar jangan sampai tumpang tindih. Untuk lebih jelasnya, perhatikan contoh berikut:
Pada CSS tertulis:
 
h1 { text-decoration: underline, color: blue; font-size: 28px; }
#pagetitle { font-size: 12px; }
 
Pada halaman website tertulis:
 
<h1 id="pagetitle">Contoh Halaman Website</h1>
 
Maka yang terjadi adalah, pada tampilan website besar tulisan “Contoh Halaman Website” adalah hanya 12 pixel, bukan 28 pixel karena ID untuk tag h1 yaitu #pagetitle dituliskan paling akhir.
 
Class dan ID dalam CSS
Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan class dan ID dalam CSS dan XHTML.
ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript. 
ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id yang sama pada satu halaman yang sama. 
Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu seperti misal:
<h1 class="judul besar kanan">Contoh Halaman Website</h1>
dimana judul, besar dan kanan memiliki style yang saling melengkapi. 
ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan, header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf. 
Class dapat digunakan untuk mempertegas style dari ID yang bersifat global dengan menggunakannya bersama-sama pada satu tag seperti misal:
<h1 id="pagetitle" class="judul">Contoh Halaman Website</h1>

Sumber: preaxz.com

Photobucket

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Silakan isi komentar anda

PETUAH BIJAK

1. Satu-satunya saat ketika hendaknya Anda tidak melakukan sesuatu adalah ketika Anda sedang marah. 2. Terkadang didalam hidup, seseorang harus bersedia mundur selangkah untuk mempersiapkan diri melangkah kedepan. 3. Motivasi terkuat adalah motivasi yang berlandasankan perasaan cinta atau kasih sayang. 4. Kesuksesan adalah hasil perpaduan kerja otak, kerja hati, dan kerja keras. 5. Teman terbaik dalam menemani perjalan hidup Anda adalah terutama diri Anda sendiri. 6. Kesuksesan Anda merupakan tanggung jawab Anda sendiri. Demikian pula kegagalan yang Anda Alami. 7. Teman sejati adalah mereka yang mendekati Anda ketika yang lain meninggalkan Anda. 8. Kita tiada lain adalah apa yang kita sendiri pikirkan, rasakan, dan lakukan. 9. Hadiah terbaik kepada seorang teman adalah kehangatan hati Anda. 10. Teman terbaik Anda adalah tempat untuk mendapatkan cermin diri yang terbaik. 11. Masalah menciptakan peluang bagi Anda untuk menjadi kreatif dan menjadi pemenang. 12. Saya mencari sahabat, tetapi tidak menemukan seorangpun.Saya menjadi sahabat, dan sahabat pun berada dimana-mana. 13. Terkadang tidak ada salahnya melakukan kesalahan, tetapi jangan hanya mengumpulkan kesalahan itu, lakukan perbaikan. 14. Kita tiada lain adalah yang kita sendiri pikirkan, rasakan, dan lakukan. 15. Waktu Anda adalah peluang Anda, waktu Anda adalah kehidupan Anda. Gunakan waktu Anda sebaik-baiknya untuk hal-hal yang bermanfaat. 16. Kemarin Saya mersa baik. Hari ini Saya hebat. Esok hari Saya akan merasa lebih baik lagi dan lebih hebat lagi. 17. Tidak akan ada langkah keseribu jika langkah pertama tidak dilakukan. Maka, melangkah, jangan tunda-tunda lagi. 18. Seorang pemenang itu ibarat rajawali yang mengepakan sayapnya terbang di angkasa menerjang segala rintangan. 19. Tanaman dirumah anada memerlukan kecerahan sinar mentari. Karyawan dikantor Anda memerlukan kecerahan wajah atasannya. 20. Hanya mereka yang berbuat lebih, yang pantas menerima lebih. 21. Dalam mencapai sasaran, pilihan berada ditangan Anda. Melangkah gamang karena ragu atau bergerak mantap karena yakin. 22. Sebagai pemimpin, kita hidup bagaikan dibawah mikroskop. Segala hal yang kita lakukan atau katakana, tidak terlepas dari pengamatan pengikut kita. 23. Guru ditemukan diruang kelas sekolah. Namun pastinya, guru terbaik adalah pengalam kita sendiri. 24. Begitu Anda berkata, “Tidak bisa”, Anda sudah setengah Kalah. 25. Untuk mendapatkan teman sejati, jadilah teman sejati. 26. Yang terpenting bukalah berapa lama kita bekerja, tetapi apa yang kita kerjakan disepanjang waktu yang lama itu. 27. Bukalah setiap hari baru dengan rasa syukur kepada Tuhan atas apa yang Dia berikan bagi Anda sekeluarga, dan kemudian tutuplah hari itu dengan doa Syukur. 28. Mungkin kita memang tidak sama. Namun, tujuan kita tentu saja sama : KESUKSESAN. 29. Untuk mencapai kesuksesan, ingatlah untuk bersedia berbuat lebih baik dari berapa Anda dibayar, alih-alih mengharapkan dibayar lebih dari apa yang Anda lakukan. 30. Sebelum Anda menjadi marah atas kelemahan seseorang, lakukan sepuluh hitungan, yaitu menghitung sepuluh kelemahan Anda sendiri. 31. Ketika seseorang berbuat salah, itu menunjukan ia telah melakukan sesuatu.Apabila tidak ada kesalah, bisa jadi karena ia tidak berbuat apapun. 32. Seseorang yang memiliki banyak waktu untuk merasa khawatir adalah seseorang yang tidak memiliki waktu untuk menjadi sukses. 33. Bintang-bintang bersinar gemerlapan karena terdapat kegelapan disekelilingnya. 34. Potensi hanya akan berarti apabila diwujudkan. 35. Pada dasarnya ada dua sasaran didalam kehidupan.Pertama, mencapai apa yang kita inginkan. kedua, menikmati apa yang telah kita capai. 36. Jika kita menemukan orang berhenti berusaha karena putus asa, itu berarti kita menemukan seseorang yang memutuskan untuk tidak berhasil. 37. Setiap orang tidak hanya pelru bangga akan kelebihan dirinya, tetapi bahkan harus bangga, meskipun hendaknya tetap bersikap rendah hati. 38. Kesalahan terbesar yang orang sering lakukan adalah melakukan kesalahan. 39. Masalah terbesarnya adalah ketika Anda menemukan betapa Anda tidak memiliki masalah didalam kehidupan. 40. Kebiasaan membaca itu ibarat memberikan vitamin dan gizi kepada mental, sebagaiman kepada tubuh Anda. 41. Kehilangan uang bisa diatasi dengan bekerja.kehilangan kesehatan bisa diatasi dengan beristirahat. kehilangan pengetahuan bisa diatasi dengan belajar. tetapi, jika Anda kehilangan waktu Anda akan betul-betul kehilangan. 42. Jangan membuat rencana kecil, karena hal itu tidak ada artinya dalam membakar semangat Anda. 43. Bagaimana kita berprestasi sebagai individu akan menentukan bagaimana kita berprestasi sebagai bangsa. 44. Anda dua jenis orang didunia, yaitu para actor dan reactor. Kebanyakan orang adalah re-aktor, yang hanya berbuat untuk bereaksi atau menaggapi suatu peristiwa. Ia tidak berinisiatif. 45. Tuhan berilah saya kemampuan untuk menerima hal-hal yang tidak saya bisa ubah, keberanian untuk mengubah hal-hal yang mampu saya ubah, dan kebijaksanaan untuk mengenali perbedaannya. 46. Ketika Anda membatu orang lain agar berubah, berkembang, dan menemukan kemampuannya sendiri, Anda telah memberikan nilai tambah ke dalam kualitas kehidupannya. 47. Mereka yang mau bertanya adalah orang yang “Bodoh”, selama lima menit tersebut. Sedangkan mereka yang tidak mau bertanya adalah orang yang bodoh seumur hidup. 48. Seorang pemimpin harus bernada Optimistis ketika menghadapi suara yang pesimistis. 49. Percakapan adalah praktik dua orang yang bergantian berbicara.Sedikit sekali orang yang mau mendengarkan orang lain, karena biasanya ia sibuk memikirkan apa yang selanjutnya akan ia katakan 50. Hidup ini penuh resiko dan masalah. tetapi juga penuh kegembiraan, keberuntungan, dan sukacita. 51. Pemimpin akan dihargai apabila mereka terbuka terhadap gagasan, peka terhadap harga diri pengikutnya, dan bijaksana ketika mengambil keputusan. 52. Kegagalan harus menjadi guru kita, bukan penggali kubur kita. kegagalan menantang kita ketingkat prestasi yang baru, alih-alih menarik kita kedalam keputusaasaan. 53. Kadar ketabahan kita manentukan berapa lama kita bisa bertahan. 54. Beranikah Anda mengambil langkah pertama dan membuka diri untuk mengalami hal-hal yang tidak terduga ? 55. Harapkan yang terbaik, tetapi bersiaplah untuk yang terburuk. 56. Hadapi masalah yang sangat mendasar, dan buanglah jauh-jauh masalh sepele. 57. Peluang kesukseskan akan selalu meningkat seiring dengan semakin banyak upaya kita. 58. Kesuksesan diawali dengan mimpi, dipengaruhi oleh persepsi, dan diwujudkan oleh tindakan. 59. Semua masalah selalu atau sama sekali tidak, memiliki jalan keluar. bila ada, carilah sampai dapat . kalu tidak ada , tidak apa-apa. 60. Apa yang terjadi tidak begitu utama. yang lebih utama adalah bagaimana menerima dan mengolahnya. 61. Tidak ada yang mustahil jika Anda memusatkan segenap perhatian kepada kekuatan dan kemampuan Anda. 62. Hidup adalah sebuah karya yang Anda ciptakan sendiri 63. Gunakan perasaan khawatir untuk menolong diri Anda agar lebih kreatif. 64. Sebuah masalh akan menjadi masalah jika Anda membiarkanya demikian Anda dapat mengubah masalah menjadi sebuah kesempatan. 65. Sebuah tugas yang dikerjakan dengan baik akan meninggalkan kepuasan yang mendalam. 66. Kebahagian tidak datang begitu saja. tidak ada orang yang dikaruniai kebahagian. kita harus mencari kebahagian kita sendiri, melauli sikap berpikir kita dan kesediaan kita untuk bersyukur. 67. Kita mempunyai kelebihan masing-masing. Maka, jangan sekali-kali mengecilkan diri kita sendiri, karena orang lain dengan serta-merta akan mengecilkan kita. 68. Hindari berkumpul dengan orang-orang yang mengasihiani diri sendiri dan banyak mengeluh. 69. Untuk dapat berbahagia, kita harus terus-meOrang yang menerus memasukan kedalam diri kita, pemikiran positif mengenai perbuatan dan prestasi kita. 70. Orang yang pesimistis sering kali memikirkan hal-hal yang tidak enak, dan hal itu biasanya lalu benar-benar terjadi. 71. Jika kita yakin bahwa sebuah tujuan kelak dapat tercapai, akan timbul suatu kekuatan besar yang memdorong kita sampai tujuan itu terwujud. 72. Lebih penting dari memulai adalah kemana kita akan pergi. 73. Banyak orang senag mengenang kembali berbagi peristiwa pahit dan kegagalan. mereka tidak akan pernah bahagia. 74. Banyak orang ibarat pohon mangga didalam pot. Akar tunggang kepercayaan dirinya tertekuk dan tertekan oleh citra diri negative mereka sendiri. 75. Pola pikir positif itu seperti vitamin dan makanan kesehatan bagi mental dan jiwa. Pola pikir positif dapat membawa Anda melalui hari-hari yang buruk. 76. Pola piker negative sungguh menjadi racun bagi kita. tiap peluang untuk bahagia bisa dihancurkan oleh pola piker negative. Pola piker negative bisa membuat kita sakit baik badan maupun emosi. 77. Anda sendirilah yang menentukan sikap Anda, bukan bos, orangtua, atau siapapun. Anda lah penguasa dari jiwa dan pikiran Anda. 78. Kesempatan bukan semata sesuatu yang harus dicari, direbut, apalagi ditunggu. Kesempatan harus kita ciptakan. Masalah, bersediakah kita untuk berbuat sesuatu secara lebih. 79. Temukan seseorang yang tidak memiliki cita-cita, maka kita menemukan seseorang yang tidak mengetahui arah hidupnya. 80. Semua orang besar adalah penghayal. mereka melihat sesuatu dibalik kabut. Sebagian dari kita membiarkan khayalan besar mati, sebagaian lagi membinanya dan bergerak untuk memujudkannya. Termasuk yang manakah Anda. 81. Jadilah tidak puas untuk bertekad melakukan yang lebih baik, namun lebih baik, namun juga cukup puas untuk dapat mengucapkan syukur. 82. Sekali Anda telah Menentukan tujuan, tetaplah berpikir positif dan bergerak Aktif menuju ke sana.

Jumat, 21 Agustus 2009