Tutorial HTML: Metode Penambahan Kode CSS

Tampilan merupakan bagian yang sangat penting dalam pembuatan website. Tampilan terkesan memberi efek yang mampu menarik pengunjung untuk bertahan lebih lama di website. Inilah salah satu kunci sukses website, selain tentunya konten yang berkualitas.

Atribut Style Pada HTML (Inline CSS)

CSS merupakan singkatan dari Cassading Style Sheets. CSS dipergunakan untuk membuat tampilan layout dari halaman dari HTML. Dengan CSS inilah beraneka ragam design tempilan dimunculkan.

Hal dasar dalam penambahan efek tampialan dengan menggunakan atribut style. Selayaknya sebuah atribut, atribut style diletakkan setelah nama tag. Atribut style juga diikuti oleh nilau atau valuenya. Tapi, ada seditkit perbedaan antara nilai dari atribut stykle dengan atribut lainnya, yakin pada atribut style nilai yang dimaksud berupa nilai dengan format CSS. Format ini terdiri dari properti (dari CSS) dan value (dari properti CSS).

Sintaksnya sebagai berikut,

<tag style="properti:value;"></tag>

Contoh,

<h1 style="color:red">Mari Belajar HTML</h1>

HTML Dasar : Pemambahan CSS

Internal CSS

Pemberian efek CSS selanjutnya dilakukan dengan menggunakan metode Internal CSS. Penambahan internal CSS dilakukan dengan mendefinisikan dengan element <style>, yang merupakan child dari elemen <head>.

Internal CSS ini hanya berlaku pada dokumen HTML tempat ia dideskripsikan.

<!DOCTYPE html>
<html>
<head>
 <title>Internal CSS</title>
 <style>
  body {
   background: gray;
  }
  h1 {
   color:red;
  }
  p {
   text-decoration: underline;
   color:red;
  }
 </style>
</head>
<body>
 <h1>Mari Belajar Web !</h1>
 <p>Hari ini saya belajar penambahan internal CSS</p>
</body>
</html>

HTML Dasar : Penambahan CSS Inline

Artinya, kode CSS untuk body, h1, atau p diatas hanya berlaku untuk dokumen ini saja, tidak untuk dokumen lain meski dalam satu folder.

External CSS

Kontra dari internal CSS yaitu External CSS. Pendefenisian dilakukan dengan menambahkan satu dokumen baru khusus untuk dokumen CSS (dengan ekstensi .css). Dokumen HTML akan dihubungkan dengan dokumen CSS ini dengan menggunakan tag <link>. Karena CSS ini bersifat external atua berbeda file dengan HTML, maka dokumen CSS ini bisa dipakai secara berulang ulang oleh dokumn HTML lainnya.

Pendefenisian tag <link> juga dilakukan didalam elemen <head>.

Kode HTML,

<!DOCTYPE html>
<html>
<head>
 <title>Extenal CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <h1>Terus Belajar HTML</h1>
 <p>Semakin asik belajar HTML</p>
</body>
</html>

Kode CSS (style.css)

body {
 background: #444;
}
h1 {
 color:green;
}
p {
 text-decoration: italic;
 color:darkgreen;
}

HTML Dasar : Penambahan CSS 3

Perhatikan <link> punya tiga atribut yang mengikutinya. Ada rel, type, dan href. Tidak perlu pusing dengan yang lainnya, sebagai permulaan kita cukup fokus ke atribut href. Nilai dari atribut href ini berupa source file dari dokumen CSS. Untuk penamaannya terserah, dan untuk penamaan sendiri terserah tapi umumnya menggukan style.css

Kesimpulan

Tampilan merupakan nilai tambah dalam pembuatan website. Desain mampu menyulap sang pengguna website kita tertahan lebih lama nongkrong di website kita. Hal ini lah yang menjadi pertimbangan para master web untuk terus mengembangkan design tampilan disamping performa websitenya.

 

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com