CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website.
Apa Fungsi CSS?
1. Mempercepat Loading Halaman Web
Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website lebih kecil.
2. Memudahkan Pengelolaan Kode
Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.
3. Menawarkan Lebih Banyak Variasi Tampilan
HTML bisa untuk mengatur tampilan halaman website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan.
4. Membuat Website Tampil Rapi di Semua Ukuran Layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone. Mengapa demikian?
CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.
JENIS-JENIS CSS
1. Inline CSS
Perhatikan baris kode di bawah ini sebagai contohnya:
<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>Dengan kode tersebut, Anda akan mendapatkan hasil ini:
Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.
2. Internal CSS
Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman.
Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih, kodenya seperti di bawah ini:
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>
<p>Ini adalah contoh kalimat.</p>
Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.
3. External CSS
Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.
Agar halaman website bisa menggunakan external CSS, Anda perlu menambahkan kode di bagian header kode HTML-nya. Contohnya seperti berikut ini:
<head>
<link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>
Dengan kode tersebut, halaman website Anda akan menggunakan fileCSSAnda.css untuk mengatur tampilannya.
0 komentar:
Posting Komentar