Featured Post

Membangun Website dengan CSS (Bagian 2)

Sebelumnya: Membangun Website dengan CSS (Bagian 1)

Di entri kali ini aku akan menjelaskan bagaimana CSS dituliskan bersamaan dengan HTML. Ada 3 cara yang bisa kamu pilih untuk meletakkan CSS, yaitu: sebaris (inline), internal, dan eksternal. Kebanyakan CSS ditulis secara eksternal. Namun, di dalam template Blogger ditulis secara internal. Pasti penasaran dengan apa yang dimaksud penulisan sebaris, internal, ataupun eksternal. Berikut adalah ulasannya.



Penulisan Sebaris

Penulisan CSS dengan cara sebaris adalah cara yang paling mudah dilakukan. Biasanya penulisan sebaris dilakukan apabila hanya ingin melakukan kustomisasi pada satu elemen unik saja, karena dinilai lebih efektif daripada penulisan internal maupun eksternal. Berikut adalah cara menuliskan CSS sebaris:

<div style="width: 300px; height: 200px; background: #ccc;"></div>

Kode di atas akan menghasilkan persegi panjang dengan latar abu-abu, lebar 300px, dan tinggi 200px.

Penulisan Internal

Penulisan CSS selanjutnya adalah dengan cara internal. Penulisan secara internal ini lebih efektif apabila jumlah elemen yang dikustomisasi semakin banyak, namun masih ingin menjadikan antara berkas HTML dan CSS masih dalam satu berkas .html. Cara menulisnya adalah dengan menambahkan elemen <style> pada elemen <head>. Berikut adalah contoh penulisan CSS internal.

<html>
  <head>
    <style>
      body {
        background: #eee;
        margin: 0px;
        padding: 0px;
      }
      #kotak {
        background: #f00;
        width: 500px;
        height: 300px;
      }
    </style>
  </head>
  <body>  
    <div id="kotak"></div>
  </body>
</html>


Penulisan Eksternal

Pada penulisan eksternal, CSS diletakkan di berkas yang terpisah dengan HTML. Berkas CSS dikenal dengan .css. Kelebihan dari penggunaan penulisan CSS eksternal ini, kita bisa melakukan kendali style dengan mudah tanpa harus melakukan penggantian satu per satu di elemen yang terpasang di HTML. Untuk kasus yang sama, penulisan internal sebelumnya akan ditulis dengan penulisan eksternal.

Berkas HTML - index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  </head>
  <body>
    <div id="kotak"></div>
  </body>
</html>


Berkas CSS - style.css

body {
  background: #eee;
  margin: 0px;
  padding: 0px;
}
#kotak {
  background: #f00;
  width: 500px;
  height: 300px;
}


Semua gaya penulisan bisa kamu coba untuk menemukan kelebihan dan kekurangannya. Setiap gaya penulisan punya tempat sendiri sesuai dengan kasus yang kamu hadapi.

Selanjutnya: Membangun Website dengan CSS (Bagian 3)

Mungkin Kamu Juga Suka...

Comments

  1. iskael rasa enny tapi tulisan John :D

    ditunggu tutorial berikutnya

    ReplyDelete
    Replies
    1. wekeke, ini templatenya loh Iska yang bikin :P

      Delete
    2. harusnya komennya
      "ini yang nulis john, tapi yang balesin komen enny" :D

      Delete
  2. ini blog baru ya :) asyikkk aku ikutan belajar ya disini

    ReplyDelete
    Replies
    1. iya mba blog baru :)
      ayo belajar di sini tp blm diisi banyak nih, hehehe

      Delete
  3. waini.. tetep om..belum mudeng juga.he.he... masalah sperti ini..he.he.

    ReplyDelete
    Replies
    1. ya kan tidak harus dibaca sekali langsung paham :D

      Delete
  4. kalo bicara soal CSS..aku lempar handuk saja dech , nyerah :-)

    ReplyDelete
  5. Sering banget pake yang inline-style, soalnya males ngedit file style.css, hehe

    ReplyDelete
    Replies
    1. wekekek ... inline emang cara yang aman dan solutif :D

      Delete
  6. john ini bikinnya dimana? gedit? terus disimpan dalam format apa?

    ReplyDelete
    Replies
    1. iya, di gedit bisa
      save sesuai yang nama yang tertera di atasnya
      kalo yang .html di-save .html juga
      yang .css juga di-save .css yo :)

      Delete

Post a Comment