Halo Sob! setelah kalian mempelajari Apa Itu CSS .dalam postingan sebelumnya. Artikel yang admin buat kali ini akan menjelaskan Perbedaan Antara Inline, External, dan Internal di CSS. Oke langsung saja kita ke pembahasannya Cekidot!
Cascading Style Sheets (CSS) adalah file dengan aturan gaya yang mengatur bagaimana situs web kalian disajikan di sebuah halaman website. CSS juga memperkenalkan template berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari halaman-halaman web yang sudah dibuat. Untuk saat ini CSS sangat banyak digunakan karena berbagai kemudahan dan lengkapnya atribut-atribut yang dimilikinya. Aturan CSS dapat diterapkan ke file HTML situs web kalian dengan berbagai cara. Ada 3 cara untuk memasukan kode style CSS ke website kalian yaitu:
Lalu apa perbedaan antara ketiga style ini? Berikut penjelasan secara lengkapnya.
1. Internal Style Sheet
Internal Style Sheet atau biasa dikenal sebagai Embeded CSS merupakan kode CSS yang biasa digunakan di dalam tag <head> pada file HTML. Kode CSS Internal style ini ditulis dengan tag <style>. Kode ini dikhususkan untuk kalian yang ingin mendesain hanya satu halaman website atau file html.
Jadi kalian tidak perlu mengunggah banyak file karena perubahannya hanya terjadi pada satu halaman atau file. dan kode ini sangat mudah untuk menerapkan gaya seperti class atau id untuk menggunakan kembali kodenya. Tetapi perubahan pada stylesheet internal hanya mempengaruhi halaman kode yang dimasukan saja.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheet</title>
<style type="text/css"> body{background-color: red;} h1{color: white;} </style>
</head>
<body>
<h1>Contoh Style Sheet</h1>
</body>
</html>
2. External Style Sheet
Eksternal Style Sheet merupakan kode CSS yang digunakan secara terpisah dengan file HTML. Untuk membuat kode CSS External ini kalian diharuskan membuat sebuah file yang berextensikan .css dan untuk menghubungkannya kalian harus menggunakan tag <link rel=”stylesheet” type=”text/css” href=””> kemudian di bagian method href kalian isi link url dimana kalian menyimpan file .css tersebut.
Kode CSS External ini dikhususkan untuk kalian yang ingin mendesain beberapa halaman website atau file html secara bersamaan. Jadi untuk itu kalian harus memisahkan kode CSS dengan kode HTML.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="External.css">
</head>
<body>
<h1>Contoh Style Sheet</h1>
</body>
</html>
body{background-color: red;} h1{color: white;}
3. Inline Style Sheet
Inline Style Sheet merupakan kode CSS yang dituliskan secara langsung pada sebuah attribut <style> yang kemudian attribut tersebut disimpan didalam sebuah tag yang ingin kalian desain. Kode CSS Inline ini dikhususkan untuk kalian yang ingin mendesain satu buah tag secara langsung. Jadi satu buah kode Inline yang dimasukan hanya akan berpengaruh ke satu buah tag saja, dan jika kalian menggunakan stylesheet Inline ini kalian tidak bisa menerapkan id ataupun class.
Tetapi penggunaan Inline ini tidak disarankan untuk mendesain halaman website secara menyeluruh. Karena setiap perubahan CSS harus dibuat di setiap tag yang memiliki gaya inline yang diterapkan padanya, menyebabkan pemborosan kode dan akan memperlambat loading suatu halaman website
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body style="background-color: red;">
<h1 style="color: white;">Contoh Style Sheet</h1>
</body>
</html>
Hasilnya:
Kesimpulan
Jadi untuk menambahkan style sheet CSS ke sebuah website, memiliki 3 cara yaitu: menggunkan Internal Style Sheet yang dikhususkan untuk mendesain satu halaman saja, atau menggunakan External Style Sheet yang dikhuskan untuk mendesain beberapa halaman secara bersamaan, dan yang terakhir Inline Style Sheet yang dikhususkan mendesain satu buah tag.
Sekian artikel Perbedaan Antara Inline, External, Dan Internal Di CSS. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…