Chapter 1 : Belajar bahasa pemrograman berbasis web – CSS

Chapter 2 : Belajar bahasa pemrograman berbasis web – CSS Dasar

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.

bahasa pemrograman berbasis web
Credit image Unsplash Maik Jonietz

Fungsi CSS yang utama adalah menangani style dari setiap elemen yang didefinisikan di dalamnya.

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>

&lt;html>
&lt;head>
&lt;title>Embedded Style&lt;/title>

&lt;style>
 body {
    width: 100%;
 }
 .utama {
   background-color: lightblue;
   height: 500px;
   width: 50%;
   text-align: center;
   border: 1px dashed black;
 }
&lt;/style>

&lt;/head>
&lt;body>
 &lt;p class="utama">Paragraf Pertama adalah yang utama.&lt;br>Ini adalah contoh penggunaan CSS embedded&lt;/p>
&lt;/body>
&lt;/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>.

&lt;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:

&lt;!doctype html>
&lt;html lang="en">

&lt;head>
  &lt;title>Contoh penggunaan CSS Eksternal&lt;/title>
  &lt;link rel="stylesheet" href="style.css">
&lt;/head>

&lt;body>
  &lt;div class="tengah">
    &lt;p>Ini adalah contoh penggunaan CSS Eksternal. Paragraf diarahkan
    ke tengah halaman&lt;/p>
    &lt;p>Ketika kursor Mouse dilewatkan pada paragraf ini, maka warna teks
      berubah menjadi Biru Gelap dan border berubah menjadi garis putus-putus
    &lt;/p>
  &lt;/div>

&lt;/body>

&lt;/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. 😀

Leave a Reply