Monitor Teknologi
Banner
  • PC & MOBILE
    • Apps
    • Games
    • Hardware
    • Internet
    • Security
    • Tips & Trick
  • Networking
    • Cisco
    • MikroTik
    • SysAdmin
  • Programming
Home » Perbedaan Antara Internal, External, Dan Inline Di CSS

Perbedaan Antara Internal, External, Dan Inline Di CSS

Juni 11, 2019
Perbedaan Internal External dan Inline
5.5K

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
  • 2. External Style Sheet
  • 3. Inline Style Sheet
  • Kesimpulan

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:

Internal, External, Dan Inline Di CSS

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…

CSS
Share FacebookTwitterTumblrWhatsappTelegram
Resa Risyan

Hanya orang biasa yang ingin membagikan sedikit pengetahuannya mudah-mudahan ilmu yang saya berikan dapat bermanfaat bagi kita semua. Ingatlah! ilmu yang bermanfaat adalah investasi dunia akhirat.

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

ARTIKEL TERBARU

  • Cheat The Sims 2 Lengkap Untuk PC Dan PS2 Bahasa Indonesia

    Juni 10, 2023
  • 7 Manfaat IoT Untuk Mengoptimalkan Kinerja Bisnis

    Juni 2, 2023
  • Kumpulan Cheat The Sims 4 Lengkap Bahasa Indonesia

    Mei 26, 2023
  • Kumpulan Kode Cheat Winning Eleven PS2 Terbaru 2023

    Mei 17, 2023
  • 7 AI Voice Generator Terbaik Yang Dapat Meningkatkan Produktivitas

    Mei 9, 2023
  • Facebook
  • Twitter
  • Linkedin
  • Tumblr
  • Telegram
  • About
  • Contact US
  • Privacy Policy
  • Terms of Service

Copyright © 2022 www.monitorteknologi.com

  • PC & MOBILE
    • Apps
    • Games
    • Hardware
    • Internet
    • Security
    • Tips & Trick
  • Networking
    • Cisco
    • MikroTik
    • SysAdmin
  • Programming
wpDiscuz