Sebelumnya sudah dibahas mengenai HTML di halaman ini. Sekarang kita akan membahas tentang apa itu CSS ? Mengapa penting padahal sudah ada HTML untuk membuat website ?. Simpelnya, CSS itu untuk mempercantik tampilan website karena HTML saja hanya untuk membuat struktur websitenya saja. Maka dari itu, kita akan membahas tentang CSS berikut ini.
Pengertian CSS
CSS (Cascading Style Sheet) merupakan bahasa yang digunakan untuk menentukan tampilan dan format halaman website. CSS digunakan bersamaan dengan HTML karena HTML adalah struktur dan fondasi dari website dan CSS mempercantik dan memperbaiki style dari struktur yang sudah dibuat oleh HTML. CSS sering dianggap sebagai bahasa pemrograman. Padahal, CSS lebih tepat disebut sebagai bahasa style sheet yang umumnya digunakan bersamaan dengan JavaScript.
Kelebihan CSS
1. Mempercepat loading pada web
Anda bisa menulis satu rangkaian script kode yang dapat diterapkan pada banyak halaman website sekaligus dan jumlah kodingan dapat dikurangi. Dengan begitu, beban pada saat proses loading website menjadi lebih cepat.
2. Memudahkan pengelolaan kode
Anda tidak perlu lagi untuk mengubah script kode satu satu untuk mengganti tampilan website. Misalnya untuk mengubah ukuran font, cukup edit pada css nya saja, maka perubahannya akan langsung diterapkan pada seluruh halaman web.
3. Lebih banyak varian tampilan
HTML sendiri sudah menawarkan berbagai pengaturan tampilan pada website, namun CSS menawarkan lebih banyak varian tampilan. Sehingga anda bisa bebas untuk membuat dan mengatur antar muka website.
4. Membuat halaman website menjadi responsif pada semua ukuran layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website menjadi responsif di berbagai ukuran layar, baik itu di komputer maupun di smartphone. Mengapa demikian?. CSS memiliki berbagai properti untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan properti ini dapat mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.
Jenis-Jenis CSS
1. Inline CSS
Inline CSS merupakan penerapan CSS pada baris yang sama dengan elemen dan menggunakan atribut style, misalnya sebagai berikut.
<p style="font-size: 14px;">Ini Contoh Paragraf</p>
Dimana contoh script ini menerapkan style di elemen tag <p> dengan mengubah ukuran font menjadi 14 piksel. Dengan ini, CSS hanya akan mempengaruhi baris itu saja dan tidak akan berpengaruh terhadap seluruh halaman website.
2. Internal CSS
Internal CSS merupakan penerapan CSS yang berada didalam elemen tag <head>, misalnya sebagai berikut.
<head>
<title>Halaman Utama</title>
<style>
p {
font-weight: bold;
}
</style>
</head>
Dimana style ditempatkan pada elemen head, dalam contoh diatas, tag yang diubah adalah p dengan mengganti ketebalannya menjadi bold (tebal). Internal CSS digunakan pada satu halaman website.
3. External CSS
External CSS merupakan CSS yang berada dalam file terpisah dengan dokumen HTML. File ini berekstensi .css dan dipanggil menggunakan tag <link> yang ditaruh di dalam elemen tag <head> lalu diikuti dengan path file CSS ini berada. Contoh penerapannya sebagai berikut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Utama</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Ini Contoh Paragraf</p>
</body>
</html>
style.css
body{
background-color: green;
}
p {
font-weight: bold;
font-size: 14px;
}
Dalam hal ini, dokumen HTML dihubungkan dengan CSS melalui dokumen style.css yang berisi script CSS yang akan dipanggil kedalam index.html melalui tag <link>. Dengan ini, maka script CSS akan langsung diterapkan pada satu atau lebih dokumen HTML yang memanggil dokumen CSS yang dimaksud.
Kesimpulan
CSS merupakan bahasa stylesheet yang digunakan bersamaan dengan HTML untuk mengatur dan mempercantik tampilan halaman web. Ada 3 jenis yang digunakan dalam CSS, yakni inline, internal dan eksternal. Penggunaan jenis-jenis CSS ini tergantung dari kebutuhan tampilan website yang akan ditampilkan. CSS dapat memudahkan untuk mengontrol tampilan website baik untuk mengatur penempatan script kode nya maupun menentukan urutan mana tampilan yang akan ditampilkan terlebih dahulu pada sebuah website.
0 Komentar