Sebelumnya pasti anda sudah mengetahui fungsi dan kegunaan dari css yang sudah dibahas dalam artikel sebelumnya yaitu “Pengertian CSS [Cascading Style Sheet]“.
Ada 3 cara memasang kode CSS ke dalam HTML yaitu :
- Inline CSS
- Embed / memasang kode CSS ke dalam bagian
- Link ke external CSS
INLINE CSS
Kode CSS di tulis langsung ke dalam tag HTMLyang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaknya hanya di gunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
H1 dengan CSS
Pada contoh si atas, elemen
di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;”
EMBEDDED CSS
Kita bisa menempelkan kode CSS di antara tag & . penulisan CSS dengan cara ini awalnya diawali dengan tag —-.
Contoh :
h1 {color : red;}
EXTERNAL CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran “.css” atau ekstensi “.css”. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
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:
- Internal style sheet
- External style sheet
- Inline style
Lalu apa perbedaan antara ketiga style ini? Berikut penjelasan secara lengkapnya.
DAFTAR ISI
1. Internal Style Sheet
Internal Style Sheet atau biasa dikenal sebagai Embeded CSS merupakan kode CSS yang biasa digunakan di dalam tag pada file HTML. Kode CSS Internal style ini ditulis dengan tag . 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:
Internal Style Sheet
body{background-color: red;} h1{color: white;}
Contoh Style Sheet
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 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:
External Style Sheet
Contoh Style Sheet
body{background-color: red;} h1{color: white;}3. Inline Style Sheet
Inline Style Sheet merupakan kode CSS yang dituliskan secara langsung pada sebuah attribut 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:
Inline Style Sheet
Contoh Style Sheet
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…