Cara Menerapkan CSS Pada Dokumen HTML

Setidaknya terdapat tiga cara untuk menambahkan aturan CSS pada sebuah dokumen HTML. Ketiga cara tersebut adalah dengan menggunakan file CSS yang terpisah, menempelkan langsung kode CSS pada file HTML atau dengan menyisipkan kode CSS pada elemen HTML. Pada tulisan kali ini akan dibahas masing-masing cara tersebut. Pembahasan  ini merupakan lanjutan setelah anda memahami tentang pengenalan CSS dan pengenalan id dan class pada css.

Menggunakan File CSS Eksternal

Menggunakan file CSS eksternal maksudnya adalah anda membuat dokumen css menjadi sebuah file css yang terpisah dengan ekstensi file .css. Misalnya anda membuat sebuah dokumen CSS dan menyimpannya dengan nama style.css. Misalnya anda membuat sebuah dokumen css seperti berikut ini dan anda menyimpannya sebagai sebuah file bernama style.css.

body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}

Untuk menambahkan file css yang anda buat tersebut, berikut ini contohnya.

<!DOCTYPE html>
<html>
<head>
<title>Menggunakan File CSS</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Kentang</h1>
<p>Terdapat berbagai jenis kentang yang bisa anda konsumsi. .</p>
</body>
</html>

Keterangan dari contoh kode di atas sebagai berikut:

link : elemen link digunakan untuk memberitahukan ke browser dimana lokasi file CSS yang akan digunakan untuk mengatur halaman web. Elemen ini tidak memerlukan closing tag dan berada di antara elemen head dan /head.

href : bagian ini berisi path atau lokasi dari file css disimpan

type: atribut ini menentukan tipe dokumen yang menjadi rujukan. Isinya seharusnya “text/css”

rel: atribut ini menentukan hubungan antara file css dengan dokumen HTML yang merujuk ke file css tersebut. Isi dari atribut tersebut adalah stylesheet saat merujuk ke file CSS.

Sebuah halaman HTML dapat menggunakan lebih dari satu file CSS. Untuk melakukan hal ini, maka dapat membuat elemen <link> sebanyak file CSS yang digunakan. Adakalanya seorang desainer menggunakan 1 file CSS untuk mengatur layout, file CSS yang lain digunakan untuk mengatur font dan warna.

Menggunakan Internal CSS

Cara ini dapat dilakukan dengan cara anda menuliskan aturan-aturan CSS langsung pada dokumen HTML yang anda buat. Berikut ini contohnya:

<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Kentang</h1>
<p>Terdapat berbagai jenis kentang yang bisa anda konsumsi sebagai pengganti nasi.</p>
</body>
</html>





Elemen <style> menggunakan atribut type yang menunjukkan bahwa style yang ditentukan berupa CSS.

Pada HTML5, anda cukup menuliskan elemen <style> tanpa perlu menuliskan atribut pada elemen tersebut.

Menyisipkan CSS Pada Elemen HTML

Anda juga bisa menyisipkan aturan CSS kedalam halaman HTML dengan cara menambahkan atribut style pada elemen html yang akan anda terapkan CSS. Contohnya seperti berikut ini:

<div id="berita" style="border:1px solid #000; padding:5px;">
</div>

Pilih Cara Yang Mana?

Saat membuat sebuah website dengan jumlah halaman lebih dari satu, anda sebaiknya menggunakan eksternal CSS, karena:

  • memungkinkan semua halaman untuk mengacu pada satu style CSS. Hal ini efektif daripada anda harus mengulang penulisan disetiap halaman
  • Tetap memisahkan antara isi halaman dengan pengatur tampilan
  • Anda cukup merubah satu file untuk merubah seluruh tampilan halaman

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

Your email address will not be published. Required fields are marked *