CSS singkatan dari Cascading Style Sheet, merupakan kode untuk mengatur tampilan halaman. Untuk mengatur jenis huruf, warna, ketebalan, bisa langusng menggunakan TAG HTML, namun dalam perkembangannya menjadi rumit kalau menyangkut desain yang banyak, kalau mau mengedit, maka tiap halaman harus di edit satu-satu.
Dengan CSS kita tinggal masuk ke script CSS nya lalu mengganti bagian mana yang akan diganti. Karena dalam CSS semua sudah dikelompokkan dalam ID atau Class tertentu, maka menjadi mudah manajemen halamnnnya.
CSS ada yang merupakan file terpisah, CSS external, yang kemudian di link ke halaman HTML. Satu file CSS bisa dipakai untuk banyak halaman dengan style sama. Pemisahan halaman HTML dengan CSS akan memudahkan dalam pengeditan. Namun hal ini membutuhkan hosting untuk menyimpan file. Keuntungan lainnya, dengan memisahkan file css, tak mudah ditiru orang hanya dengan melihat source codenya. Untuk untuk membuat CSS external, buatlah file dengan extensi *.css.
Misalnya: File: latihan1.cssbody{bground-color:#red}
kemudian buat file html, misalnya dengan nama latihan1.html
cara menyisipkan kode CSS yaitu dengan koneksi link css: Sisipkan diantara tag ... kode
sebagai berikut:
Ada juga CSS yang menjadi bagian dari halaman, CSS internal, seperti dalam halaman Blogger saya. Kelebihannya, tak membutuhkan hosting kkhusus untuk menyimpan file css nya. Ini merupakan solusi untuk blog seperti Bloger, wordpress yang hanya menyediakan halaman jadi, tidak menyediakan hosting file.
Cara membuat CSS internal.
Letak script CSS berada pada tag ...Diawali dengan >
Tag CSS: selector {properties:value;}
Contoh:body {bground-color:#ffffff;}
akan menghasilkan latar belakang putih.img {border:1px solid}
akan menghasilkan, setiap tag .display img {border:0;}
gambar yang dimasukkanke class .display tidak ada garisnya. Class selector Dalam CSS tiap-tiap bagian bisa dibagi-bagi dalam class yang berbeda sehingga memudahkan dalam pengeditan. Misalnya kita akan membedakan jenis huruf, ukuran, warha untuk tanggal, judul tulisan, dan isi tulisan. Kita buat tiga class dengan nama "tanggal", "judul", "isi".tanggal {font-family:verdana, arial, Helvetica;font-size:10 px;color:#green;}
penggunaanya: 12 Juni 2007
menghasilkan: 12 Juni 27, font verdana, ukuran font 10px,
warna hijau..judul {font-family:verdana, arial, Helvetica;font-size:12 px;color:#red;text-transform:uppercase;}
tampilan: font verdana, ukuran font 12px, warna: merah,
huruf besar semua (uppercase)..isi {font-family:Georgia,
"times new roman", arial;font-size:12 px;color:#000000;}
tampilan: font Georgia (cirikhas wordpress, juga
template minima-nya blogger), ukuran font 12px, warna hitam.
.navibar { Link adalah sebuah text yang terhubung ke halaman atau url tertentu. dalam blog, link sangat penting, karena ini salah satu penilaian dari search engine dalam menentukan rating blog kita. Bagimana mmebuat link? mudah saja. sebuah link terdiri dari tag: a .sidebar li a:visited Anda ingin menambahkan image atau gambar di header blog? contoh: mengatur jenis/ type list:.kolomisi {padding:10px 5px 10px 10px;}
artinya:
kalau kolom
diberi style .kolomisi akan terformat dengan Padding atas:10px, padding
kanan:5px, padding bawah: 10px, dan padding kiri: 10px.
Sebuah halaman tentu akan terlihat bagus, canggih, dengan tampilan yang lain dari sekedar tampilan HTML standar. Membuat karya lain dari yang lain, sesuai dengan pribadi dan seleranya mungkin menjadi keinginan sebagian orang. Juga untuk navigasi (navigasi bar), bisa modelnya, warnanya, besarnya, dan lain-lain.
Kita akan membuat sebuah navibar horisontal sedergana, nanti tergantung pada masing-masing untuk menambah dengan variasi sesuai selera masing-masing.(personal sense).
untuk membuatnya, pertama kali kita harus membuat style untuk navibar:
PADDING-TOP: 10px;padding-right:0px; padding-bottom: 10px;
padding-left:10px;
margin-left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
background-color:green;
}
style di atas akan kita gunakan untuk memformat div navibar. untuk membuat tampilan link horisontal kita akan menggunakan list Kode list.....
kita akan meletakkan list di atas di dalam div navibar:kita perlu mengatur style untuk ul.navibar ul /*karena terletak di dalam div navibar)*/{margin:0;padding:0;}.navibar li {display:inline;margin-left:2px;}.navibar a {border:1px solid #ffffff;padding:9px 5px 9px 5px;COLOR:#003366;text-decoration:none;}.navibar a:visited{color: green;}.navibar a:hover {padding:9px 5px 9px 5px;COLOR:#FFFF33;background-color:#003366;}tampilannya akan seperti ini
nama linkurl di sini bisa url relative maupun url absolut, permanen link. url
ralatif menuntunt ke halaman yang masih satu server, atau dalam satu komputer.misalnya: Indexlink absolut, selalu akan menuju alamat tersebut walaupun yang mengakses
beda komputer, karena ditulis lengkap.contoh: http://www.bloganda.com">Link Ke blogandaProperty Link
warna untuk link:
secara default, setiap link akan diwarnai dengan warna biru, garis bawah. untuk mensetting warna link sesuai dengan warna favorit, atau menyesuaikan dengan warna halaman, maka berikut ini langkahnya: dalam style, buat atau edit link (a)
{ color: red; /*warna link merah*/
text-decoration:none;/*tanpa garis bawah*/
}warna untuk link yang telah dikunjungi: a:visited
a:visited
{
color:blue; /*warna text biru*/warna untuk link hover
ketika mouse, kursor, melewati sebuah link, biasanya kursor berubah menjadi gambar tangan, pada saat itu akan terjadi perubahan warna pada link. untuk mensetting warna dan property linknya, adalah sebagai berikut:
a:hover
{ color:green; /*warna link saat kursor melewati link */
}
tersedia juga banyak property:
misal:
border-bottom:1px dotted #ffffff;/* garis bawah sebesar 1 piksel putus-putus, warna putih*./ atau
{ border-bottom:1px solid;
border-bottom-color:#ffffff; /*warna putih*/
}
Yang perlu diperhatikan, jangan salah urutan
penempatannya, urutan yang benar:
a, a:visited, a:hover
a {....}
a:visited {...}
a:hover {...}
Navigasi horizontal sudah, kali ini saya akan memberikan contoh membuat navigasi vertikal, yang bisa dipasang di sidebar anda. Konsep dasarnya adalah list html. Seperti kalau di ms word kita tahu numbered list, yang bisa memakai angka atau huruf, bisa juga juga memakai bullet. (Bullet and Numbering). langsung saja. Buatlah elemen div dengan kelas sidebar
.sidebar
{
padding:0;
width:100px;
text-align:right;
}
ini akan menjadi tempat kita meletakkan elemen list, yang kalau di ms word kita sebut bullet and numbering. div sidebar di atas kita setting dengan padding:0 artinya, jarak alemen atau font yang berada di dalam div tersebut 0, (mepet pinggir).
Kemudian widt:100px; lebar elemenkita set 100 pixel, ini bisa kita ubah sesuai dengan lebar sidebar kita. atau tak usah diberi property ini kalau berada dalam elemen lain yang sudah ditentukan width-nya. Misalnya berada salam kolom table atau #div dengan fixed width, lebar yang ditentukan. text-align:right, text rata kanan.
mulai dengan list:
.sidebar ul
{
margin:0;
padding:0;
}
ul = unordered list;
kita tulis .sidebar ul karena nanti kita akan memasang
elemen ul dalam div dengan class sideba.
.sidebar li
{
font-family:georgia,tahoma, Verdana, Arial, Helvetica,
sans-serif;
font-size:12px;
list-style-type:none;
border-bottom:1px solid #ffffff;
}
fornt-family: kelompok huruf, list-style-type: none, tidak
memakai penanda list, dalam ms word bisa memakai angka, huruf, atau bullet.
border-bottom:besarnya 1 pixel, silid, dengan warna putih.
.sidebar li a
{
color:#000000;
display:block;
text-decoration:none;
background-color:#00CCCC;
padding:2px 5px 2px 1px;
border-right:4px solid;
border-right-color:#006666;
}
Tampilannya akan seperti ini:
karena list nanti berupa link, yang bisa kita isi dengan url atau ke halaman yang lain, maka kita perlu menambahkan elemen a (link).
{
color:#003366;
}
link yang sudah di klik, halaman sudah terbuka, akan
berganti warna textnya, #003366.
.sidebar li a:hover
{
color:#ffffff;
text-decoration:none;
background-color:#006699;
border-right:4px solid;
border-right-color:#003366;
}
mengatur penampilan pada saat mouse kita melewati tulisan
dalam list tersebut: hover;
jangan lupa taruh property di atas pada bagian style di
dalam head.
Header berupa gambar indah di lihat, dan menjadikan blog atau web jadi meriah. Ada dua cara memasang gambar, satu dengan langsung di taruh, dengan tag IMG, atau dijadikan latar belakang.
Untuk menambah latar belakan image pada header lakukanlah
hal sebagai berikut:
pada css style, buat properties untuk header
misalnya:
#header
{
padding:10px;
background-image:url( alamat file );
background-repeat:no repeat;
}
Perhatikan, ukuran file gambar, kalau ingin pas dengan halaman yang sudah didesain, sesuaikan ukuran gambar dengan properties #header.
/*kalau ukuran gambar lebih kecil dari div header, dengan propertie background-repeat:no repeat, maka hanya akan terlihat satu gambar saja, seperti perintah IMG. Kalau ukuran gambar sama dengan ukuran div #header, properties background-repeat tak diperlukan.
Nah, di atas gambar kita bisa menulis seperti biasanya.
Tulisan di atas gambar.
posisi SERP google no 3 untuk pencarian dengan kata kunci:"tutorial CSS"
List atau daftar, atau kalau di ms word kita mengenalnya dengan nama bullet and numbering adalah model penomeran berhierarki. Bisa menggunakan huruf, angka, atau lambang (bullet). Dalam pemrograman internet, css, kita bisa mengunakan fungsi list yaitu ul untuk unorderd list (list yang tidak bernomor) dan ol yaitu ordered list. Selain itu ada list yang horizontal dan ada list yang vertikal. Ada list yang memakai angka atau huruf, ada list yang memakai bullet atau image.
Bedanya ul dan ol? Sebelum itu kita harus tahu, ul dan oladalah tag untuk list, untuk membuat list itemnya, kita butuh satu lagi tag yaitu li. jadi tag li harus berada dalam tag ul atau ol. Dan tag ul atau ol di dalamnya harus ada li.
Un-Ordered List
hasilnya:
ordered list:
Hasilnya:
List dengan link:
hasilnya:
untuk mengatur type list kita bisa menggunakan property list-style-type
contoh:
buat dulu css nya di style, misalnya
li.list1 { list-style-type:suare;} akan menghasilkan list
kotak;
li.list1 { list-style-type:circle;} akan menghasilkan list
linkaran berlubang;
untuk membuat list berupa icon atau image pakai
list-style-image:
li.list1 { list-style-image:url(sumber file)}
Penulisannya:
List ke kanan dan list ke bawah:
untuk list ke kanan (contoh untuk navigasi atas di blog ini, dan blogger indonesia). pakai properties untuk li { display:inline}
untuk list ke bawah (contoh seperti sidebar di blog ini):
pakai properties untuk li { display:block;}
silakan dikembangkan sendiri, gunakan properties margin dan padding untuk ul, border-bottom, tambahkan background-color untuk link. mohon koreksinya bila ada kesalahan.
Silahkan Copas..dan berbagi dengan yg ingin mempelajarinya :)
Mengenai Saya
Tidak ada komentar:
Posting Komentar