Tutorial Belajar CSS Part 1: Pengertian dan Fungsi CSS
Halo kawan-kawan,
Setelah pada tutorial-tutorial sebelumnya kita telah belajar tentang HTML, selanjutnya kita akan belajar tentang CSS. Bagi yang belum memahami HTML, sebaiknya mempelajari dahulu tentang HTML, sebab untuk memahami CSS perlu sedikit pemahaman akan code HTML.
Untuk memahami tentang CSS, kawan-kawan dapat membandingkan 2 code berikut:
Contoh code HTML tampa Code CSS:
<!DOCTYPE html>
<html>
<head>
<title>Pengertian dan Fungsi CSS</title>
</head>
<body>
<p>
CSS merupakan bahasanya <font color="red">desainer web</font>.
Namun sebenarnya, apa itu CSS?
<br />
<font color="red">CSS </font> adalah kumpulan kode yang digunakan
untuk mendefenisikan desain dari bahasa markup,
<font color="red">salah satunya adalah HTML</font>.
<br />
Dengan CSS kita bisa mengubah desain dari
<font color="red">text, warna, gambar dan latar belakang</font>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>
Hasil Code:
Contoh kode HTML dengan Code CSS:
<!DOCTYPE html>
<html>
<head>
<title>Pengertian dan Fungsi CSS</title>
<style type="text/css">
.warna {
color: red;
}
</style>
</head>
<body>
<p>
CSS merupakan bahasanya <span class=warna>desainer web</span>.
Namun sebenarnya, apa itu CSS?
<br />
<span class=warna>CSS </span>adalah kumpulan kode
yang digunakan untuk mendefenisikan desain dari bahasa markup,
<span class=warna>salah satunya adalah HTML</span>.
<br />
Dengan CSS kita bisa mengubah desain dari
<span class=warna>text, warna, gambar dan latar belakang</span>
dari (hampir) semua kode tag HTML.
</p>
</body>
</html>
Hasil Code:
Kedua code diatas memiliki tampilan hasil yang serupa. Namun bayangkan jika kawan-kawan memiliki 100 artikel dan ingin mengubah tampilannya, tentu code HTML dengan CSS didalamnya akan lebih mempermudah dalam proses editing nantinya.
Untuk mengubah tampilan HTML tampa code CSS, mewajibkan kita untuk mengakses satu persatu halaman, sedangkan tampilan HTML dengan code CSS dapat diubah hanya dengan mengakses bagian code CSSnya saja.
Jadi dapat disimpulkan HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.