Setelah mengetahui cara membuat wap/web di hosting gratis xtgem, sekarang saat nya mempercantik situs dengan warna, melengkapi dasar nya dengan sebuah div, dan menyisipkan gambar, membuat tampilan sederhana menjadi inspiratif.
Pertanyaan nya adalah
Apa itu CSS??
Adalah Cascading Style Sheet, tempat pengelompokan berbagai karakter element sebuah div style class atau div style id.
banyak orang ber pendapat bahwa ini tidak mudah, sulit, dan yang paling di benci orang, karena pembuatanya yang harus menggunakan akal yaitu berpikir.
Tapi mari kita eksekusi
Dalam tampilan web/wap, kita tidak akan pernah lepas dengan yang namanya penampilan, dalam strukturnya web/wap meletakan perangkat warna di dalam body
Maka yang pertama kita buat adalah bentuk body, lalu berlanjut ke semua unsur div, mulai yang berbentuk class element atau id element
Pertama
Buat dulu sebuah file baru (nama terserah), disini saya beri nama style.css, peletakanya terserah anda apakah ingin berada di folder atau di root.
Kedua
buat lah nama-nama untuk element (terserah) untuk div dan style nya, saya akan membantu anda dengan menyebutkan bahasa yang terdapat di dalam beserta fungsi nya saja.
warnai body dengan selera anda
Contoh:
body {
color: #CCCCCC;
( menentukan warna tulisan )
font-size : 16px;
( menentukan ukuran tulisan )
background-color : #000;
( menentukan warna dasar )
font-family : Tahoma;
( model text dalam penulisan )
margin : 0;
( jarak garis div dengan garis pinggir )
padding : 0;
( jarak tulisan dengan tulisan lainya )
max-width: 640px;
( Besar ukuran lebar maximal web/wap )
}
Lalu buatlah sebuah div sebagai tahap panyempurna tampilan, letakan di atas warna dasar nanti nya, misalkan yang pertama div yang kita buat adalah "head", maka buatlah
Contoh:
.head
( Tanda titik sebagai penentu element CLASS, bila element berupa ID maka menggunakan tanda # )
Masukan inti div sebagai isi dari div class/id tadi di dalam sebuah tanda kurung { }
{
margin: 1px;
( jarak pinggir )
background-image : url(http://URL GAMBAR);
( gambar dasar dalam div )
color : #a9a9a9;
( warna tulisan )
text-shadow : #000000 1px 1px 2px;
( bayang-bayang tulisan )
background-color : #0a0a0a;
( warna dasar div )
background-repeat : repeat-x;
( bertujuan untuk menjajarkan gambar dasar div agar selaras sesuai arah yang diambil
X = arah kanan - kiri
Y = atas ke bawah )
background-position : 50% top;
( mentukan posisi gambar dasar div )
margin-bottom : 1px;
( bottom adalah jarak bawah saja )
padding : 2px;
( jarak tulisan dengan garis )
border : 1px solid #333333;
( menunjukan garis div yang lurus )
}
Dengan tambahan ini kita sudah bisa membuat sebuah tampilan kotak div di atas dasar body.
Lalu simpan dan panggil fungsi div dengan javascript
<link type="text/css" rel="stylesheet" href="http://nama situs kamu/style.css"/>
Bila imgin menampilkan media, bisa anda tambahkan menjadi:
<link type="text/css" rel="stylesheet" href="http://nama situs kamu/style.css" media=""/>
Dalam media ada 2 macam:
1.media="all,handhled"
( bila di lihat dari handphone dan komputer nilai element div style akan sama )
2.media="screen"
( bila menggunakan handphone element div akan mengecil dan fungsi sedikit berkurang menyesuaikan dengan media handphone tersebut, bila dengan versi komputer akan lebih sempurna )
Letakan ini pada setiap header web/wap, lalu panggil fungsi div dengan
<div class="head"> alamat URL/kata-kata semaumu
Lalu jangan lupa menutup div tersebut dengan </div>
Begitulah pengetahuan dasar dari CSS yang bikin bingung silahkan otak-atik sendiri dan kembangkan.