Update Terbaru
Loading...
Home » » Sekilas Tentang CSS pada Blog
Published On : Sabtu, 08 September 2012
02.34.00 | Admin | No Comments

Sekilas Tentang CSS pada Blog


Sekilas Tentang CSS - Naughtyric Blog
Sekilas Tentang CSS pada Blog - Bertemu di Pembelajaran Komputer dan Internet. Kalo kemarin pernah membahas mengenai HTML, posting sekarang akan membahas mengenai CSS. Ok tanpa panjang lebar disimak penjelasan berikut.

CSS, Cascading Style Sheet adalah suatu bahasa yang dikususkan untuk mengatur gaya layout pada sebuah halaman web. CSS digunakan oleh pembuat halaman web, untuk mendefinisikan warna, huruf layout dan aspek-aspek presentasi dokumen lainnya.

Selain HTML, suatu bentuk markup lainnya yakni XML, juga dapat memanfaatkan CSS untuk mengatur gaya tampilan yang diinginkan. CSS didefinisikan melalui kode-kode style sheet yang dapat disertakan pada file HTML itu sendiri, atau terpisah dari file dari file HTML. Jika terpisah maka file style sheet tersebut harus diberi ekstensi .css untuk menandai bahwa file tersebut adalah file CSS. Setelah itu, file CSS dapat direferensi oleh file HTML.

Hasil dari CSS biasanya akan terbaca berbeda jika menggunakan browser yang berbeda. Berikut bagian yang terdapt dalam CSS.

Variable definition
Variable definition adalah bagian-bagian yang akan mengatur tampilan halaman web atau blog, seperti warna web, jenis dan ukuran font, posisi sidebar dan lain sebagainya.

Berikut contoh penggunaan variable
<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">
Pada contoh diatas, artinya bahwa warna background halaman web adalah #ffff warna putih dan secara default berwarna #fff putih pula.

Background
Background adalah bagian yang akan mengatur halaman sebuah web atau blog. Background biasanya diikuti oleh kode warna atau URL sebuah gambar, dan pada bagian akhir gambar biasanya diikuti oleh beberapa keterangan.

Contoh kode CSS Background :
background: $bgcolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkO8x7a1nNHJXgfiiwIhVYmj3rvZt2dNGeZfrDLJxvppLc0X27mg_VT51QVZVdLd9iO97EGGlAAkyJUjo68ryoFD0TMix6sQeFy1NiqXu5MZrcHGtkMF_YusJdScE-PSARe8VFbNAL4svJ/s1600/JRS%2525252520Gbg2.jpg) top $startSide no-repeat fixed;
Keterangan tambahan di belakang URL gambar :
  • Top            : untuk posisi gambar diatas.
  • Bottom       : posisi gambar dibawah.
  • Left            : posisi gambar pada sebelah kiri, untuk blog biasanya digunakan kode $starSide, sobat tinggal pilih mau pakai yang mana.
  • Right          : posisi gambar disebelah kanan, untuk blog biasanya digunakan $endSide, tinggal pilih sesuai selera.
  • Fixed         : posisi gambar akan tetap, walaupun browser digeser ke atas dan ke bawah. Jika fixed tidak dipasang, gambar akan mengikuti browser.
  • Repeat-x    : gambar yang muncul akan terus berulang secara horizontal tak terhingga.
  • Repeat-y    : kebalikannya dari repeat-x, gambar akan muncul berulang secara vertikal tak terhingga.
  • No-repeat  : gambar yang muncul tidak akan berulang dan yang muncul hanya satu gambar.
Keterangan diatas bisa ditambahkan lebih dari satu, tergantung dengan selera. Untuk contoh diatas menggunakan keterangan "top $startSide no-repeat fixed", berarti posisi gambar akan muncul berada diatas sebelah kiri tanpa pengulangan walaupun browser digerakkan ke atas dan ke bawah.

Width
Width adalah istilah untuk mengatur lebar bagian-bagian pada web atau blog.

Contoh kode Width :
#sidebar-wrapper {
width : 302px;
float : $endSide;
word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
Arti kode diatas adalah "lebar dari sidebar blog 302px"

Height
Kebalikan dari width, Height untuk mengatur tinggi bagian-bagian pada web atau blog.

Margin
Margin adalah kode untuk mengatur batas jarak objek yang ada diluar objek tertentu, misalnya jarak antara header blog dengan batas atas, bawah, kiri, kanan browser dan juga jarak sidebar dengan halaman posting.

Keterangan tambahan untuk Margin :
  • Margin-top             : mengatur jarak batas bagian atas
  • Margin-bottom       : mengatur jarak batas bagian bawah
  • Margin-$startSide : mengatur jarak batas bagian kiri
  • Margin-$endSide   : mengatur jarak batas bagian kanan

Contoh kode Margin :
Margin-top : 0;
Margin-bottom : 0;
Margin-$startSide : 10px;
Margin-$endSide : 300px;
atau keterangan diatas dapat disingkat menjadi :
Margin : 0 0 10px 300px;
urutan margin diatas disingkat searah dengan arah jarum jam.

Padding
Padding hampir sama fungsinya dengan Margin yakni untuk mengatur jarak, namun padding mengatur jarak antara objek yang berada dibagian dalam objek tertentu.

Float
Float adalah istilah yang digunakan untuk mengatur letak/posisi blog. misalnya untuk mengatur letak sidebar disebelah kiri maupun disebelah kanan.
Pada contoh kode Width diatas untuk mengatur seidebar di posisi sebelah kanan.

Color
Sesuai dengan namanya, tentu bagian ini untuk mengatur warna pada halaman web atau blog. Color bisa berada pada bagian header blog, post title, post blog, sidebar dan lain sebagainya. Untuk mengatur warna bisa menggunakan Tools HTML Color Code.

Font
Font adalah bagian untuk mengatur jenis huruf dan ukuran pada blog. Font juga bisa berada di bagian header blog, post title, post blog, sidebar dan lain sebagainya.

Text
Bagian ini akan mengatur secara keseluruhan dari paragraf pada blog. Text biasanya diikuti oleh beberapa keterangan, seperti :
text-align          : mengatur apakah post blog rata kiri, kanan atau rata tengah.
text-decoration : mengatur hiasan pada tulisan blog, misalnya text tebal, miring dan garis bawah.
text-transform  : mengatur apakah tulisan pada blog huruf besar semua atau huruf kecil.

Contoh kode Text :
#footer {
width : 660px;
clear : both;
margin: 0 auto;
padding-top:15px;
text-transform : uppercase;
text-align : center;
}
Arti dari kode diatas adalah bahwa semua tulisan yang berada di posisi footer akan memakai huruf besar dan posisinya di tengah.

Link
Link atau hubungan, fungsinya adalah untuk menghubungkan halaman-halaman pada blog menuju ke link yang dituju.

Bentuk Link ada 3 yakni :
1. a:link
Maksudnya adalah bentuk atau warna link yang secara default terlihat di halaman blog ketika terbuka pertama kali.

2. a:hover
Bentuk warna link ketikan mouse diarahkan pada link tersebut, biasanya link tersebut warnanya akan berubah atau bergaris bawah. Untuk mengatur warna dan menghilangkan garis bawah saat mouse diarahkan pada link maka ubahlah kode text-decoration:underline menjadi :
a : hover
color : $titlecolor;
text-decoration : none;
}
3. a:visited
Warna link setelah link tersebut di klik atau sudah dikunjungi.

nb : tambahan dari sobat Adi Nugraha untuk link yakni
a:active = link yang sedang dikunjungi
Bagaimana sobat sudah mengerti sedikit Sekilas Tentang CSS, j


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top