- Back to Home »
- -f , Pelajaran »
- CSS nih~ (part1)
Posted by :
Unknown
Rabu, 04 Maret 2015
Pengertian ~
CSS (Cascading Style Sheet) merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita seperti untuk menggambarkan tampilan dan format yang ditulis dalam bahasa Markup (HTML).
Di dalam CSS terdapat Division atau bagian, di dalam Web dibagi kedalam :
1.Header
Biasanya pada bagian header ini berisi logo, nama web, slogan, atau bisa menu.
2.Content
Pada bagian content merupakan isi web itu sendiri.
3.Sidebar
Pada sidebar biasanya berupa iklan, link, artikel dll. biasanya sidebar terdapat di pinggir.
4.Footer
Yang terakhir footer, dalam bagian ini biasanya berisi keterangan web itu contohnya seperti :
--------- Copyright @2015 ---------- yang biasanya terdapat dibagian bawah web itu sendiri.
Cara menggunakan div, kurang lebih seperti gambar tersebut, dimana bila kita membuat bagian/div harus di akhiri dengan "</div>" untuk menutupnya.
Nah, itulah dasarnya. Dan jangan lupa CSS sangat penting untuk HTML karena CSS merupakan penghubung antara konten dan design dalam sebuah halaman web. CSS biasanya dipisahkan kedalam dua tipe :
- Internal CSS : CSS yang terdapat pada halaman HTML
- Eksternal CSS : CSS yang ditambahkan / disisipkan pada halaman HTML
Pada umumnya, menggunakan Eksternal CSS lebih di anjurkan karena memberikan konsistensi untuk site-wide dan mengurangi kompleksitas atau pengulangan dari pada menggunakan Internal CSS. Adapun keuntungan apabila kalian menggunakan CSS adalah :
- Menambahkan tampilan baru pada halama HTML sobat.
- Meperbaharui seluruh tampilan website/blog kalian hanya dengan sedikit merubah/menambahkan kode CSS.
- Mebuat setiap halaman web/blog kalian menjadi lebih interaktif dan menarik.
Kalian dapat menambahkan kode CSS ke dalam halaman HTML sobat dengan cara :
- Menggunakan file CSS.
- Menggunakan elemen <style> pada bagian head HTML sobat.
- Menggunakan atribut "style" pada setiap elemen HTML sobat (misalnya, <p style = "...">...</p> )
Sekarang gw bakal ngasih tau soal 2 atribut umum yang terdapat di CSS. Yaitu Class dan ID .
Enakan mana? Class atau ID nih ?Bagi seorang pemula, termasuk gw sendiri (lol) ketika masih belajar HTML & CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?
ID
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut :
1. <div id=‚menu‛>Penggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>.
2. <ul id=‚menu‛>
3. <li>Beranda</li>
4. <li>Tutorial</li>
5. </ul>
6. </div>
Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.
Class
Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut :
1. <ul id=‚menu‛>Pada Kode HTML di atas, saya menggunakan class Merah pada beberapa list item, karena nantinya list item yang memiliki class merah akan diberi warna background merah.
2. <li class=‚merah‛>Beranda</li>
3. <li>Tutorial</li>
4. <li class=‚merah‛>Berita</li>
5. <li>Video</li>
6. </ul>
Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.
Kira - kira kali ini gw bakal ngasih tau dasarnya dulu ya? Sisanya mah dilanjutin nanti hohohoho.
Oke, selamat pagi dan selamat beraktifitas ^^!