Jelaskan apa yang dimaksud dengan external CSS dan bagaimana cara menerapkannya?

Ketika browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet.

Table of Contents Show

  • Tiga Cara Menyisipkan CSS
  • CSS Eksternal
  • Internal CSS
  • Multiple Sytle CSS
  • 1. Inline CSS.
  • 2. Internal CSS.
  • 3. External CSS.
  • Pada bagian apa tag CSS eksternal digunakan?
  • Bagaimana penggunaan CSS?
  • Apa yang dimaksud dengan external CSS?
  • Apa kelebihan dari penggunaan eksternal CSS?

Tiga Cara Menyisipkan CSS

Ada beberapa cara yang dapat dilakukan untuk menggunakan CSS, 3 cara tersebut adalah :

  • CSS Eksternal
  • CSS internal
  • CSS sebaris

CSS Eksternal

Dengan eksternal CSS, kita dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Setiap halaman HTML harus menyertakan referensi ke file eksternal CSS di dalam elemen, di dalam bagian head halaman HTML tersebut.

Contoh
Eksternal CSS yang ditentukan dalam elemen , di dalam bagian dari halaman HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h2>Ini adalah Heading</h2>
<p>Ini adalah Paragaraf.</p>

</body>
</html>

Eksternal CSS dapat ditulis di editor teks apa pun, dan harus disimpan dengan ekstensi .css.

File .css eksternal tidak boleh berisi tag HTML apa pun.

Berikut adalah tampilan file “mystyle.css”:

body {
  background-color: lightblue;
}

h2 {
  color: navy;
  margin-left: 20px;
}

Catatan: Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;

Internal CSS


Internal CSS dapat digunakan jika satu halaman HTML memiliki gaya/tampilan yang unik.

Internal CSS ditentukan di dalam elemen

Contoh
Gaya internal ditentukan dalam elemen

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h2 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h2>Ini Heading</h2>
<p>Ini Paragraf.</p>

</body>
</html>

Inline CSS

Inline CSS dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan Inline CSS, tambahkan atribut ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.

Contoh
Inline CSS ditentukan dalam atribut “gaya” dari elemen yang relevan:

<!DOCTYPE html>
<html>
<body>

<h2 style="color:blue;text-align:center;">Ini adalah Heading</h2>
<p style="color:red;">Ini adalah Paragraf.</p>

</body>
</html>

Tips: Inline CSS ini menghilangkan beberapa kelebihan dari CSS yang dikenal untuk meringkas code.Gunakan metode ini dengan hemat.

Multiple Sytle CSS

Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di halaman CSS berbeda, nilai dari style terakhir yang akan digunakan.

Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen

Kemudian, asumsikan bahwa css internal juga memiliki gaya berikut untuk elemen

Contoh
Jika CSS internal ditentukan setelah ditautkan ke CSS eksternal, elemen akan menjadi “oranye”:

<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h2 {
  color: orange;
}
</style>
</head>
<body>

<h2>Ini adalah Heading</h2>
<p>Ini adalah Paragraf.</p>

</body>
</html>

Contoh
Namun, jika CSS internal ditentukan sebelum tautan ke CSS eksternal, elemen akan menjadi “navy”:

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h2>Ini adalah Heading</h2>
<p>Ini adalah Paragraf.</p>

</body>
</html>

Urutan CSS


Style yang mana yang akan digunakan jika ada lebih dari satu style yang ditentukan untuk elemen HTML?Semua Style dalam halaman akan “CSS” menjadi lembar style “virtual” baru dengan aturan berikut, dengan nomor satu memiliki prioritas tertinggi:

  • Inline CSS (di dalam elemen HTML)
  • Eksternal dan internal CSS (di bagian kepala)
  • Default browser

Jadi, inline css memiliki prioritas tertinggi, dan akan menggantikan Eksternal dan internal style serta default browser.

Sutiono S.Kom., M.Kom ., M.T.I

Hi, i'm lecturer, technopreneur, investor, businessman, of course an IT Maniac. Have more than 12 years experience in as professional, and 10 years as technopreneur.

Ketika berselancar di internet, Anda sesungguhnya mengakses atau membuka laman-laman web (web pages). Laman web sendiri adalah dokumen yang diakses melalui internet menggunakan web browser dengan mengetikkan URL atau mengklik link untuk laman web tersebut. Ada dua teknologi utama untuk membuat laman web yaitu HTML dan CSS. Keduanya mempunyai peran berbeda namun tidak terpisahkan dalam pembuatan laman web modern.

Untuk sebuah laman web, HTML ini berperan untuk menentukan struktur dan tipe konten seperti paragraf, heading, list dan image, sedangkan CSS lebih ke penyajian struktur dan konten agar lebih menarik seperti layout, color, margin, padding, font-family dan alignment. Tanpa CSS, Anda tetap bisa menyajikan konten di laman web namun dengan tampilan yang tidak menarik.

Baca artikel Tata Cara Penulisan Atau Sintaksis CSS

CSS didesain untuk digunakan dengan HTML. Ada tiga cara berbeda di dalam menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS. Tergantung keperluan, bisa saja ketiga cara menggunakan CSS tersebut dipakai semua dalam membuat laman web. Berikut ini adalah penjelasan singkat untuk masing-masing cara menggunakan CSS dengan HTML:

Baca artikel:

  • Beberapa Cara Mendefinisikan Warna Di CSS
  • Mengenal Vendor (Browser) Prefixes Di CSS

1. Inline CSS.

Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan yang akan digunakan (rendering) meskipun tag HTML tersebut juga sudah diberi style melalui internal CSS atau external CSS.

Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan style yang konsisten, Anda juga perlu mengubah style pada tag-tag lainnya. Misalnya, semua h2 berwarna merah, ketika Anda ingin mengubah h2 menjadi berwarna hijau, Anda perlu mengubah style di semua h2 satu persatu agar berwana hijau.

Berikut ini adalah contoh kode sederhana:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:yellow;">

<h2 style="color:red;">Menggunakan CSS Dengan HTML</h2>

<p style="color:blue;">Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p>

</body>
</html>

2. Internal CSS.

Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen head atau tag <head> dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web yang lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar atau kompleks.

Berikut ini adalah contoh kode sederhana:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      body {background-color:yellow;}
      h2 {color:red;}
      p {color:blue;}
   </style>
</head>
<body>

<h2>Menggunakan CSS Dengan HTML</h2>

<p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p>

</body>
</html>

3. External CSS.

External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web sehingga semua laman web akan memiliki tampilan atau desain yang seragam.

Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang akan diberlakukan di laman web. Simpan file CSS di folder yang sama tempat menyimpan file HTML.

body {background-color:yellow;}
h2 {color:red;}
p {color:blue;}

Buat file HTML dan di bagian tag <head> tambahkan elemen link atau tag <link>. Tag <link> ini akan digunakan untuk mengacu ke file CSS yang dibuat sebelumnya. Perhatikan penulisan <link> beserta atributnya untuk mengacu ke file CSS.

Berikut ini adalah contoh kode sederhana:

<!DOCTYPE html>
<html>
<head>
<link href="csseksternal.css" rel="stylesheet" type="text/css">
</head>
<body>

<h2>Menggunakan CSS Dengan HTML</h2>

<p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p>

</body>
</html>

Tiga cara menggunakan CSS dengan HTML di atas menghasilkan tampilan laman web yang sama persis seperti gambar di bawah ini.

Pada bagian apa tag CSS eksternal digunakan?

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.

Bagaimana penggunaan CSS?

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website.

Apa yang dimaksud dengan external CSS?

External CSS adalah kode CSS yang ditulis terpisah dari kode HTML. External CSS ditulis di sebuah file khusus menggunakan ekstensi .css. File external CSS umumnya diletakkan setelah bagian <head> di halaman.

Apa kelebihan dari penggunaan eksternal CSS?

Manfaat CSS eksternal: Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi. Kecepatan loading menjadi lebih cepat. File CSS yang sama bisa digunakan di banyak halaman.

Apa yang dimaksud dengan external CSS?

Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.

Bagaimana cara kerja CSS jelaskan secara singkat?

CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs.

Apa yang dimaksud dengan CSS dan berikan contohnya?

( "Cascading Style Sheets" ) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.

Pada bagian apa tag CSS eksternal digunakan?

External CSS adalah kode CSS yang ditulis terpisah dari kode HTML. External CSS ditulis di sebuah file khusus menggunakan ekstensi .css. File external CSS umumnya diletakkan setelah bagian <head> di halaman.