Pemrograman

Bahasa

Framework

Peralatan

Info

3 Cara Penulisan Kode CSS dalam HTML

– 12 July 2015
Penulisan kode CSS pada HTML dibagi menjadi tiga cara. Pembagian ini berdasarkan posisi atau letak kode CSS ditulis. Internal, Eksternal, dan iniline, itulah tiga cara menuliskan kode CSS yang akan saya bahas pada kesempatan ini. Baiklah, langsung saja kita mulai.

1. Internal CSS

Internal CSS adalah istilah untuk kode CSS yang ditulis langsung dalam berkas HTML. Kode CSS ini dituliskan pada tag <style>. Tag ini bisa ditulis di dalam blok head atapun body, kedua-duanya sah. Nah, berikut ini contoh internal CSS.

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
See the Pen eNrXGW by Ardianta Pargo (@ardianta) on CodePen.

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah berkas khusus yang berekstensi .css. Sebagai contoh, saya akan membuat sebuah berkas bernama style-ku.css. Berikut ini cuplikan isi berkas style-ku.css

p{
      font-family: serif;
      line-height: 1.75em;
}

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

h2 { 
      font-family: sans;
      color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

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

Atau bisa juga seperti ini:

<style type="text/css">
@import "style-ku.css";
</style>

Penulisan pada HTML versi lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

Hasilnya pun akan sama seperti contoh inline CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>


<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>

<body>

  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
See the Pen NqMmjj by Ardianta Pargo (@ardianta) on CodePen.

Referensi: