Penakode - Setelah sebelumnya mempelajari dasar-dasar HTML yang menjadi dasar bagi pemula dalam belajar web. Pembahasan selanjutnya adalah tentang cara mempercantik halaman web dengan menggunakan CSS.

Dalam membuat sebuah web diperlukan kemampuan dalam dunia programming dengan mempelajari bahasa HTML, CSS dan Javascript. Dengan mempelajari HTML, CSS dan Javascript maka akan lebih mudah dalam membuat halaman web.

Apa itu CSS?

CSS atau Cascading Style Sheet merupakan teks sederhana yang memiliki ekstensi (.css). CSS digunakan untuk memperindah tampilan HTML sebuah web. Penggunaan CSS akan mempermudah programmer terutama web developer untuk membuat tampilan sebuah web menjadi lebih menarik.

Keuntungan Menggunakan CSS

Mempelajari HTML saja untuk menjadi seorang web developer tidaklah cukup jika belum didukung dengan mempelajari CSS dan Javascript. CSS akan sangat membantu untuk memberikan style pada halaman HTML, dan akan sangat terasa apabila membutuhkan banyak kode yang dilakukan secara berulang. Pengaksesan melalui browser yang berbeda juga akan menjadi masalah jika tidak menggunakan CSS.

"Keuntungan menggunakan CSS adalah dapat
 membuat puluhan atau ratusan halaman website 
 hanya dengan menggunakan satu kali penulisan CSS."

Contoh: Jika membuat judul dengan tag <h1> dengan menggunakan style dengan Font Tahoma dengan warna biru. Apabila tidak menggunakan CSS maka setiap judul harus menggunakan style di setiap tag <h1>, akan tetapi apabila menggunakan CSS maka cukup satu kali penulisan style sehingga mempermudah dan lebih efektif.

Penulisan Style tanpa CSS

<h1 style="font-family: Arial; Color: blue;">Contoh Judul Penakode</h1>
<h1 style="font-family: Arial; Color: blue;">Judul ke-2</h1>
<h1 style="font-family: Arial; Color: blue;">Judul ke-3</h1>

Hasilnya:

Contoh Judul Penakode

Judul ke-2

Judul ke-3

Penulisan Style dengan CSS

<style>
    h1{
        font-family: arial;
        color: blue;
    }
</style>

<h1>Contoh Judul Penakode - CSS</h1>
<h1>Judul ke-2</h1>
<h1>Judul ke-3</h1>

Hasilnya:

Contoh Judul Penakode - CSS

Judul ke-2

Judul ke-3

CSS merupakan solusi yang tepat untuk membuat halaman web. Dari contoh penulisan diatas, menggunakan CSS lebih mempermudah penggunaan style daripada harus menggunakan penulisan kode yang berulang-ulang.

Fungsi HTML dan CSS pada halaman Web

Dalam pembuatan website diperlukan kerangka web menggunakan HTML dan untuk design website diperlukan penggunaan CSS.

Ketika membuat halaman web tidak diperlukan penulisan style pada kerangka HTML tetapi bisa dilakukan langsung di CSS.

Fungsi HTML adalah untuk membangun kerangka dari sebuah website.

Fungsi CSS adalah untuk mendesign halaman website menjadi lebih menarik.

Contoh Penggabungan HTML dan CSS

Pada tutorial sebelumnya yaitu cara membuat link pada HTML terdapat contoh link button dengan menggunakan CSS seperti dibawah ini:


Bagaimana cara membuatnya:

Kode HTML

<div id="btn">
<a href="https://penakode.com/7-skill-yang-diperlukan-seorang-programmer" target="_blank" title="KLIK DISINI">Skill Programmer</a>
</div>

Kode CSS

<style>
#btn a:link, #btn a:visited {
  background-color: goldenrod;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#btn a:hover, #btn a:active {
  background-color: blue;
}
</style>

Demikianlah pembahasan mengenai keuntungan dan cara menggunakan CSS pada kerangka Web HTML.

Selanjutnya akan membahas tentang 3 cara menggabungkan File HTML dan File CSS. Selamat mencoba.