Kelas : XII AP1
No Absen : 09
CSS adalah kepanjangan dari Cassading Style Sheet. Kode CSS ini hampir terdapat di seluruh bagian template blog anda. Adapun fungsi dari CSS adalah untuk mempercantik sebuah halaman web, termasuk blog. CSS dapat bekerja secara maksimal jika tidak ada kesalahan dalam mengedit atau menambahkan kode CSS kedalam template blog Anda. Jika tedapat kesalahan, baik dalam menambahkan atau mengedit tampilan blog, maka dapat dipastikan blog anda akan menjadi berantakan. Sebenarnya, untuk menjadikan blog anda indah dan cantik, Anda tidak perlu mendalami pengetahuan kode CSS karena kode CSS ini akan bekerja maksimal dengan sistem kode yang disebut mark up language, seperti kode HTML, XHTML, dan XML. Namun, mempelajari dasar-dasar kode CSS dapat membantu Anda dalam mengedit template blog sehingga terlihat cantik dan menarik. Pengetahuan dasar tentang kode CSS akan membantu Anda nantinya, dalam mempelajari dan mempraktikkan bab-bab selanjutnya. Kode CSS tidak jauh berbeda dengan kode HTML. Perintah dasar dari kode CSS hampir sama dengan kode HTML yang diawali dengan kode pembuka dan kode penutup. Jika tidak, template tidak dapat di-parse atau disimpan pada halaman blog anda. ciri dari kode CSS adalah dapat ditambahkan atau digunakan langsung untuk mengedit dari template blog anda. Kode-kode CSS biasanya meliputi warna dan aksesori yang ada di halaman blog Anda. Misalnya, jika anda ingin menuliskan tulisan "blog pertamaku" dengan warna merah, maka kode yang membuat warna merah itulah yang disebut dengan CSS. Sebagai contoh, jika saya menuliskan kode warna merah dengan kalimat ""membuat blog pertamaku" pada posting, maka kodenya adalah sebagai berikut: membuat blog pertamaku pada kode diatas, terdapat yang dipertebal, yaitu color:rgb(255, 0, 0); font-weight: bold; kode inilah yang dinamakan dengan kode CSS. Adapun fungsi dari kode tersebut adalah untuk mempertebal dan memberikan warna merah pada kalimat "membuat blog pertamaku". kode warna merah dapat juga diwakilkan dengan cara menuliskan tanda# dan kode warna. Misal, jika warna yang akan digunakan adalah warna putih, maka kode CSS untuk warna putih adalah sebagai berikut, #FFFFFF. Untuk warna hitam, kodenya adalah #000000, dan seterusnya. Biasanya, di dalam template blog, kode CSS diawali dengan kode {dan kode penutup} yang biasa disebut container code CSS karena diantara kode tersebut terdapat kombinasi kode CSS. Contoh kode CSS yang ada di template blogger pada menu Main (tempat posting)) adalah sebagai berikut:
#main {
margin: 0 0 10px;
width: 480px;
float:right;
padding:0 9px 12px 9px;
border:1px
dotted #900;
color:#ffffff; }
Keterangan:
Border : garis yang ada di sekeliling sidebar atau main
Color : warna
Dotted : garis titik-titik pada border
Float : letak penempatan, baik di kanan atau di kiri
Margin : jarak batas dari main atau sidebar
Padding : jarak tepi isi sidebar atau main
Px : ukuran pixel
Width : lebar dari area sidebar atau main.
CSS
Lalu apa itu CSS?
Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu
halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai
bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik
tampilan / desain suatu halaman HTML.
Ciri-ciri script / perintah CSS
- Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.
Contoh:
<head>
<style>
</style>
<head>
- Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.
- Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
- Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "header-wrapper".
Contoh kode CSS
- Background
- CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
- Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
- Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini
- Color
- CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}
- Width
- CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};
- Height
- CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}
- Border
- CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000}
- Dan lain sebagainya
Tidak ada komentar:
Posting Komentar