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.
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.
Width
Width adalah istilah untuk mengatur lebar bagian-bagian pada web atau blog.
Contoh kode Width :
#sidebar-wrapper {Arti kode diatas adalah "lebar dari sidebar blog 302px"
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 */
}
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;atau keterangan diatas dapat disingkat menjadi :
Margin-bottom : 0;
Margin-$startSide : 10px;
Margin-$endSide : 300px;
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 {Arti dari kode diatas adalah bahwa semua tulisan yang berada di posisi footer akan memakai huruf besar dan posisinya di tengah.
width : 660px;
clear : both;
margin: 0 auto;
padding-top:15px;
text-transform : uppercase;
text-align : center;
}
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 : hover3. a:visited
color : $titlecolor;
text-decoration : none;
}
Warna link setelah link tersebut di klik atau sudah dikunjungi.
nb : tambahan dari sobat Adi Nugraha untuk link yakni
a:active = link yang sedang dikunjungiBagaimana sobat sudah mengerti sedikit Sekilas Tentang CSS, j
0 komentar:
Posting Komentar