Rabu, 16 Agustus 2023

PERBEDAAN INLINE CSS, INTERNAL CSS, EXTERNAL CSS

   No comments


as-salāmu ʿalaykum wa-raḥmatu -llāhi wa-barakātuh kembali lagi dengan sayaa di Blog Muhammad Zein yg mana insya allah disini ana akan memberikan pembasahan mengenai CSS dan beberapa contoh dari setiap CSS ny tersebut tapi sebelum ny ada yg tau g si apa itu CSS? CSS Cascading Style Sheets adalah bahasa pemograman untuk mendesain tampilan/mempercantik website yang memiliki beberapa metode penulisan berbeda seperti Inline CSS, Internel CSS, External CSS dan dari tiga ini setiap metode penulisan ini pasti memliki kelibihan, kekurangan , serta manfaat ny masin masin dari setiap CSS ny tersebut.

Jadi insya allah karna pada artikel kali ini ana akan membahas perbedaan dari tiga metode penulisan Kode CSS. termasuk dari segi kelebihan, kekurangan, manfaat, dan contoh dari setiap penempatan Kode CSS ny tersebuuuut. jadii Let's Learn about the difference of CSS.

Inline CSS

Inline CSS ini biasa digunakan langsung pada atribut element HTML. maksud ny ialah setiap element HTML memiliki atribut style, dan disitu lah CSS Inline ditulis, dan untuk CSS Inline ini menurut saya atau kebanyakan orang lebih kurang efisien dikarnakan di setiap tag HTML yg di berikan harus memliki style disetiap masing masing ny. jadi akan lebih sulit dalam mengatur website jika hanya menggunakan Inline Style CSS ini sebab untuk Inline ini hanya bisa mengubah satu element saja.

Dari ana sendiri si untuk kelebihan dari Inline ini kita bisa lebih mudah atau membantu dalam menguji dan melihat perubah di dalem satu element tersebut,  dan juga lebih cepat dalem memperbaiki kode dengan cepat.

Dan dari segi kekurangan ny seperti yg saya sudah jelaskan kurang efisien karna hanya bisa mengubah 1 element saja.

Contoh dari Inline CSS :

<h1 style="color:blue; font-family: arial;">Blog Muhammad Zein</h1>


Internal CSS

Inline CSS ini biasa digukana langsung atau tertulis di dalam tag <style>  dan untunk Internal CSS dituliskan di bagian atas (Header) file HTML. dan untuk Internal CSS ini dapat kita gunakan untuk membuat tampilan pada satu halam website dan tidak digunakan di halam website yg lain ny, mungkin kalo dari ana sendiri si itu udah termasuk lumayan dan cocok untuk kita buat menciptakan atau bangun website dengan tampilan yg berbeda dengan kata lain, Internal CSS  ini bisa dipakai untuk menciptakn tampilan yg unik untuk setiap perhalaman website ny.

Untuk kelebihan dari Internal CSS ini kita bisa membuat satu perbubahan dalam 1 halaman saja, dan juga engg perlu repot untuk upload beberapa file karna HTML dan CSS berada dalam satu file, kita jug bisa menggunakan Class & Id oleh Internal Stylesheet.

Kekurangan dari Internal CSS ini kurang ny efisien kita kita ingin menggunakan CSS yg sama dalam beberapa file, dan membuat performa webstite jadi rada lemot. sebab CSS yg berbeda beda akan membuat web loading ulang setiap kali kita ganti halaman web.

Contoh dari Internal CSS :

<!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>Blog Muhammad Zein/h2>
</body>
</html>

External CSS

External CSS ini yg biasa ditulis secara terpisah dengan kode HTML External CSS bisa ditulis di sebuah file khusus yg berekstensi .css. file External CSS biasa ny diletakkan setelah bagian <Head> pada halaman, dan dengan cara ini kita bisa lebih sederhana dan simpel daripada menambahkan kode CSS di setiap element HTML  yg ingin kita atur tampilan ny..

Manfaat dari External CSS ini ukurang file HTML kan menjadi lebih kecil dan struktur dari kode HTML  jadi lebih rapih, dan loading website jadi lebih cepat, dan bisa di gunakan file CSS di beberapa halaman website sekaligus.

Kekurangan ny jadi akan berantakan ketika kita gagal manggil file CSS di dalam file HTML biasa terjadi ketika terjadi ny koneksi yg lambat/lemot.

Contoh dari External CSS :

untuk bagian External CSS ini kita diwajib kan membuat file baru CSS dengan nama style.css dan tulis kode ini pada file tersebut : 

p {
    font-family: arial;
    line-height: 2.75em;
}

i {
    font-family: arial;
    color: orange;
}

h2 {
    font-family: arial;
    color: #1B9CFC;
}

setelah itu kita bisa balik lagi pada file HTML, dan kita perlu menambahkanny ke dalem file HTML , dengan menunggakan tag <link> berikut contoh yg saya berikan :

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

untuk kode di atas tersebut kita bisa taro pada posisi <Head> seperti contoh ny :

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

Mungkin seperti itu dari contoh beberapa Metode di dalem CSS mungkin sekian dari ana bila ada kesalahan mohon dimaaf dan jika masih rada bingung dalem penjelasan bisa liat di youtube sayaaa.

0 komentar:

Posting Komentar