Setelah di tutorial sebelumnya kita telah membahas mengenai HTML, yang telah kita pelajari di 33 Part Belajar HTML, nah selanjutnya kita akan membahas mengenai CSS.
Mengenal Fungsi CSS
Css singkatan dari Cascading Stylesheet, css dan html itu berperang penting dalam menata tampilan dari sebuah halaman website, secara sederhana css digunakan untuk mempercantik tampilan dari HTML.
Jika di tutorial HTML kita sudah belajar membuat paragraf, tabel dll, nah di bagian css ini anda dapat merubah tampilan tabel paragraf tersebut, mungkin dari segi warna ataupun yang lain, sebenarnya anda bisa saja merubah tampilan dengan menggunakan skrip HTML saja, hanya saja untuk beberapa kondisi tertentu anda akan kesulitan jika hanya menggunakan skrip HTML saja, untuk merubah tampilan halaman webnya.
Bagaimana bingung kah ?
Baik kita akan berikan contoh, disini saya akan membuat sebuah contoh paragraf sederhana yang menggunakan skrip html untuk merubah tampilannya.
<span style="font-family: tahoma,arial,helvetica,sans-serif;"><!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi biru <font color="blue">seperti ini</font></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi biru <font color="blue">seperti ini</font></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi biru <font color="blue">seperti ini</font></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi biru <font color="blue">seperti ini</font></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi biru <font color="blue">seperti ini</font></p>
</body>
</html></span>lalu kita simpan dengan nama semisal belajar_css.html, lalu kita buka di browser
terlihat ada 5 paragraf yang terbuat, dan disetiap akhir paragraf berwarna biru, hal itu dikarenakan kita menggunakan attribute color=”blue” pada bagian tag <font>.
Kalau kita hanya membuat beberapa bagian saja, masih bisa menggunakan skrip html untuk merubah tampilan dari webnya, lalu bagaimana jika ternyata anda membuat ratusan bahkan ribuan bagian website yang warnanya disamakan semisal warna biru.
OKE kita bisa menggunakan attribute color=”blue” disetiap bagian yang kita rubah warnanya menjadi biru, lalu karena suatu hal anda diharuskan merubah menjadi warna merah, pasti sulit jika anda harus merubahnya satu persatu.
Nah untuk masalah seperti ini Baiknya anda menggunakan Skrip CSS.
Lalu bagaimana penulisannya jika menggunakan CSS ?
Jadi kurang lebih seperti ini untuk skripnya, silahkan anda rubah dari skrip diatas, menjadi skrip dibawah ini.
<span style="font-family: tahoma,arial,helvetica,sans-serif;"><!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
.warna_text{
color:red;
}
</style>
</head>
<body>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
</body>
</html></span>lalu jika kita buka di browser maka hasilnya akan seperti berikut :
hasilnya hampir sama, tetapi konsep skripnya yang berbeda, disini kita menggunakan css, pada setiap akhir paragraf terdapat skrip class=”warna_text”
seperti contoh dibawah ini :
| 1 | <span style="font-family: tahoma,arial,helvetica,sans-serif;"><p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p></span> |
nah disini classnya kita set sama setiap paragraf yaitu “warna_text”, dan pada bagian skrip css, kita deklarasikan objek yang menggunakan class=”warna_text” akan menggunakan warna merah
<span style="font-family: tahoma,arial,helvetica,sans-serif;"> <title>Belajar CSS</title>
<style type="text/css">
.warna_text{
color:red;
}
</style></span>nah jika nanti anda ingin mengganti warnya lagi, tinggal mengganti saja value red, menjadi warna yang anda inginkan semisal hijau.
<span style="font-family: tahoma,arial,helvetica,sans-serif;"><!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
.warna_text{
color:green;
}
</style>
</head>
<body>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
<p>Ini adalah contoh paragraf yang menggunakan HTML saja untuk merubah tampilan warna textnya menjadi merah <span class="warna_text">seperti ini</span></p>
</body>
</html></span>Maka hasilnya adalah seperti berikut :
maka textnya akan berganti menjadi berwana hijau, bagaimana lebih mudah bukan ?
Penjelasan Tag <span> dan <div>
Tag <span> dan <div> digunakan untuk mendeklarasikan sebuah bagian dari objek html, dimana objek ini bisa anda tambahkan skrip css, baik itu menggunakan class ataupun id.
Apa Perbedaan dari <span> dan <div> ??
- jika anda menggunakan tag <span> maka text yang berada di tag <span> akan ditampilkan di baris yang sama dengan text sebelumnya
- jika anda menggunakan tag <div> maka text yang berada didalam tag tersebut ditampilkan di baris baru
Jadi kurang lebih seperti itu yang bisa warung belajar bahas pada tutorial css part 1, mengenai bagaimana fungsi CSS dalam sebuah tampilan website, intinya HTML lebih dikhususkan membuat layout tampilan, seperti paragraf, table, menampilkan gambar dll, tetapi css digunakan untuk memanipulasi tampilan objek HTML tersebut agar lebih menarik, baik sekian dulu yang bisa warung belajar bahas, jika ada yang ingin didiskusikan silahkan di kolom komentar, terima kasih