CSS At a Glance
Posted
by Unknown
on 1/07/2009
This item was filled under
CSS Tutorials
Masih ingatkah pembaca tentang fungsi instruksi dari tag-tag pada HTML dimana salah satunya adalah sebagai Presentation, yang berfungsi untuk mengatur tampilan dari suatu dokumen atau halaman website? Misalnya tag <i> yang memberikan instruksi untuk membuat text menjadi cetak miring. Untuk lebih jelasnya bisa Anda buka kembali postingan yang lalu disini. Lantas apa hubungannya dengan CSS yang sekarang kita bahas? Nah, fungsi instruksi dari HTML itu sekarang sudah dapat digantikan oleh yang namanya CSS. Berikut pengertian CSS yang saya coba untuk mendefenisikannya sendiri:
"CSS yang kepanjangannya adalah Cascading Style Sheets merupakan sebuah bahasa yang digunakan untuk mengatur tampilan dari suatu dokumen atau halaman website, atau dengan kata lainnya mengatur penampilan atau penampakan dari sebuah halaman website"
Fungsi ini sama dengan fungsi tag HTML sebagai presentation. Tampilan yang diatur antara lain warna, bentuk, ukuran, letak dan sebagainya dari halaman atau dokumen website tersebut. Seperti yang pernah kita bahas sebelumnya, jika di dalam bahasa HTML kita ingin menginstruksikan sebuah teks menjadi cetak tebal, maka kita gunakan tag <strong>
Penulisannya: <strong>HALLO</strong>
Tampilannya: HALLO
Jika kita ingin membuat teks tersebut juga cetak miring, maka kita tambahkan tag <i>
Penulisannya: <i><strong>HALLO</strong><i/>
Tampilannya: HALLO
Dari sana bisa kita lihat bahwa jika ingin mengatur tampilan dari sebuah data misalnya sebuah teks, maka kita perlu menambahkan tag-tag yang menginstruksikan tampilan tersebut secara langsung pada teks tersebut. Jika ternyata ada teks lain yang ingin kita tampilkan sama seperti teks "HALLO" tersebut, maka kita harus memberikan tag-tag yang sama seperti tag-tag pada teks "HALLO" pada teks yang baru tersebut. Gimana, kebayangkan prinsip kerja tag HTML tersebut?
Sedangkan pada CSS, kita tidak perlu melakukan deklarasi satu persatu seperti dalam penggunan tag-tag HTML. CSS dapat menggantikan peran tag-tag tersebut dengan mendeklarasikan terlebih dahulu sebuah atribut, dan atribut tersebutlah yang akan digunakan oleh data-data seperti teks dan yang lainnya sebagai tampilannya.
Analoginya seperti ini:
Diawal kita defenisikan (deklarasikan):
Maka, jika kita ingin seseorang penampilannya seperti mahasiswa ITS, maka kita cukup memberikan atribut kepadanya, yaitu "Mahasiswa ITS".
Dengan dia menyandang atribut "mahasiswa ITS", dia akan beralmamater biru, berdasi, dan bercelana hitam. Begitu pula jika seseorang ingin kita tampilkan beralmamater kuning, tidak berdasi, dan bercelana putih, maka kita berikan dia atribut "Mahasiswa UI".
Analogi tersebut berbeda jika didalam HTML. Jika kita ingin menampilkan seseorang beralmamater biru, memakai dasi, dan bercelana hitam, maka diawal kita harus memakaikan almamater, dasi, dan celana tersebut kepadanya. Jika kita ingin menambahkan tampilan baru misalnya memakai topi merah, maka kita harus memakaikan topi merah pada orang tersebut. Bayangkan jika orang yang ingin ditampilkan berjumlah 10, 20, atau 100? Tentu sangat repot. Berbeda dengan CSS, kita cukup menambahkan deklarasi baru bahwa seorang mahasiswa ITS juga bertopi merah, maka secara otomatis orang-orang yang telah menyandang atribut "Mahasiswa ITS" akan tampil bertopi merah pula.
Dengan kata lain, jika dengan tag HTML kita memakaikan almamater, dasi, celana, dan topi secara langsung pada seseorang agar dia tampil seperti yang kita inginkan, maka pada CSS kita cukup mencantumkan kepadanya sebuah atribut yang sudah kita defenisikan, misalnya "Mahasiswa ITS" atau "Mahasiswa UI", maka dia akan memakai sendiri almamater, dasi, celana, dan topi agar tampil seperti mahasiswa ITS atau UI.
Gimana? uda kebayangkan prinsip kerja dan bedanya? Mau makein celana ke orang lain atau nyuruh dia sendiri yang make? (NB: kalau makein pakaian buat cewek cakep sih gpp).He3x. Bercanda bro n sist ^^.
Bagaimana implementasinya? Tunggu postingan selanjutnya yach..saya mau belajar MSDM dulu, besok mau ujian soalnya. Sabar ya kawan-kawan. Doain biar sukses ujiannya :)
"CSS yang kepanjangannya adalah Cascading Style Sheets merupakan sebuah bahasa yang digunakan untuk mengatur tampilan dari suatu dokumen atau halaman website, atau dengan kata lainnya mengatur penampilan atau penampakan dari sebuah halaman website"
Fungsi ini sama dengan fungsi tag HTML sebagai presentation. Tampilan yang diatur antara lain warna, bentuk, ukuran, letak dan sebagainya dari halaman atau dokumen website tersebut. Seperti yang pernah kita bahas sebelumnya, jika di dalam bahasa HTML kita ingin menginstruksikan sebuah teks menjadi cetak tebal, maka kita gunakan tag <strong>
Penulisannya: <strong>HALLO</strong>
Tampilannya: HALLO
Jika kita ingin membuat teks tersebut juga cetak miring, maka kita tambahkan tag <i>
Penulisannya: <i><strong>HALLO</strong><i/>
Tampilannya: HALLO
Dari sana bisa kita lihat bahwa jika ingin mengatur tampilan dari sebuah data misalnya sebuah teks, maka kita perlu menambahkan tag-tag yang menginstruksikan tampilan tersebut secara langsung pada teks tersebut. Jika ternyata ada teks lain yang ingin kita tampilkan sama seperti teks "HALLO" tersebut, maka kita harus memberikan tag-tag yang sama seperti tag-tag pada teks "HALLO" pada teks yang baru tersebut. Gimana, kebayangkan prinsip kerja tag HTML tersebut?
Sedangkan pada CSS, kita tidak perlu melakukan deklarasi satu persatu seperti dalam penggunan tag-tag HTML. CSS dapat menggantikan peran tag-tag tersebut dengan mendeklarasikan terlebih dahulu sebuah atribut, dan atribut tersebutlah yang akan digunakan oleh data-data seperti teks dan yang lainnya sebagai tampilannya.
Analoginya seperti ini:
Diawal kita defenisikan (deklarasikan):
- Mahasiswa ITS adalah orang yang beralmamater biru, memakai dasi, dan bercelana hitam
- Mahasiswa UI adalah orang yang beralmamater kuning, tidak berdasi, dan bercelana putih.
Maka, jika kita ingin seseorang penampilannya seperti mahasiswa ITS, maka kita cukup memberikan atribut kepadanya, yaitu "Mahasiswa ITS".
Dengan dia menyandang atribut "mahasiswa ITS", dia akan beralmamater biru, berdasi, dan bercelana hitam. Begitu pula jika seseorang ingin kita tampilkan beralmamater kuning, tidak berdasi, dan bercelana putih, maka kita berikan dia atribut "Mahasiswa UI".
Analogi tersebut berbeda jika didalam HTML. Jika kita ingin menampilkan seseorang beralmamater biru, memakai dasi, dan bercelana hitam, maka diawal kita harus memakaikan almamater, dasi, dan celana tersebut kepadanya. Jika kita ingin menambahkan tampilan baru misalnya memakai topi merah, maka kita harus memakaikan topi merah pada orang tersebut. Bayangkan jika orang yang ingin ditampilkan berjumlah 10, 20, atau 100? Tentu sangat repot. Berbeda dengan CSS, kita cukup menambahkan deklarasi baru bahwa seorang mahasiswa ITS juga bertopi merah, maka secara otomatis orang-orang yang telah menyandang atribut "Mahasiswa ITS" akan tampil bertopi merah pula.
Dengan kata lain, jika dengan tag HTML kita memakaikan almamater, dasi, celana, dan topi secara langsung pada seseorang agar dia tampil seperti yang kita inginkan, maka pada CSS kita cukup mencantumkan kepadanya sebuah atribut yang sudah kita defenisikan, misalnya "Mahasiswa ITS" atau "Mahasiswa UI", maka dia akan memakai sendiri almamater, dasi, celana, dan topi agar tampil seperti mahasiswa ITS atau UI.
Gimana? uda kebayangkan prinsip kerja dan bedanya? Mau makein celana ke orang lain atau nyuruh dia sendiri yang make? (NB: kalau makein pakaian buat cewek cakep sih gpp).He3x. Bercanda bro n sist ^^.
Bagaimana implementasinya? Tunggu postingan selanjutnya yach..saya mau belajar MSDM dulu, besok mau ujian soalnya. Sabar ya kawan-kawan. Doain biar sukses ujiannya :)
Dapatkan Tutorial Website Via Email:
Apa itu RSS FEED?
7 komentar on "CSS At a Glance"
penjelasannya mudah dipahami..
saya jadi lebih mengerti ttg CSS!
jadi terukir jelas d hati apa tu CSS. :)