Anak Males – Pada tutorial sebelumnya, kita sudah belajar tentang CSS, sekarang, mari kita pelajari cara menulis CSS di dalam HTML. Ada tiga cara untuk melakukannya:
- Internal CSS: Menuliskan CSS di dalam tag <style> di HTML.
- Inline CSS: Menuliskan CSS di atribut elemen HTML.
- External CSS: Menuliskan CSS di file CSS terpisah dari HTML.
Nah, sekarang mari kita pelajari lebih lanjut tentang cara penulisan masing-masing jenis CSS tersebut.
1. Menulis CSS Dalam HTML Pakai Internal CSS
Internal CSS adalah salah satu cara menuliskan CSS di dalam file HTML. CSS yang ditulis dengan cara ini hanya berlaku untuk halaman web yang sedang dibuka, jadi tidak bisa digunakan untuk halaman lain.
Untuk menuliskan internal CSS, kita perlu menambahkan tag <style> di dalam head element HTML. Di dalam tag tersebut, kita bisa menuliskan aturan CSS sesuai dengan kebutuhan kita.
Contoh penggunaan internal CSS:
<head>
<style>
/* Aturan CSS untuk elemen body */
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
/* Aturan CSS untuk elemen h1 */
h1 {
color: white;
text-align: center;
}
</style>
</head>
Di atas adalah contoh penggunaan internal CSS untuk mengubah warna latar belakang halaman web menjadi biru muda dan mengubah font untuk semua elemen di halaman tersebut menjadi Arial.
Selain itu, internal CSS juga digunakan untuk mengubah warna tulisan elemen h1 menjadi putih dan mengatur posisi tulisan di tengah.
Semua aturan CSS yang ditulis di dalam tag <style> akan berlaku untuk halaman web yang sedang dibuka.
Jadi, jika kita ingin mengubah gaya tampilan elemen lain di halaman web tersebut, kita bisa menambahkan aturan CSS di dalam tag <style> tersebut.
CSS yang ditulis di dalam tag <head> akan diproses lebih dahulu dibandingkan CSS yang ditulis di dalam tag <body>. Oleh karena itu, style yang terakhir ditulis akan menjadi yang digunakan.
Misalnya, kita memiliki gaya seperti ini di dalam bagian <head> di dalam kode HTML kita:
p {
color: red
}Kemudian di bagian body dari kode HTML kita, kita buat seperti ini:
p {
color: blue
}Jadi, jika ada gaya yang sama di dua tempat berbeda di dalam kode HTML kita, maka yang akan digunakan adalah yang terakhir yang ditulis, yaitu yang menentukan warna menjadi biru.
Untuk menghindari bentrok atau konflik gaya yang mungkin terjadi, sebaiknya hanya menuliskan semua CSS dalam satu tempat saja, misalnya di bagian <head>.
Dengan demikian, kita bisa menjaga agar gaya yang kita gunakan konsisten di seluruh halaman.
2. Menulis CSS di HTML Pakai Eksternal CSS
Eksternal CSS atau Cascading Style Sheets itu file teks yang menyimpan info tentang gimana elemen HTML atau XHTML harus ditampilin di layar.
File eksternal CSS terpisah dari dokumen HTML atau XHTML dan bisa dipakai untuk ngatur penampilan beberapa halaman web sekaligus.
Cara pakai eksternal CSS itu dengan bikin file CSS terpisah dan ngehubungin ke halaman web pakai tag <link> di head dokumen HTML.
Dengan cara ini, kamu bisa dengan mudah ngatur penampilan seluruh situs web cuma dengan ngedit satu file aja. Sebagai contoh, kamu bisa ngatur warna teks, ukuran font, dll di file CSS eksternal, lalu ngaplikasin ke semua halaman web dengan ngehubungin ke setiap halaman pakai tag <link>.
Contoh umum penggunaannya seperti berikut ini:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Dengan pakai eksternal CSS, kamu bisa dengan mudah ngganti penampilan seluruh situs web cuma dengan ngedit file CSS terpisah, tanpa perlu ngganti setiap halaman web secara individual.
Ini sangat berguna kalau kamu mau ngganti tampilan situs web kamu secara keseluruhan, kayak ganti warna latar belakang atau font yang dipakai.
Didalam file css diatas kita bisa menambahakan program program css, yang nantinya akan dikirim ke dalam html.
Contohnya :
p {
font-family: serif;
line-height: 1.75em;
}
i {
font-family: sans;
color: orange;
}
h2 {
font-family: sans;
color: #333;
}Biasanya, CSS eksternal dipakai kalau kita mau pake kembali style yang udah dibuat. Misalnya ada lima halaman HTML, dan semua halaman ini butuh CSS yang sama.
Jadi lebih baik pakai CSS eksternal supaya gak perlu nulis ulang kode CSS di setiap file HTML.
Eksternal CSS didalam Folder
Jika file CSS yang kita gunakan berada di dalam folder yang berbeda dengan halaman web yang menggunakannya, maka kita perlu memberikan alamat file CSS tersebut dengan benar di dalam tag <link>.
Contoh penggunaan tag <link> untuk menghubungkan file CSS yang berada di dalam folder yang berbeda:
<!-- file CSS berada di dalam folder 'css' -->
<link rel="stylesheet" href="/css/style.css">
<!-- file CSS berada di dalam folder 'css' yang berada di dalam folder 'assets' -->
<link rel="stylesheet" href="/assets/css/style.css">
Jika file CSS berada di dalam folder yang sama dengan halaman web yang menggunakannya, maka kita hanya perlu menuliskan nama file CSS tersebut di dalam tag <link>, tanpa perlu menuliskan alamat folder yang menyimpan file tersebut.
Contoh penggunaan tag <link> untuk menghubungkan file CSS yang berada di dalam folder yang sama:
<link rel="stylesheet" href="style.css">
CSS Eksternal Dari Internet
Kita bisa menggunakan cdn. kita juga bisa menggunakan file CSS yang sudah ada di internet atau domain lain dalam proyek kita dengan menghubungkannya melalui tag <link>.
CDN (Content Delivery Network) atau Jaringan Penyampaian Konten adalah sekumpulan server yang tersebar di berbagai lokasi di seluruh dunia yang bertugas menyimpan salinan dari konten seperti gambar, video, dan file CSS dan JavaScript.
Tujuan utama CDN adalah untuk mempercepat waktu loading halaman web dengan menyediakan konten kepada pengunjung dari server yang terdekat dengan lokasi mereka, sehingga mengurangi waktu yang diperlukan untuk mengunduh konten tersebut.
Contohnya, jika kita menggunakan CDN untuk menyimpan file CSS yang digunakan oleh website kita, maka pengunjung website tersebut akan mengunduh file tersebut dari server CDN yang terdekat dengan lokasi mereka, bukan dari server website kita yang mungkin berada jauh dari lokasi pengunjung. Ini bisa mempercepat waktu loading halaman website kita.
Penggunaan CDN juga bisa mengurangi beban server website kita karena tidak semua pengunjung akan mengunduh konten dari server kita, tapi dari server CDN yang terdekat dengan lokasi mereka.
Contoh penggunaan tag <link> untuk menghubungkan file CSS yang berada di domain lain:
<!-- file CSS berada di domain lain -->
<link rel="stylesheet" href="https://example.com/css/style.css">
<!-- file CSS berada di CDN (Content Delivery Network) -->
<link rel="stylesheet" href="https://cdn.example.com/css/style.css">
Penggunaan file CSS yang ada di domain lain atau CDN (Content Delivery Network) bisa menjadi pilihan yang menguntungkan karena file tersebut mungkin sudah pernah di-cache oleh browser pengunjung sebelumnya, sehingga tidak perlu mengunduh file tersebut lagi ketika mengunjungi halaman web yang menggunakannya.
Ini bisa mempercepat waktu loading halaman web. Namun, harus diingat bahwa penggunaan file CSS dari domain lain tidak selalu aman dan bisa menyebabkan masalah keamanan jika domain tersebut tidak dapat dipercaya.
3. Menulis CSS di HTML Pakai Inline CSS
Inline CSS adalah sebuah cara untuk menambahkan gaya atau style ke sebuah elemen HTML dengan menggunakan atribut “style” pada elemen tersebut. Dengan menggunakan inline CSS, kita dapat menentukan gaya elemen secara spesifik tanpa perlu membuat file CSS terpisah.
Berikut ini adalah contoh penggunaan inline CSS:
<p style="color: red; font-size: 20px;">Ini adalah paragraf dengan inline CSS</p>
Di dalam atribut “style”, kita dapat menuliskan properti CSS yang ingin kita gunakan, diikuti dengan nilai yang sesuai. Dalam contoh di atas, kita memberikan warna merah dan ukuran font 20px pada paragraf tersebut.
Penggunaan inline CSS biasanya tidak disarankan dalam pengembangan web yang professional, karena lebih baik jika gaya dituliskan dalam file CSS terpisah yang dapat digunakan oleh banyak halaman web.
Namun, dalam beberapa kasus tertentu, penggunaan inline CSS dapat berguna, misalnya untuk mengubah gaya elemen secara dinamis melalui JavaScript atau untuk memberikan gaya ke elemen HTML secara sementara.
Penutup
Baiklah mungkin kita cukupkan untuk tutorial css kali ini, sampai jumpa di tutorial selanjutnya.