Belajar Perbedaan CSS Inline, CSS External dan CSS Internal
BelajarPerbedaan CSS Inline, CSS External dan CSS Internal - Macam-macam CSS atau Cascading Style Sheet jika dilihat dari penggunaannya dibagi menjadi 3 yaitu CSS Inline, CSS External dan CSS Internal
Baca Juga
Belajar Perbedaan CSS Inline, CSS External dan CSS Internal - Macam-macam CSS atau Cascading Style Sheet jika dilihat dari penggunaannya dibagi menjadi 3 yaitu CSS Inline, CSS External dan CSS Internal. Meskipun terbagi dalam 3 macam, namun untuk pengkodeannya tetap memiliki struktur dengan syntax yang sama, hanya penempatannya yang berbeda dan tergantung dari penggunaannya juga, bahkan ketiga CSS ini bisa digunakan dalam satu halaman HTML blog. Dan masing-masing CSS tersebut memiliki kelebihan dan kekurangan.
Seperti yang telah kami bahas sebelumnya tentang Apa Itu CSS? Penggunaan kode CSS dalam satu halaman blog atau website selalu diikuti dengan penggunaan kode HTML. Sedangkan untuk jenis CSS yang digunakan tergantung dari kebutuhan blog atau website tersebut atau dari optimasi yang dilakukan pada blog, misalkan optimasi untuk loading blog.
Untuk itulah masing-masing CSS yaitu CSS Inline, CSS External dan CSS Internal memiliki perbedaan, kelebihan dan kekurang, meskipun struktur kode yang digunakan adalah sama.
CSS Internal
Kode CSS Internal adalah kode CSS yang biasanya umum digunakan, bahkan pada blog dengan platform Wordpress banyak yang menggunakan kode CSS dengan jenis ini. Kode CSS Internal sama dengan kode CSS terbuka yang berada didalam kode
Contoh kode CSS Internal:
Dalam penggunaannya, CSS Internal selalu di load setiap kali sebuah halaman blog atau website di akses dengan penggunaan CSS pada halaman tersebut. Maksudnya, hanya aktif pada halaman blog yang menggunakan CSS tersebut. Sehingga dari masing-masing halaman blog seperti halaman depan (Homepage), halaman artikel (posting atau Single post), halaman statis, halaman archive, dan sebagainya memiliki waktu loading yang berbeda karena masing-masing halaman tersebut memiliki kode CSS yang berbeda.
Meskipun menggunakan waktu loading yang berbeda pada setiap halaman blog dengan kode CSS yang berbeda namun penggunaan CSS Internal lebih direkomendasikan karena lebih mudah dioptimasi untuk mempercepat waktu loading blog atau untuk keperluan editing lainnya yang bisa dilakukan secara langsung.
CSS External
CSS External dalam penerapannya, kode CSS tidak berada dalam kode template blog tersebut dan tidak tampil secara terbuka namun berada dalam sebuah file dengan ekstensi .css dan semua kode CSS yang digunakan pada halaman blog, semuanya berada dalam satu file css. Dengan penggunaan file ekstensi .css ini maka blog atau website membutuhkan sebuah hosting yang digunakan untuk menyimpan file tersebut.
Hosting yang digunakan bisa menggunakan hosting sendiri (Self Hosting) atau menggunakan hosting luar. Dampaknya, jika menggunakan hosting sendiri, file css mungkin membutuhkan waktu loading yang lebih cepat. Namun jika menggunakan hosting dari luar, maka besar kemungkinan membutuhkan waktu loading yang lebih lama.
Adanya waktu loading yang berbeda dalam penggunaan hsoting untuk mengakses file css ini, bisa berdampak buruk bagi blog atau website. Apalagi algoritma google saat ini lebih mengutamakan loading blog yang sangat cepat. Untuk itu pertimbangkan kembali penggunaan file css, jika menggunakan file css ini lebih baik gunakan dari hosting sendiri saja dan tentunya dari layanan yang baik juga. Dan jangan menggunakan layanan gratisan.
Sedangkan untuk penggunaan CSS External hampir sama dengan CSS Internal yaitu berada dalam didalam kode
Contoh Kode CSS External:
CSS Inline
CSS Inline digunakan secara langsung dalam tag HTML dengan menggunakan atribut <style> didalamnya. Penggunakan CSS Inline hanya sebatas pada kode markup HTML saja yang ingin dilakukan perubahan pada bagian tersebut secara langsung. Jadi tidak dibutuhkan kode CSS dengan struktur yang baku. Dan penggunaan CSS Inline ini sangat tidak direkomendasikan karena harus memberikan atau menerapkan kode css secara langsung pada setiap markup HTML dan terkadang pemasangan kode CSS seperti ini akan membuat struktur kode blog menjadi error atau tidak valid.
Contoh Kode CSS Inline:
Persamaan CSS Inline, CSS External dan CSS Internal
Dari ketiga CSS diatas, yang memiliki persamaan dalam penulisan kodenya adalah CSS Internal dan External yaitu sama-sama memiliki komponen yang sama dalam membagi syntax setiap elemen yaitu adanya komponen penyeleksi (selector) yang terbagi dalam ID dan Class. Apa ini? Silahkan baca di Belajar Cara Menggunakan Tag, ID dan Class Pada CSS & Perbedaan Ketiganya
Itulah beberapa perbedaan macam-macam CSS yang terdiri dari CSS Inline, CSS External dan CSS Internal yang ketiganya bisa digunakan sesuai kebutuhan dan atau sesuai optimasi yang dilakukan pada pengkodean tampilan blog. Mana yang lebih baik dari ketiga CSS tersebut? Menurut kami, CSS Internal dan External lebih baik daripada CSS Inline. Semoga bermanfaat.
Untuk itulah masing-masing CSS yaitu CSS Inline, CSS External dan CSS Internal memiliki perbedaan, kelebihan dan kekurang, meskipun struktur kode yang digunakan adalah sama.
Perbedaan CSS Inline, CSS External dan CSS Internal
Penggunaan ketiga CSS ini biasanya digunakan secara bersamaan pada blog-blog berplatform Wordepress. Sedangkan untuk blog yang menggunakan Blogspot, hanya menggunakan satu jenis CSS yaitu CSS Internal dan semua kode dari jenis CSS tersebut berada dalam kode HTML secara utuh yang disebut sebagai kode tema atau template blog.CSS Internal
Kode CSS Internal adalah kode CSS yang biasanya umum digunakan, bahkan pada blog dengan platform Wordpress banyak yang menggunakan kode CSS dengan jenis ini. Kode CSS Internal sama dengan kode CSS terbuka yang berada didalam kode
<head> </head> dan diletakkan diantara tag <style> </style>Contoh kode CSS Internal:
<head>
<style type="text/css">
p {
color: blue;
text-weight: bold;
text-align: center;
font-size: 16px;
}
</style>
</head>Dalam penggunaannya, CSS Internal selalu di load setiap kali sebuah halaman blog atau website di akses dengan penggunaan CSS pada halaman tersebut. Maksudnya, hanya aktif pada halaman blog yang menggunakan CSS tersebut. Sehingga dari masing-masing halaman blog seperti halaman depan (Homepage), halaman artikel (posting atau Single post), halaman statis, halaman archive, dan sebagainya memiliki waktu loading yang berbeda karena masing-masing halaman tersebut memiliki kode CSS yang berbeda.
Meskipun menggunakan waktu loading yang berbeda pada setiap halaman blog dengan kode CSS yang berbeda namun penggunaan CSS Internal lebih direkomendasikan karena lebih mudah dioptimasi untuk mempercepat waktu loading blog atau untuk keperluan editing lainnya yang bisa dilakukan secara langsung.
CSS External
CSS External dalam penerapannya, kode CSS tidak berada dalam kode template blog tersebut dan tidak tampil secara terbuka namun berada dalam sebuah file dengan ekstensi .css dan semua kode CSS yang digunakan pada halaman blog, semuanya berada dalam satu file css. Dengan penggunaan file ekstensi .css ini maka blog atau website membutuhkan sebuah hosting yang digunakan untuk menyimpan file tersebut.
Hosting yang digunakan bisa menggunakan hosting sendiri (Self Hosting) atau menggunakan hosting luar. Dampaknya, jika menggunakan hosting sendiri, file css mungkin membutuhkan waktu loading yang lebih cepat. Namun jika menggunakan hosting dari luar, maka besar kemungkinan membutuhkan waktu loading yang lebih lama.
Adanya waktu loading yang berbeda dalam penggunaan hsoting untuk mengakses file css ini, bisa berdampak buruk bagi blog atau website. Apalagi algoritma google saat ini lebih mengutamakan loading blog yang sangat cepat. Untuk itu pertimbangkan kembali penggunaan file css, jika menggunakan file css ini lebih baik gunakan dari hosting sendiri saja dan tentunya dari layanan yang baik juga. Dan jangan menggunakan layanan gratisan.
Sedangkan untuk penggunaan CSS External hampir sama dengan CSS Internal yaitu berada dalam didalam kode
<head> </head> dan tidak perlu berada diantara tag <style> </style> namun harus menggunakan tag link.Contoh Kode CSS External:
<head> <link rel="stylesheet" type="text/css" href="https://www.digitalpoin.com/style.css" /> </head>
CSS Inline
CSS Inline digunakan secara langsung dalam tag HTML dengan menggunakan atribut <style> didalamnya. Penggunakan CSS Inline hanya sebatas pada kode markup HTML saja yang ingin dilakukan perubahan pada bagian tersebut secara langsung. Jadi tidak dibutuhkan kode CSS dengan struktur yang baku. Dan penggunaan CSS Inline ini sangat tidak direkomendasikan karena harus memberikan atau menerapkan kode css secara langsung pada setiap markup HTML dan terkadang pemasangan kode CSS seperti ini akan membuat struktur kode blog menjadi error atau tidak valid.
Contoh Kode CSS Inline:
<p style="color:blue;text-weight:bold;text-align:center;font-size:16px;">Ini adalah paragrap pertama</p>
Persamaan CSS Inline, CSS External dan CSS Internal
Dari ketiga CSS diatas, yang memiliki persamaan dalam penulisan kodenya adalah CSS Internal dan External yaitu sama-sama memiliki komponen yang sama dalam membagi syntax setiap elemen yaitu adanya komponen penyeleksi (selector) yang terbagi dalam ID dan Class. Apa ini? Silahkan baca di Belajar Cara Menggunakan Tag, ID dan Class Pada CSS & Perbedaan Ketiganya
Itulah beberapa perbedaan macam-macam CSS yang terdiri dari CSS Inline, CSS External dan CSS Internal yang ketiganya bisa digunakan sesuai kebutuhan dan atau sesuai optimasi yang dilakukan pada pengkodean tampilan blog. Mana yang lebih baik dari ketiga CSS tersebut? Menurut kami, CSS Internal dan External lebih baik daripada CSS Inline. Semoga bermanfaat.
