Dasar-Dasar CSS

Rumahbalai, Pengaturan dasar dasar CSS atau Cascading Style Sheet merupakan dasar-dasar dari pengaturan desain web, seperti  tata letak desain web ( layout) dan pengaturan huruf (style). Sementara dasar membuat laout sebuah web terdiri dari metode table dan div. 

Manfaat dari CSS:

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

• Static –> posisi normal (default).
  
• Relative –> posisi elemen tergantung dari elemen yang lain.
  
• Absolute –> posisi elemen berpatokan pada jendela browser.
  
• Fixed –> posisi elemen tetap walaupun digeser.
  

2. Float (Nempel)

Menggunakan properti float atau clear:

• Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  
• Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  
• Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  
• Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  
• Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
  

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS: