Cara Menambahkan CSS ke HTML: Pengertian Inline, Internal dan External CSS
Jika Anda membuat website, karena itu Anda akan mulai dengan HTML. Dalam bahasa markup ini, Anda bisa menambahkan judul, paragraf, gambar, tabel, formulir, daftar, dan banyak lagi. Tetapi Anda tidak dapat mengontrol bagaimana komponen ini disajikan atau ditata di halaman.
Di sanalah CSS masuk.
CSS menjelaskan bagaimana tampilan halaman ke browser, yang merendernya sesuai. CSS bisa digunakan untuk berbagai tujuan style, terhitung mengganti text dan warna background pada halaman, menghapus garis bawah dari link, dan menganimasikan gambar, text, dan komponen HTML yang lain.
Jika Anda ingin kontrol yang semakin besar atas tampilan situs Anda, karena itu Anda perlu ketahui langkah menambah CSS ke situs Anda. Mari kita mulai.
Bagaimana Cara Menambahkan CSS Ke HTML?
Ada tiga langkah untuk menambah CSS ke HTML. Anda bisa menambah CSS sebaris dalam atribut style untuk memberikan style pada satu komponen HTML pada halaman. Anda bisa memasangkan lembar style internal dengan menambah CSS ke sisi head dokumen HTML Anda. Atau Anda bisa menautkan ke helai style eksternal yang berisi semua CSS Anda terpisah dari HTML Anda.
Berikut cara lain untuk meringkas tiga cara Anda dapat menambahkan CSS ke HTML:
- Inline CSS: Memerlukan atribut style yang ditempatkan di dalam elemen HTML.
- CSS internal: Membutuhkan elemen <style> yang ditempatkan di dalam bagian head file HTML.
- CSS Eksternal: Membutuhkan elemen <link> yang ditempatkan di dalam bagian head file HTML.
Di bawah ini kami akan menelusuri setiap metode untuk menambahkan CSS ke HTML dan kasus penggunaan yang ideal untuk masing-masing metode. Jika Anda lebih suka melompat ke metode tertentu, klik salah satu tautan lompat di atas.
Cara Menambahkan Inline CSS ke HTML
Inline CSS memungkinkan Anda untuk menempatkan CSS "di" HTML. Untuk menambahkan CSS sebaris, Anda menggunakan atribut style dan menempatkannya di dalam tag pembuka elemen HTML. Berikut sintaksnya:
<element style="CSS property: value">CSS sebaris, atau dikenal sebagai "lembar style tersemat", akan menggantikan CSS yang lain menargetkan komponen yang serupa. Karena terdekat dengan HTML, browser tentukan deklarasi CSS sebaris yang paling berkaitan dengan komponen HTML dan harus diterapkan. Karena argumen ini, CSS sebaris efisien untuk menargetkan satu komponen dengan properti style unik — tapi seharusnya dihindari bila memungkinkannya untuk menggunakan CSS internal atau eksternal.
Contoh CSS sebaris
Katakanlah Anda ingin mengubah warna istilah kunci dalam paragraf jadi oranye jelas dan biarkan text yang lain apa yang ada. Untuk memulai, Anda akan menutup istilah kunci dalam tag span. Selanjutnya, mengatur properti color ke kode warna hex untuk bayangan oranye (#FF7A59), tempatkan dalam atribut model, dan taruh semua dalam tag pembuka. Lihat berikut ini.
Cara Menambahkan CSS Internal ke HTML
CSS internal terlihat berbeda dari CSS sebaris. Properti dan nilai CSS masih ditetapkan, tetapi alih-alih ditempatkan di dalam atribut style, properti dan nilai ditempatkan di dalam tanda kurung dan ditentukan oleh pemilih CSS. Kumpulan aturan ini kemudian ditutup dengan tag <style></style> dan ditemukan di bagian head file HTML.
<!DOCTYPE html>
<html>
<head>
<style>
selector {
CSS property: value;
}
</style>
</head>Menggunakan CSS internal dianggap sebagai praktek yang lebih bagus dibanding menggunakan CSS sebaris.
CSS internal memungkinkan Anda untuk menata grup komponen sekaligus — dibanding harus menambah atribut style yang serupa ke komponen berkali-kali.
Disamping itu, karena memisahkan CSS dan HTML jadi sisi yang lain tapi menyimpan dalam dokumen yang serupa, CSS internal bagus untuk website satu halaman. Bila Anda memiliki situs multi-halaman dan ingin mengubah di website Anda, Anda harus buka tiap file HTML yang mewakili halaman itu dan menambah atau mengganti CSS internal setiap sisi head. (Atau Anda bisa menggunakan CSS eksternal).
Contoh CSS Internal
Katakanlah Anda ingin mengubah warna text dari tiap komponen paragraf di halaman situs jadi warna biru tua. Dalam masalah ini, Anda akan menyetel properti color ke kode warna hex untuk lindungan biru tua (#33475B), meletakkannya dalam ketentuan CSS yang disetel dengan pemilih jenis p, dan tempatkan semua dalam sisi head dari halaman situs.
Ini tampilan file HTML-nya:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #33475B;
}
</style>
</head>
<body>
<h2>Internal CSS Example</h2>
<p>The default text color for the page is black. However I can change the color of every paragraph element on the page using internal CSS.</p>
<p>Using internal CSS, I only need to write one rule set to change the color of every paragraph elemnet.</p>
<p>With inline CSS, I'd have to add a style attribute to every single paragraph in my HTML.</p>
</body>
</html>Inilah hasilnya:
Cara Menambahkan File CSS Eksternal ke HTML
CSS eksternal diformat seperti CSS internal, tetapi tidak terbungkus dalam tag <style> atau ditempatkan di bagian head file HTML Anda. Sebaliknya, itu ditempatkan di file eksternal dengan ekstensi ".css." Di bagian head, Anda hanya perlu menambahkan tautan ke lembar style eksternal ini yang terlihat seperti:
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">Menggunakan CSS eksternal dipandang seperti praktek terbaik karena beberapa alasan.
Karena Anda bisa membuat perubahan di semua situs Anda dengan mengganti CSS di file eksternal ini, ini ialah sistem yang paling hemat waktu. Itu yang paling cepat dan paling SEO-friendly. Simpan CSS di file lain membuat file HTML Anda lebih gampang dibaca oleh mesin pencari. Itu memungkinkannya browser pengunjung untuk menyimpan file CSS untuk memuat website Anda bisa lebih cepat untuk kunjungan mereka selanjutnya.
Contoh CSS Eksternal
Silahkan gunakan CSS eksternal untuk mengatur div dalam HTML. Ini penampilan keseluruhan file HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyle.css">
</head>
<body>
<div>
<h1>External CSS Example</h1>
<p>In the external stylesheet, the div is styled to have a background color, text color, border, and padding.</p>
</div>
</body>
</html>Begini tampilan file mystyle.css:
div {
background-color: #EAF0F6;
color: #33475B;
border: 3px solid #00A4BD;
padding: 5px;
}Begini tampilan div di front-end:
Menambahkan Ketiga Jenis CSS ke HTML
Secara teknis, Anda dapat menggunakan ketiga style CSS di situs web yang sama.
Untuk memahami caranya, Anda perlu tahu bahwa CSS adalah singkatan dari "Cascading Style Sheets". Bit cascading itu penting. Ini berarti bahwa style dapat mewarisi dan menimpa style lain yang telah dideklarasikan sebelumnya.
Jadi style sebaris yang ditambahkan ke elemen selalu menimpa style yang ditentukan di bagian <head> dokumen, yang menimpa style yang ditentukan di lembar style eksternal. Berikut cara mudah untuk mengingatnya: style CSS apa pun yang paling dekat dengan HTML dianggap lebih relevan oleh browser dan karenanya akan diterapkan. Hirarki ini dikenal sebagai kekhususan CSS.
Bayangkan Anda mendesain ulang situs Anda. Anda memutuskan untuk memuat Bootstrap ke situs web Anda sehingga Anda memiliki stylesheet eksternal.
Mungkin bagian lain dari desain ulang Anda adalah mengubah warna font Anda dari hitam menjadi biru tua. Anda dapat membuat perubahan ini di lembar style eksternal atau di bagian head file HTML Anda. Katakanlah Anda melakukan yang terakhir, simpan file, dan lihat situs Anda. Semua font telah berubah kecuali satu paragraf di beranda. Aneh.
Sekarang Anda harus membuka file HTML Anda untuk men-debug kode. Anda mulai menelusuri bagian tubuh dan menemukan atribut style nakal yang mendefinisikan paragraf ini dengan CSS sebaris. Berikut adalah contoh tampilannya:
Dalam kasus hipotetis ini, Anda dapat hapus atribut model dan menuntaskan permasalahannya. Tetapi pikirkan Anda mempunyai atribut style setiap halaman website Anda. Mencari masing-masing untuk pastikan mereka tidak berlawanan dengan CSS di stylesheet eksternal akan memerlukan waktu dan membuat frustrasi.
Untuk menghindar keadaan semacam ini, penting untuk mengingat ketentuan kekhususan saat menambah beragam tipe CSS ke website Anda.
Sesuaikan Situs Anda dengan CSS
Mengganti penampilan situs Anda mudah dilakukan dengan CSS. Dengan menggunakan salah satunya sistem di atas, Anda bisa dengan mudah dan cepat menambah CSS ke website Anda supaya sesuai tampilan dan nuansa unik merek Anda.