Langsung ke konten utama

Apa itu CSS & Konsep Dasar CSS

Apa sih CSS itu? Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain halaman web. Entah berurusan dengan theme / template blog hingga mengedit halaman profile friendster, anda pasti mendengar istilah CSS. Jika anda mencari penjelasan untuk dapat memahami konsep CSS, anda datang ke halaman yang tepat.
Agar konsepnya nyambung, pastikan anda membaca post mengenai HTML terlebih dahulu.

Apa itu CSS?

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.

Desain dengan tabel :

  1. Buat desainnya. menggunakan .psd ( photoshop ) atau .cdr ( coreldraw )
  2. buat tabelnya. menggunakana tag <table>, <tr> dan <td>
  3. potong – potong desain sesuai dengan kolom pada tabel, lalu “selipkan” desain pada kolom tabel menggunakan sebagai elemen image tabel atau background.
Dengan CSS, cara kerja ini dirubah. Anda membuat halaman HTML, lalu anda berikan identitas pada bagian2 tertentu dengan tag <div> baik itu menggunakan atribut id <div id=”"> atau class <div class=”">. Lalu anda buat satu file css, bisa di selipkan pada bagian <head> atau dalam file berbeda dan di hubungkan dengan tag <link rel=”stylesheet” type=”text/css” href=”">. File CSS tadi memberikan nilai dan definisi pada bagian tertentu dari halaman html tadi yang diberikan identitas melalu tag <div>.

Desain dengan CSS :

  1. Buat halaman web, beri identitas pada bagian yang diinginkan menggunakan tag <div>
    Buat halaman web
    Buat halaman web
  2. buat file css, beri nilai dari definisi untuk identitas yang diinginkan
    Beri Nilai dan Definisi Untuk Identitas
    Beri Nilai dan Definisi Untuk Identitas
  3. hubungkan CSS pada halaman yang dimaksud. bisa ditaruh diantara <head>, atau dibuat file terpisah dan dilink menggunakan tag <link rel=”"> pada area <head>

Kelebihan penggunaan CSS :

  1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
  2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Kelebihan Desain Menggunakan CSS
Kelebihan Desain Menggunakan CSS
Bagaimana? ada pertanyaan? post kali ini hanya akan membahas pemahaman dasar dan definisi saja. untuk implementasi dari CSS itu sendiri, kita bahas pada post2 selanjutnya.

Komentar

Posting Komentar

Silahkan beri komentar anda,,,dan semoga jadi masukan yg positif bagi kami :-)
Salam,
Blogger

Postingan populer dari blog ini

Arti Kata Chaos

Seorang anak yang sedang belajar bahasa Inggris hendak menanyakan arti sebuah kata dalam bahasa Indonesia karena kamusnya sedang dipinjam oleh temannya. Kata tersebuat adalah : "Chaos". Anak : "Bu, apa arti kata chaos dalam bahasa Rusia?" Ibu : "Oh... itu tergantung siapa pengarang kamusnya nak." Anak : "Lho kok . . . , apa tiap pengarang berbeda arti bu? (tanya sang anak semakin bingung)" Ibu : "Kalau menurut Pusat Bahasa berarti kacau balau, tapi kalau Pemerintah, itu artinya Aman dan Terkendali nak."
Posting Komentar
Baca selengkapnya

Apa itu HTML

Post kali ini akan sangat teknikal sekali. Dalam beberapa post kedepan, kami berencana mengupas tuntas blogging dari sisi teknologi atau pemrograman . harapan kami, blogger – blogger yang belum memiliki dasar pemahaman pemrograman web dan penasaran bagaimana aplikasi blogging berjalan akan tercerahkan melalui seri post ini. Well, enjoy then Apa itu HTML? HTML = HyperText Markup Language. Bahasa Markup ( berdasarkan id.wikipedia, bahasa markup berarti kombinasi teks dan informasi tambahan mengenai teks tersebut. markup = markah/penanda, atau dalam HTML <tag> yang memberikan fungsi tertentu ) yang digunakan untuk membuat sebuah halaman web. HTML adalah standar yang digunakan untuk sebuah halaman web. HTMl di definisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Itu tadi definisi dari HTML. bisa dijelaskan lebih detil lagi? Hmm… Sederhananya begini. Saya yakin anda semua mengetahui file .doc nya microsoft word. nah, ini ada jenis fi
Posting Komentar
Baca selengkapnya
Mawar Untuk Ibu Seorang pria berhenti di toko bunga untuk memesan seikat karangan bunga yang akan dipaketkan pada alamat sang ibu yang tinggal sejauh 250 km darinya. Begitu keluar dari mobilnya, ia melihat seorang gadis kecil berdiri di trotoar jalan sambil menangis tersedu-sedu. Pria itu menanyainya, “kenapa kau menangis gadis kecil?” dan dijawab oleh gadis kecil, “Saya ingin membeli setangkai bunga mawar merah untuk ibu saya. Tapi saya cuma punya uang lima ratus rupiah saja, sedangkan harga mawar itu seribu rupiah” Pria itu tersenyum dan berkata, “Ayo ikut, aku akan membelikanmu bunga yang kau mau.” Kemudian ia membelikan gadis kecil itu setangkai mawar merah, sekaligus memesankan karangan bunga untuk dikirimkan ke alamat ibunya. Ketika selesai dan hendak pulang, ia menawarkan diri untuk mengantar gadis kecil itu pulang ke rumah. Pria itu berkata, “Bolehkah aku mengantarmu pulang, gadis kecil?” Gadis kecil itu melonjak gembira, katanya, “Ya, tentu saja. Maukah Anda m
Posting Komentar
Baca selengkapnya