23 Apr 2013

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)

13 komentar:

  1. iskael rasa enny tapi tulisan John :D

    ditunggu tutorial berikutnya

    BalasHapus
    Balasan
    1. wekeke, ini templatenya loh Iska yang bikin :P

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

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

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

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

    BalasHapus
    Balasan
    1. ya kan tidak harus dibaca sekali langsung paham :D

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

    BalasHapus
    Balasan
    1. kalo aku ambil handuk om, lalu mandi :D

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

    BalasHapus
    Balasan
    1. wekekek ... inline emang cara yang aman dan solutif :D

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

    BalasHapus
    Balasan
    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 :)

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia