Dasar-dasar CSS #4

Sudah lama kita tidak membahas dasar-dasar CSS, untuk seri sebelumnya silakan lihat:
Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Nah, kali ini kita akan membahas tentang CSS untuk layout.

Sintaks-sintaks CSS untuk layout diantaranya:

1. background: Untuk mengeset background. Ada beberapa sintak untuk background, yaitu:

a. background-color: yaitu warna background.
b. background-image:url('URLGAMBAR.jpg'); yaitu URL gambar yang dijadikan background.
c. background-repeat: bernilai "repeat", "repeat-x", "repeat-y", dan "no-repeat". Maksudnya adalah pengulangan gambar. "repeat" artinya gambar akan diulang, memenuhi layar. "repeat-x" artinya gambar akan diulang sepanjang horizontal, "repeat-y" gambar akan diulang secara vertikal, sedangkan "no-repeat" artinya gambar hanya ditampilkan 1x, tidak akan diulang.
d. background-position: nilainya "nilaihorizontal nilaivertikal". Maksudnya adalah posisi latarbelakang dari layer (bagian div/span/element yang diberi latar). Misal: body{background-position:10px 30px} maka latar belakang dari bagian body akan diberi jarak 10 piksel antara batas pinggir kiri body dan 30piksel dari batas pinggir atas body. Anda juga bisa mengisinya dengan "top" "middle" "bottom" untuk nilaihorizontal, dan "left" "center" "right" untuk nilaivertikal (pilih salah satu).
e. background-attachment: Nilainya "fixed" dan "scroll". "fixed" artinya tampilan gambar latar belakang akan tetap sepanjang anda meng-scroll mouse anda.Sedangkan "scroll" kebalikannya.

2. width: Nilainya berupa nilai dalam piksel atau "auto". Untuk menentukan lebar elemen.
3. height: Idem dengan width bedanya height untuk menentukan tinggi elemen.
4. margin: Batas antara suatu element dengan elemen diluarnya. Nilainya bisa berupa auto atau nilai dalam piksel. Sintaksnya begini: margin:marginatas marginkanan marginbawah marginkiri. Atau jika nilai semua margin sama langsung saja margin: nilaimargin.
5. padding: Batas antara suatu batas (border) element dengan unsur element didalam element tersebut. Sintaksnya begini: padding:paddingatas paddingkanan paddingbawah paddingkiri. Atau jika nilai semua margin sama langsung saja padding: nilaimargin.
6. border: ada 3 unsur untuk border yaitu:

a. border-width: lebar dari border
b. border-color: warna dari border
c. border-style: gaya dari border, nilainya "solid" (biasa) "double" (dobel/dua garis) "groove" (groove) "inset" (menjorok kedalam) "outset" (menjorok keluar) "dotted" (bertitik-titik) "dashed" (bergaris-garis)

Jika ingin menspesifikkan dari suatu sisi, maka langsung: border-bottom: gayaborder lebarborder warnaborder (misal: border-bottom:solid 1px black jgn diputer2 ye... (fish_hit)) *border-bottom untuk bagian bawah, sedangkan border-top bagian atas, border-left bagian kiri dan border-right bagian kanan.
7. position: posisi, nilainya "fixed" (tetap, akan melayang terus selama anda menscroll halaman, belum didukung IE (tongue)), "static" (diam, posisi default), "relative" (tergantung objek disekitarnya), "absolute" (dihitung dari pojok kiri atas layar, hampir sama seperti fixed, tetapi tidak akan ikut melayang ketika kita men-scroll mouse) . Setelah menentukan jenis posisi, kita harus menentukan:

a. pilih (top: atau bottom: jika pilih top artinya dihitung dari atas, sedangkan bottom sebaliknya)
b. pilih (left: atau right:. jika pilih left nilai akan dihitung dari kiri, sedangkan right sebaliknya.

8. z-index: z-index adalah posisi suatu elemen dari dasar dokumen, jika tidak diset maka defaultnya 0. Misalnya ada 3 buah buku ditumpuk, maka buku terbawah mempunyai z-index 0, buku ke2 daribawah:1, dan buku teratas:2.
9. visibility: nilainya hanya 2, yaitu "visible" dan "hidden". Visible artinya kelihatan, kalo hidden ya artinya tersembunyi! (ninja)
10. display: nilainya "none" "inline" "block". Jika none maka tidak akan ditampilkan, inline ditampilkan dalam sebaris (biasanya untuk navigasi menu horizontal) dan block akan ditampilkan secara perbaris. Untuk display "none" dan visibility "hidden" perbedaannya adalah, untuk display "none" elemen didalamnya tidak akan ditampilkan, sedangkan visibility "hidden" akan tetap ada ruang untuk elemen tersebut, namun elemennya disembunyikan.

Supaya lebih jelas, silakan bikin file ini dengan notepad lalu simpan dengan nama belajarCSSpart4.html!

<html>
<head>
<title>Belajar CSS - Part 4</title>
<style type="text/css">
<!--
#left{
background:green;
color:#ccc;
float:left;
width:150px;
height:200px;
margin:10px;
padding:20px;
border-color:black;
border-width:3px;
border-style:inset;
}
#right{
background:green;
color:white;
float:right;
width:300px;
height:auto;
margin-right:10px;
border-bottom-width:10px;
border-bottom-color:purple;
border-bottom-style:solid;
}
#piksed{
position:fixed;
top:10px;
left:250px;
background:green;
color:black;
z-index:10;
width:100px;
}
#footer{
clear:both;
font-family:Arial, Tahoma, Verdana;
text-align:center;
}
#hidden{
visibility:hidden;
}
#none{
display:none;
}
-->
</style>
</head>
<body>
<div id="left">
Ini bagian sidebar, bisa diisi dengan apasaja.<br/><br/>
<a href="#">Home</a><br/>
<a href="#">About</a><br/>
<a href="#">Contact</a><br/>
<a href="#">Sitemap</a><br/><br/>
Tetap aje pjgnya 200px meski kontennya bejibun! bejibun! bejibun! bejibun! bejibun isinye!

</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="footer">
Belajar CSS - Part 4 | by Muhammad Rizki Fadillah
</div>
<div id="piksed">
Ini bagian fixed...<br/><br/>
Hebat kan, bisa melayang...
</div>
Ada apa ini? <span id="hidden">
Anda-anda pada nggak bakal bisa ngeliat teks ini!
</span> Betul?<br/><br/>
Ada yang tersembunyi? <span id="none">MEMANG BETUL ADA YANG TERSEMBUNYI DISINI! </span>Betulkan?
</body>
</html>

Jika file tersebut dieksekusi, maka hasilnya kira-kira akan seperti berikut.

Dasar-dasar CSS edisi 4 selesai sampai disini. Eits! (nottalking) masih ada 1 edisi lagi, jadi tunggu saja!

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya