| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Bab I : Perkenalan CSS


Awal dari materi CSS akan saya mulai dengan pengenalan CSS, baik itu pengertiannya ataupun contohnya

 CSS sangat penting dalam mendesain web tidak terkecuali blog karena dengan CSS blog akan lebih tertata rapih, maka dari itu sebagai pendesain web atau blogger, kita harus mempelajari CSS

Menurut saya: CSS atau sering dijelaskan dengan arti Cascading Style Sheet, yaitu sebuah bahasa pemrograman (web) yang fungsinya untuk menstrukturkan komponen-komponen sebuah web (terutama html karena kita berada di luang lingkup blogger) agar lebih terstruktur dan beragam sesuai keinginan kita.

Nah setelah membaca paragraf diatas kalian tahu fungsi dari css yang biasanya digunakan para blogger intuk mengedit templatenya (tampilan webnya), jika sudah tahu penjelasannya. Mari kita lihat contoh dari css :

#background{
    height:464px;
    position:absolute;
    width:100%;
    background:url('http://3.bp.blogspot.com/-Al8z57uQjzI/TlQoh-yjxkI/AAAAAAAABQw/AKWZFZNrkto/s000/f-background-bg.png') repeat top center;
    z-index:0;
}
#background-width {
        height: 88.58%;
        margin: 53px auto 0;
        position: relative;
        width: 980px;
}
.lines{
    background:url('http://1.bp.blogspot.com/-kvFB7e3biK0/TlQoiPBA6uI/AAAAAAAABQ0/P9vx_rrLHMk/s000/f-lines-bg.png') repeat-y;
    width:2px;
    height:100%;
    position:absolute;
}
Note: css bisa saja tertulis horizontal, tidak seperti diatas yang cenderung vertikal. Tidak ada yang membedakannya sama saja, hanya tujuannya saja vertikal bertujuan agar dalam mengedit mudah karena setiap bagian declarations di pisah, adapun yang horizontal agar tidak menghabiskan tempat (efisien).

Contoh diatas merupakan bentuk css untuk id background, background-width dan kelas (class) lines
Untuk mencoba melihat bagian id atau kelasnya bisa coba cek id (contoh: <div id='background' atau yang lain dan class <div id='background' )

Note: cara di atas tidak dapat di gunakan pada semua template, karena penkode-an template akan berbeda-beda.

Sekarang kalian sudah tahu pengertian dari css serta contohnya, sekarang kalian bisa membedakan antara css dan bahasa pemrograman web lain (html, php dll) yang lain.

Perlu diingat CSS dibagi menjadi dua ada selector dan declarations,  dan dalam declarations sendiri dibagi menjadi dua yaitu property dan value (nilai).


#background{
    height:464px;
    position:absolute;
    width:100%;
    background:url('http://3.bp.blogspot.com/-Al8z57uQjzI/TlQoh-yjxkI/AAAAAAAABQw/AKWZFZNrkto/s000/f-background-bg.png') repeat top center;
    z-index:0;
}
#Keterangan :
selector dan declarations
selector yaitu bagian dari bagian web (html), yang akan di modifikasi.
declarations yaitu nilai dari modifikasi selector, coba lihat width:880 px artinya selector id dari page-wrap diatur lebarnya menjadi 880px

#background{
    height:464px;
    position:absolute;
    width:100%;
    background:url('http://3.bp.blogspot.com/-Al8z57uQjzI/TlQoh-yjxkI/AAAAAAAABQw/AKWZFZNrkto/s000/f-background-bg.png') repeat top center;
    z-index:0;
}

#Keterangan
property dan value
property yaitu perintah untuk mengatur si selector tadi yang terletak di declarations, contohnya: height diatas berarti perintah pengatur tinggi dari css id bacground.
value yaitu nilai dari property contohnya diatas 464px, position:absolute, width menjelaskan nilai dari property height

CSS biasanya diletakan <head> ... </head> yang diawali dengan <style type="text/css"> dan di akhiri dengan </style> diantara kedua tag itulah kode css biasanya diletakan.

Perlu diingat lagi jika kalian sudah mahir html tentu saja akan mudah dalam mempelajari css, karena antara css dan html tidak ada perbedaan yang terlalu besar misalnya :

1. HTML
<div class='post'>
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;"> .... </div>
maka untuk css :
2. CSS
.post {
background: #9fc5e8;
border: 2px solid black;
margin: 0pt 50px;
padding: 5px;
}
Dan satu lagi jangan lupa ; untuk memisahkan setiap bagian declarations

| Bab II : Belajar CSS bagian 1 ( background ) | Tahap Selanjutnya

3 komentar:

  1. wah, terima kasih pelajarannya..saya mulai belajar nih tentang CSS (Y)

    BalasHapus
  2. @Author: oke semoga bermanfaat ilmunya

    BalasHapus
  3. matap kk sangat bermanfaat , sya jg ingin nih belajar CSS terutama buat editing header , ada tutornya gak?

    BalasHapus

Share entri ini :