Apa Perbedaan Internal, External dan Inline CSS? – Panduan Blog Online

Apa Perbedaan Internal, External dan Inline CSS?

Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!

Cascading Style Sheets (CSS) adalah bahasa pemrograman yang dipakai untuk mendesain halaman depan atau tampilan website (front end). Dengan CSS, Anda dapat mengatur dan menentukan margin, mengubah jenis font, ukuran font, warna dan lain sebagainya.

Pada CSS ada tiga metode penulisan kode yaitu:

Internal CSS
External CSS
Inline CSS

Setiap metode penulisan kode CSS memiliki kelebihan, kekurangan, serta manfaatnya yang berbeda-beda.

Nah! Pada artikel kali ini, kami akan membahas perbedaan dari tiga metode penulisan kode CSS. Termasuk kelebihan, kekurangan, manfaat, dan contoh dari penempatan kode CSS. Simak perbedaanya berikut ini.

Daftar isi
tutup

1
Internal CSS

1.1
Manfaat Internal CSS

1.2
Kekurangan Internal CSS

1.3
Contoh Internal CSS

2
External CSS

2.1
Manfaat External CSS

2.2
Kekurangan External CSS

2.3
Contoh External CSS

3
Inline CSS

3.1
Manfaat Inline CSS

3.2
Kekurangan Inline CSS

3.3
Contoh Inline CSS

4
Kesimpulan

Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain.

Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, Internal CSS ini bisa dipakai untuk menciptakan tampilan yang unik, pada setiap halaman website.

Manfaat Internal CSS

Perubahan pada Internal CSS hanya berlaku pada satu halaman saja.
Anda tidak perlu melakukan upload beberapa file karena HTML dan CSS berada dalam satu file.
Class dan ID bisa digunakan oleh internal stylesheet.

Kekurangan Internal CSS

Tidak efisien apabila Anda ingin menggunakan CSS yang sama dalam beberapa file.
Membuat performa website lebih lemot. Sebab, CSS yang berbeda-beda akan mengakibatkan loading ulang setiap kali Anda ganti halaman website.

Contoh Internal CSS

Berikut ini adalah contoh penempatan Internal CSS pada file HTML.

<!DOCTYPE html><html><head>  <title>Contoh Internal CSS</title>  <!-- contoh internal css dalam tag head -->  <style type="text/css">    p{      font-family: arial;      line-height: 2.75em;      font-size: 16px;    }    i {       font-family: arial;      color: blue;    }  </style></head><body>  <!-- contoh internal css dalam tag body -->  <style type="text/css">    h2 {       font-family: arial;      color: #1B9CFC;    }  </style>  <h2>Niagahoster</h2></body></html>

External CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.

Cara ini lebih sederhana dan simpel daripada menambahkan kode CSS di setiap elemen HTML yang ingin Anda atur tampilannya.

Manfaat External CSS

Ukuran file HTML akan menjadi lebih kecil dan struktur dari kode HTML jadi lebih rapi.
Loading website menjadi lebih cepat.
File CSS dapat digunakan di beberapa halaman website sekaligus.

Kekurangan External CSS

Halaman akan menjadi berantakan, ketika file CSS gagal dipanggil oleh file HTML. Hal ini terjadi disebabkan karena koneksi internet yang lambat.

Contoh External CSS

Berikut ini adalah contoh penempatan External CSS pada file HTML. Sebagai contoh saya membuat file CSS dengan nama style.css berikut isi kode style.css.

p {    font-family: arial;    line-height: 2.75em;}i {    font-family: arial;    color: orange;}h2 {    font-family: arial;    color: #1B9CFC;}

Untuk menggunakan file style.css dalam HTML, Anda perlu menambahkannya ke dalam file HTML. Dengan menggunakan tag <link> berikut contohnya.

<link rel="stylesheet" type="text/css" href="style.css">

Berikut ini penempatan kode dalam satu file HTML.

<!DOCTYPE html><html><head>    <title>Contoh Eksternal CSS</title>    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <h2>Niagahoster</h2></body></html>

Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis.

Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Sebab, Inline CSS digunakan hanya untuk mengubah satu elemen saja.

Manfaat Inline CSS

Sangat membantu ketika Anda hanya ingin menguji dan melihat perubahan pada satu elemen.
Berguna untuk memperbaiki kode dengan cepat.
Proses permintaan HTTP yang lebih kecil dan proses load website akan lebih cepat.

Kekurangan Inline CSS

Tidak efisien karena Inline CSS hanya bisa diterapkan pada satu elemen HTML.

Contoh Inline CSS

Berikut ini adalah contoh penempatan kode dari Inline CSS:

<h2 style="color:blue; font-family: arial;">Niagahoster</h2>

Kesimpulan

Sampai di sini, semoga Anda paham mengenai pengertian perbedaan Internal, External dan Inline CSS. Jika ada pertanyaan atau tambahan lain silakan tinggalkan komentar melalui kolom di bawah ini. Jangan lupa subscribe dan follow sosial media kami untuk mendapatkan informasi seputar VPS, hosting, Internet marketing, dan teknologi.

Clean All

Popular Posts

Tuesday, May 23, 2017

Perbedaan Internal External Dan Inline Css