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; }
#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.
Beberapa Cara Memanggil CSS ke dalam HTML
Pada dasarnya untuk memanggil file CSS ini ada 3 cara:
1. Membuat File CSS terpisah dengan HTML
2. Menyisipkan perintah CSS diantara <head></head>
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML.
1. Membuat File CSS terpisah dengan HTML.
Untuk membuat file CSS terpisah dengan HTML, Anda bisa membuat file dengan format .CSS dan setelah itu memanggil file Anda dalam HTML. Sebagai contoh, saya akan membuat file yang akan saya beri namastyle.css,seperti ini:
h1{color:white; letter-spacing:-1px; margin:0; text-align:left; font:42px verdana;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px; font: 22px verdana;}
img{border: 0px;}
blockquote {background-color: #666; color: white; font-style: italic; text-align: left; width: 300px; margin: 10px auto;}
code {color: #444;font: verdana, monospace;background-color: #f4f4f4;font-size: 1.2em;}Dan untuk perintah pemanggilnya di HTML begini:
<link href="style.css" rel="stylesheet" type="text/css">Dengan membuat demikian, maka file-file Anda akan simple, dan mudah kalau dilakukan pengeditan ulang.
2.Menyisipkan perintah CSS diantara <head></head>
Untuk bagian ini akan banyak Anda temui pada template-template blogger, seperti ini contoh perintahnya
<style>a:hover {
text-decoration: none;
color: blue;
font-size: 16px;}
</style> Keuntungan bagian ini, Anda tidak perlu membuat 2 file, cukup 1 file dalam HTML, tetapi kelemahannya, jika file CSS Anda terlalu panjang dan Anda ingin mengadakan pengeditan, maka siap-siap saja pusing melihat perintah yang bertaburan...hehehehe
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML
Yang saya maksudkan pada bagian ini adalah perintah CSS nanti akan langsung dimasukkan dalam perintah HTML, sebagai contoh adalah demikian, saya memakai contoh jika saya mau memberikan style pada perintah HTML <blocknote>, seperti ini;
<blockquote style="font-color: white; font-size:12px;">Ini Adalah perintah <code><blocquote>...</blockquote></code></blockquote>Mungkin sampai disini dulu, Anda bisa mencoba-coba sendiri pada file HTML Anda, seperti pembahasan kemarin tentang Penerapan HTML.
Penggunaan Perintah Background di dalam CSS
Categories: CSS
Sebenarnya perintah background ini terdiri dari perintah-perintah sebagai berikut:
1. Background
Perintah ini pada dasarnya adalah keseluruhan perintah yang memungkinkan didalamnya akan berisi perintah-perintah background-color, background-image, background-attachment, background-repeat, dan background-position. Sebagai contoh adalah sebagai berikut:
contoh{ background: background: red url(image.gif) no-repeat fixed left top;}2. Background-color
Perintah ini berfungsi untuk memberikan warna pada latar belakang. Sebagai contoh:
contoh{background-color:red;}3. Background-image
Perintah ini akan memberikan tampilan gambar yang diambil dari URL. Sebagai contoh:
contoh{background-image: url(image.jpg);}4. Background-attachment
Perintah ini akan mengatur apakah tampilan background-image mengikuti dokumen(scroll) atau dokumen yang mengikuti background-image(fixed). Sebagai Contoh:
contoh{background-attachment: fixed;}5. Background-repeat
Perintah ini akan mengatur apakah perintah background-image diulang atau tidak, kalau diulang maka di ulang ke arah mana. Perintah ini terdiri dari 4 jenis:
- x = dengan perintah ini, maka background akan diulang kearah sumbu x.
- y = dengan perintah ini, maka background akan diulang kearah sumbu y.
- no-repeat = dengan perintah ini, maka background tidak akan diulang.
contoh{ background-repeat: repeat-x;},
contoh{ background-repeat: repeat-y;}atau
contoh{ background-repeat: no-repeat;}6. Background-position
Perintah ini akan mengatur posisi dari background-image yang akan menyebabkan gambar diulang dalam kedua arah (x dan y) sepanjang ditentukan sumbu. Sebagai contoh:
contoh{ background-position: x y;} » contoh{ background-position: right bottom;}Semoga pembahasan saya kali ini bisa menambah wawasan Anda mengenai CSS, kritik, saran, dan dukungan tetap diperlukan demi kemajuan blog ini. Sampai jumpa lagi pada pembahasan selanjutnya
saya cuma mau macam-macam perintahnya seperti salahsatunya daun berjatuhan
BalasHapus