Belajar bahasa pemrograman berbasis web – Setelah belajar dasar-dasar HTML pada artikel sebelumnya, kita akan melanjutkan dengan topik baru yaitu tentang CSS.
Dalam menampilkan dokumen, secara standar HTML tidak dapat sepenuhnya mengatur dirinya sendiri terutama dalam masalah layout atau tata letak dan beberapa aspek lainnya. Untuk itu dibutuhkan yang namanya CSS, singkatan dari Cascading Stylesheet. Keduanya harus dikombinasikan bersama agar browser dapat memahami bagaimana elemen-elemen ditempatkan pada dokumen tersebut. CSS sendiri bukan merupakan bahasa pemrograman, lebih mirip fitur style pada Microsoft Word.
Apabila keduanya (HTML+CSS) dikombinasikan dengan tepat maka akan menghasilkan tampilan halaman web yang indah dan mudah dijelajahi.
Fungsi CSS yang utama adalah menangani style dari setiap elemen yang didefinisikan di dalamnya.
Table of Contents
Penggunaan CSS dalam bahasa pemrograman berbasis web lainnya
Dalam implemetasinya CSS dapat digunakan dalam dokumen HTML dengan 3 cara yaitu :
Inline Stylesheet
Style ditulis di dalam tag elemen html yang akan dimodifikasi. Cara penulisannya dengan menambahkan atribut style=”” setelah nama tag pembuka.
<p style=””>Isi Paragraf</p>
Embedded Stylesheet
Style didefinisikan terlebih dahulu di dalam elemen head. Pendeklarasiannya menggunakan tag elemen style, <style></style>
<html>
<head>
<title>Embedded Style</title>
<style>
body {
width: 100%;
}
.utama {
background-color: lightblue;
height: 500px;
width: 50%;
text-align: center;
border: 1px dashed black;
}
</style>
</head>
<body>
<p class="utama">Paragraf Pertama adalah yang utama.<br>Ini adalah contoh penggunaan CSS embedded</p>
</body>
</html>External Stylesheet
Pada external stylesheet, style CSS ditempatkan di file terpisah dari HTML. Penamaannya menggunakan ekstensi dot(.)css, misalnya style.css. Penggunaannya dengan memanggil file tersebut di dalam tag elemen <head>. External stylesheet menggunakan elemen sendiri bernama <link>.
<link rel="stylesheet" type="text/css" href="style.css">Latihan:
Buat sebuah file text dan beri nama style.css, kemudian masukkan kode seperti berikut ini :
.tengah {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
.tengah:hover {
color: darkblue;
border: 3px dashed #73AD21;
}Lalu buat file baru bernama eksternalcss.html, kemudian masukkan kode html berikut:
<!doctype html>
<html lang="en">
<head>
<title>Contoh penggunaan CSS Eksternal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tengah">
<p>Ini adalah contoh penggunaan CSS Eksternal. Paragraf diarahkan
ke tengah halaman</p>
<p>Ketika kursor Mouse dilewatkan pada paragraf ini, maka warna teks
berubah menjadi Biru Gelap dan border berubah menjadi garis putus-putus
</p>
</div>
</body>
</html>Untuk menguji, buka file eksternalcss.html menggunakan browser. Hasilnya kurang lebih seperti gambar di bawah ini :
Baca juga : Covid 19 dan Revolusi Industri 4 0
Dalam prakteknya, penggunaan CSS dapat dikombinasikan di antara ketiga cara tersebut, namun untuk pengorganisasian yang lebih baik penggunaan External Stylesheet lebih sering digunakan. Sehingga file dokumen HTML menjadi lebih rapi dan tidak terjadi tumpang tindih.
Framework CSS
Style dalam CSS sangat banyak, demikian pula elemen html yang ditangani stylenya. Hal ini sangat terasa ketika aplikasi bahasa pemrograman berbasis web bertambah besar dan kompleks. Untuk itu saat ini banyak tersedia framework CSS yang gratis dan bagus. Manfaatnya terutama adalah meringkas waktu untuk menuliskan satu persatu style CSS sekaligus menjada konsistensi style dari aplikasi yang dibuat.
Framework CSS yang populer seperti Twitter Bootstrap, Foundation, Materialize, dan lain-lain. Masing-masing framework menawarkan keunggulannya tersendiri. Pembahasan secara lebih detail mengenai Framework akan ditulis tersendiri. Nantikan Chapter selanjutnya dari seri pemrograman berbasis web di Blog ini. 😀
