CARA MENAMBAHKAN DATA CSS
CSS merupakan singkatan dari Cascading Style Sheet yang fungsi utamanya yaitu mengatur tampilan dari elemen yang di tulis pada dokumen HTML. Bahasa inilah yang memiliki peran penting untuk mempercantik tampilan antarmuka (interface) website. CSS adalah salah satu bahasa yang wajib di ketahui saat belajar membuat website. Tanpanya, tampilan website akan kurang menarik, dan perlu upaya lebih untuk melakukan perubahan pada elemen tampilan. CSS berguna untuk mengatur jenis font, warna tulisan, dan latar belakang halaman. Dan juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format hala man website. CSS sering di anggap sebagai sebuah bahasa pemrograman. Padalah, CSS lebih tepat di sebut sebagai bahasa style sheet yang umunya di gunakan bersamaan dengan JavaScript. Terdapat tiga cara menambahkan data CSS ke dalam dokumen HTML yaitu sebagai berikut :
- Inline CSS adalah cara menambahkan CSS dengan menggunakan atribut style pada tag pembuka elemen HTML. Cara ini biasanya di gunakan untuk memberi gaya atau style unik pada suatu elemen. Inline CSS di gunakan untuk tag HTML tertentu. Atribut <style> digunakan untuk memebrikan style ke tag HTML tertentu. Cara ini kurang di rekomendasikan, karena setiap tag HTML harus di berikan style masing-masing. Akan lebih sulit jika dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inlien CSS menjadi berguna. Contohnya, pada saat tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja. Manfaat pada inline CSS adalah berguna untuk perbaikan cepat dan permintaan HTTP yang lebih kecil. Namun sayangnya inline CSS harus di terapkan pada setiap emelen. Contoh halaman HTML dengan inline CSS sebagai berikut :
<!DOCTYPE html>
<html>
<body style=”background-color:black;”>
<h1 style=”color:white;padding:30px;”>Hostinger Tutorials</h1>
<p style=”color:white;”>Something usefull here.</p>
</body>
</html>
- Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag <style> di dalam tag <head>. Cara ini di peruntukkan untuk mengatur style untuk satu halaman website. CSS internal diletakkan di dalam bagian <head> pada halaman. Class dan ID bisa di gunakan untuk merujuk pada kode CSS, namun hanya akan aktif pada halaman tersebut. Style CSS yang di pasang dengan metode ini akan di download setiap kali halaman di panggil, jadi ini akan meningkatkan kecepatan akses. Manfaat internal CSS adalah perubahannya hanya terjadi pada 1 halaman, Class dan ID bisa di gunakan oleh internal stylesheet, dan tidak perlu meng-upload beberapa file karena HTML dan CSS bisa di gunakan di file yang sama. CSS internal diletakkan di dalam tag <style><style>, contohnya :
<head>
<style type=”text/css”>
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
- Eksternal CSS adalah cara menambahkan CSS dengan menggunakan tag <link> yang di definisikan pada setiap dokumen HTML. Cara ini merupakan cara yang paling umum di gunakan oleh para pengembang, karena dengan cara ini memungkinkan kita untuk membuat hanya satu style CSS yang kemudian dapat di terapkan ke semua halaman website. Untuk menerapkan cara ini, perlu menulis kode CSS secara terpisah dari dokumen HTML. Kemudian dokumen HTML dan file dari kode CSS tadi selanjutnya di hubungkan dengan menggunakan tag <link> yang didefinisikan paad bagian <head> dalam dokumen HTML. Manfaat CSS eksternal yaitu ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi, kecepatan loading menjadi lebih cepat, dan file CSS yang sama bisa di gunakan di banyak halaman. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman :
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
Dalam contoh diatas file style.css berisikan semua rule. Contohnya :
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
Itulah tiga cara menambahkan data CSS ke dalam dokumen HTML.
Editor : Erna Febriani
Tanya & Beli Program?