CSS Dasar Part 1 - Beauty Of CSS
CSS Dasar Part 1 - Beauty Of CSS- Amazing CSS, banyak kata yang bisa menggambarkan makna dari bahasa CSS untuk dunia web design. Di artikel saya mengenai About HTML , saya pernah menjelaskan bahwa HTML adalah pembentuk struktur utama sebuah halaman website, sedangkan CSS mempunyai fungsi Dekorasi pada sebuah halaman website. Ibaratnya, CSS adalah seorang MakeUp Artist, yang bisa membuat penampilan seseorang menjadi terlihat sangat menarik dan berbeda.
 |
| Beauty Of CSS |
CSS secara ilmiah adalah terminologi dari singkatan Cascading Style Sheet. Berdasarkan link http://www.w3.org/style/CSS , CSS diterjemahkan sebagai sebuah mekanisme sederhana yang mengatur gaya/style pada halaman website. Gaya/style ini bisa berupa ukuran, warna, posisi, bentuk, dll.
Semua website tanpa ada dekorasi menurut CSS, tampilannya akan terlihat sama, hanya terdapat text, gambar, & link saja. CSS yg sanggup menciptakan sebuah halaman website, meskipun struktur laman website yang dibentuk oleh HTML sangat sederhana, tapi dengan CSS laman tersebut bisa sangat anggun, menarik, tidak sinkron, interaktif, & yg niscaya menaruh nilai buat sebuah halaman website bagi user yg mengunjungi website tadi. Jadi usahakan kita pula wajib paham mengenai apa itu CSS & manfaatnya selain kita tahu HTML, even hanya sedikit saja.
HTML sendiri sebenarnya sanggup mempercantik dan mendekorasi page website dengan segala keterbatasannya . Tetapi sangat disarankan, buat mendekorasi website kita memakai CSS nir menggunakan HTML. CSS sanggup memisahkan antara konten dan style dari konten page website tadi. Kalau kita menggunakan HTML, style & konten akan dijadikan satu, sebagai akibatnya sangat tidak praktis. Untuk model langsungnya, kita bisa lihat contoh HTML dibawah ini, bagaimana bila kita memakai HTML buat menghias/mendekorasi element berdasarkan laman sebuah website:
<!DOCTYPE html>
<html> <head> <title>CSS</title> </head> <body> <font size="10px" color="orange" face="arial"> <center><h1>Hello World</h1></center> </font> <font size="5px" color="yellow" face="verdana"> <center><p>Kita belajar apa itu CSS dan bagaimana cara menggunakannya</p></center> </font> </html>
 |
| CSS ( Cascading Style Sheet ) |
Dari contoh diatas kita mampu lihat bagaimana menghias satu element dalam HTML. Kalau kita menggunakan HTML buat mendekorasi, artinya setiap baris element, wajib diberikan style masing-masing. Kalau dalam satu page kita memiliki 10 h1 dan 10 p, maka kita harus mendekorasi 10 h1 & 10 p, belum lagi elemen atau tag HTML lainnya. Hal ini sangat membuat repot dan tidak praktis, lantaran membuat halaman HTML kita jadi nir rapi & sangat poly kode HTML, mampu dibayangkan hal ini mungkin akan menciptakan kepusingan dalam saat kita membuat website.
Dengan CSS kita bisa memisahkan antara konten dan style menggunakan begitu mudah. Satu element yang kita beri style, maka style ini akan berlaku jua buat style lain dengan syarat masih pada element atau tag HTML yg sama. Untuk contohnya kita bisa lihat model berikut, hasilnya akan sama dengan model diatas :
HTML
<h1>Hello World</h1> <p>Kita belajar apa itu CSS dan bagaimana cara menggunakannya</p>
CSS
h1 font-family: arial font-size: 10px; color: orange; text-align: center; p font-family: verdana; font-size: 5px; color: yellow; text-align: center;
 |
| CSS ( Cascading Style Sheet ) |
Dari contoh di atas, kita mampu menyimpulkan mengenai CSS ( Cascading Style Sheet ) sebagai berikut :
- CSS merupakan aturan untuk menampilkan sebuah element / tag HTML.Kalau HTML fungsinya untuk membuat struktur utama halaman website dan menyajikan konten, sedangkan peranan CSS adalah bagaimana sebuah konten dapat ditampilkan pada halaman website secara menarik, berbeda, dan interaktif dengan style atau gayanya, baik itu berupa warna, ukuran, dan posisi sebuah konten.
- CSS dibuat terpisah dengan HTML. CSS bisa dibuat terpisah dengan elemen HTML ataupun dijadikan satu, tapi tetap dalam bagian yang berbeda, sehingga tidak mengotori halaman HTMLnya.
- CSS bertujuan untuk memisahkan konten dan style. Apabila konten dan style dipisahkan, akan mudah bagi kita memodifikasi konten dan style masing-masing, tanpa harus mengotori halaman CSS atau HTMLnya.
- Satu CSS dapat digunakan pada banyak halaman HTML. Karena konten dan style terpisah, maka 1 CSS bisa digunakan pada struktur halaman HTML yang berbeda.Sebagai contoh apabila kita memiliki struktur HTML yang berbeda ada 100, maka 1 CSS ini bisa memberikan style pada 100 struktur halaman HTML tersebut. Contohnya bisa dilihat digambar dibawah ini :
 |
| Cascading Style Sheet |
- Satu laman HTML bisa tidak selaras, jika memakai CSS yang berbeda juga. Ketika kita memilki satu halaman website, kemudian dalam periode waktu tertentu kita jadwalkan buat melakukan perubahan tampilan agar tidak terlihat membosankan & selalu menyajikan tampilan baru dan menarik sesuai menggunakan musim, waktu inilah kita memakai CSS yang tidak sama setiap saat.
Apabila kita sanggup tahu HTML dan CSS, akan sangat membantu kita dalam mengontrol konten dan style website kita setiap saat. Kita mampu mengubahnya kapan saja kita mau, baik itu sesuai dengan kesukaan kita atau selera demam isu pasar.
Sekian pembahasan tentang apa itu CSS dan manfaatnya, semoga penjelasan ini sanggup bermanfaat buat sahabat-sahabat yang baru belajar CSS, kalo ada pertanyaan, kritik dan saran, silakan tulis dikolom komentar. See you on my next articles.
Referensi :
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Belum ada Komentar untuk "CSS Dasar Part 1 - Beauty Of CSS"
Posting Komentar