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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbPw9NlOWPD8yQ6fwqJNdNPN0j3rXxi_Hf6padpIwqWrVgUB2nPejqY06MdzYqTBdPO7gOP6mFD_15x3IIFf8mtjMm4bobaVEb8IOwg21yHIjkNEy6-0cDk55vQUsWPVZM5F0oFzTaD1K/s0/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJF9xgPXXB-MM5Nk_kIHEZlObzOvdXq06s-XivWBXnUbfxzRsJzyPEIGEPSQ_J83-QtXA_vjlxOKodhzePxho2stxel_EXA6x6kHzOapkryf3Rcna9y31zFUIyYL1JRte6CcBWA4EG4aSD/s0/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).

}
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbPw9NlOWPD8yQ6fwqJNdNPN0j3rXxi_Hf6padpIwqWrVgUB2nPejqY06MdzYqTBdPO7gOP6mFD_15x3IIFf8mtjMm4bobaVEb8IOwg21yHIjkNEy6-0cDk55vQUsWPVZM5F0oFzTaD1K/s0/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

Farkryzer