Cara Memasukan Kode CSS Ke Halaman HTML

lebakcyber.net – Pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara memasukan kode CSS ke halaman HTML. Ada tiga cara yang bisa digunakan untuk memasukan kode CSS ke halaman HTML, yaitu :

Inline Style
Internal Style Sheets
External Style Sheets

Jadi langsung saja kita bahas satu persatu bagaimana cara menggunakan ketiga metode tersebut untuk memasukan kode CSS ke halaman HTML.

Inline Style di CSS

Inline Style di CSS adalah cara untuk menginput kode CSS ke HTML secara langsung dengan menggunakan atribut style, contoh penggunaannya seperti pada perintah dibawah ini :

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
</head>
<body>

<p><h3 style = color:blue>Ini adalah contoh tulisan teks dengan warna biru</h3></p>
<p><h3 style = color:red>Ini adalah contoh tulisan teks dengan warna merah </h3></p>

</body>
</html>

Nanti tampilannya akan berubah seperti berikut :

Pada contoh diatas, kode CSS disisipkan dengan menggunakan atribut style pada tag<h3>, dan nilai dari atribut style tersebutlah yang dimasukan kedalam kode CSS yang ingin diterapkan.

Penggunaan Inline Style di CSS ini bisa dikatakan sangat praktis tapi sayangnya sangat tidak disarankan, hal tersebut karena kode CSS dituliskan langsung pada tag HTML.

Internal Style Sheet di CSS

Cara kedua adalah dengan menggunakan Internal Style Sheet di CSS. Dimana kode CSS ditulis di satu halaman HTML yang sama namun dipisahkan dari tag HTML yang dibuat. Contoh perintahnya seperti berikut ini :

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
  <style type="text/css">
    h3{
      color:blue;
    }
  </style>
</head>
<body>

<p><h3>Ini adalah contoh tulisan teks dengan warna biru</h3></p>
<p><h3>Ini adalah contoh tulisan teks dengan warna merah</h3></p>

</body>
</html>

Cara ini bisa dibilang lebih baik jika dibandingkan dengan Inline Style di CSS, karena kode CSS sudah dipisahkan dari tag yang ada pada HTML dan seluruh kode CSS akan berada di tag<head> pada HTML.

kekurangan dari Internal Style Sheets di CSS adalah semua halaman CSS harus memiliki kode CSS yang sama jika Anda sedang membuat web dengan beberapa halaman.

External Style Sheets di CSS

Cara External Style Sheets di CSS digunakan untuk memisahkan kode CSS kedalam suatu file tersendiri yang terpisah dari halaman HTML. Jadi nanti setiap halaman web yang ingin menggunakan CSS hanya tinggal memanggil file CSS tersebut. Contohnya seperti perintah dibawah ini.

Buat sebuah file baru dengan nama style.css lalu masukan perintah dibawah ini :

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
  <style type="text/css">
    @import url(style.css)
  </style>
</head>
<body>

<p><h3>Ini adalah contoh tulisan teks dengan warna merah</h3></p>

</body>
</html>

Bisa dilihat kalau pada perintah diatas kita menyisipkan perintah @import url. Alamat pada baguan url bisa juga beruppa halaman relatif seperti misalnya D:/belajarCSS/style.css atau berupa halaman absolut seperti misalnya www.lebakcyber.net/assets/style.css.

Selain itu ada juga cara kedua yang bisa digunakan pada External Style Sheet.

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><h3>Ini adalah contoh tulisan teks dengan warna biru</h3></p>

</body>
</html>

Disitu bisa dilihat ada link external style sheets menggunakan atribut href pada tag<link>, yang mana akan berisi alamat dari halaman file css yang dibutuhkan, pada contoh ini file css yang dibutuhkan adalah style.css.

Dari ketiga cara memasukan kode css ke halaman html yang paling direkomendasikan adalah dengan menggunakan cara external style sheets, dan kebanyakan desainer web lebih memilih external style sheets yang kedua dengan menggunakan tag<link>

Oke jadi sampai disini dulu pembahasan kita mengenai cara memasukan kode CSS ke halaman HTML. Sampai jumpa di tutorial belajar CSS selanjutnya.

Lebak Cyber Tips dan Trik Komputer

Cara Memasukan Kode CSS Ke Halaman HTML