Makalah Biologi tentang Tumbuhan Mangrove dan Tanaman Hias

          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/AVvXsEjYuN_c58R0w1g4SxggM7noEAv1OWRlDZ3OAj9EW5t_B2OQAKeDHzafUUyYFlBkMg4ey-wmfAjqjV5qK9pOwFY8LcWfSqbAc8thWWDmpwvkFt4zPbudiZ7SJa3A8bG-bl6iAPA0Bm-9A2SQ/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.