para sobat sebenarnya saya ingin membahas tentang CSS dan sharing buat sobat Blogger.....kirain aja sobat tertarik tapi postingan ini akan dilakukan selama beberapa tahapan....Css penting buat para sobat agar sobat bisa tahu bagai mana agar css tidak ada pengulangan ataupun ada css yang tidak kepakai di blog sobat
Dan bila ada yang mau di Tanyaain boleh aja kirain saya bantu sekalian praktekin
pertama ga akan langsung praktek coba dengan pengenalan dulu
1.Pengenalan CSS
CSS atau Cascading style sheets adalah satu pasilitas untuk mempermudah pemeliharaan sebuah website... dengan adanya Css akan memudahkan merubah tampilan web atau bloger tanpa merubah dokumen HTMlnya
dan penulisannya sebagai berikut:
nama_style_atau_nama_tag-HTML{ nama_atribut : argumen;
.................................
................................}
misal sederhana jika mendefinisikan gaya penulisan paragrap pada document HTML,maka dapat ditulis sebagai berikut:
p{
font : arial 12pt italic;
color : green;
}
p=nama_style
font sama collor = nama attribut
sedangkan hasil yang ada paling kanan adalah agmumennya
maka paragraf pada dokumen Html akan menggunakan huruf berjenis arial dengan ukuran 12point bergaya italic dan berwarna hijau
sekarang kita mencoba mengenal Attribut CSS
* font sie : menentukan ukuran hurup bisa dalam persen ataupun nilai dalam pixel
contoh: font-size :xx-small
font-size : x small
font-size : small
font-size : large
font size : 12px
font-size : 1,5 cm , font-size: 1,2in, font-size:200% dst
* font-family : menentukan jenis hurup ( arial; verdana, dsb)
contoh: font-family: "courier new", verdana,arial
jenis hurup tergantung dengan prioritas, dari contoh di atas maka yang pertama
digunakan adalah "courier new" jika sistem mendukung jika tidak akan diteruskan
dengan jenis huruf verdana dst.
* font-weight : menentukan penulisan huruf tipe standar adalah medium
contoh= font-weight : bold;
font-weight : light; dst
*Font-style: ini adalah gaya huruf
contoh: Font-style: normal , Font-style: italic, Font-style: oblique;
* Text decoration : menentukan Gaya text contoh: * Text decoration : underline
* Text decoration : none;
* Text decoration: overline; dsb
* Text Align : mengatur perataan Text contoh : * Text Align : left; (right,center,justify)
* Text indent: untuk text Yng lebih menjorok Pada awal paragraf : contoh Text indent: 1,25 pt
* Text Transform : huruf kecil atau huruf besar
contoh Text Transform: capitalize atau uppercase
Dan bila ada yang mau di Tanyaain boleh aja kirain saya bantu sekalian praktekin
pertama ga akan langsung praktek coba dengan pengenalan dulu
1.Pengenalan CSS
CSS atau Cascading style sheets adalah satu pasilitas untuk mempermudah pemeliharaan sebuah website... dengan adanya Css akan memudahkan merubah tampilan web atau bloger tanpa merubah dokumen HTMlnya
dan penulisannya sebagai berikut:
nama_style_atau_nama_tag-HTML{ nama_atribut : argumen;
.................................
................................}
misal sederhana jika mendefinisikan gaya penulisan paragrap pada document HTML,maka dapat ditulis sebagai berikut:
p{
font : arial 12pt italic;
color : green;
}
p=nama_style
font sama collor = nama attribut
sedangkan hasil yang ada paling kanan adalah agmumennya
maka paragraf pada dokumen Html akan menggunakan huruf berjenis arial dengan ukuran 12point bergaya italic dan berwarna hijau
sekarang kita mencoba mengenal Attribut CSS
* font sie : menentukan ukuran hurup bisa dalam persen ataupun nilai dalam pixel
contoh: font-size :xx-small
font-size : x small
font-size : small
font-size : large
font size : 12px
font-size : 1,5 cm , font-size: 1,2in, font-size:200% dst
* font-family : menentukan jenis hurup ( arial; verdana, dsb)
contoh: font-family: "courier new", verdana,arial
jenis hurup tergantung dengan prioritas, dari contoh di atas maka yang pertama
digunakan adalah "courier new" jika sistem mendukung jika tidak akan diteruskan
dengan jenis huruf verdana dst.
* font-weight : menentukan penulisan huruf tipe standar adalah medium
contoh= font-weight : bold;
font-weight : light; dst
*Font-style: ini adalah gaya huruf
contoh: Font-style: normal , Font-style: italic, Font-style: oblique;
* Text decoration : menentukan Gaya text contoh: * Text decoration : underline
* Text decoration : none;
* Text decoration: overline; dsb
* Text Align : mengatur perataan Text contoh : * Text Align : left; (right,center,justify)
* Text indent: untuk text Yng lebih menjorok Pada awal paragraf : contoh Text indent: 1,25 pt
* Text Transform : huruf kecil atau huruf besar
contoh Text Transform: capitalize atau uppercase
Margin
attribut margin di gunakan untuk mengatur jarak batas dengan batas terluar ( margin) dari halaman web contoh : margin-left:15px jadi jarak dari margin kiri 15px
jika penggunaan satu persatu anda harus sebutkan seperti contoh di atas margin-right, bottom, Top
Tapi jika ingin semuanya berarti nama attributnya Margin : contoh margin:15px berarti margin keseluruhan pada attribut tersebut 15px
collor
ini menentukan warna contoh : collor : red , collor: #ffffff; collor RGB (115, 67,89)
contoh :.sidebar h2{ background : url(......./s1600/blueside2.png)repeat-x;
font-family : 'Oswald',Arial,century gothic,verdana,sans-serif;
font-size:16px;
color:#ffffff;
}
di atas adalah contoh dari bagian heding atau nama dari sidebar(judul) saya bahas
font-family : 'Oswald',Arial,century gothic,verdana,sans-serif;
ini adalah : menentukan jenis hurup yang dipakai
font-size:16px;
ini adalah : menentukan ukuran hurup yang dipakai
color:#ffffff;
ini adalah : warna hurup yang dipakai
untuk background itu latar dari heading sidebar atau latar judul tersebut bisa warna atau gambar contoh:
background :#000000 url(......./s1600/blueside2.png)repeat-x;
#000000 = warna background yang akan di pakai
....../s1600/blueside2.png url gambar yang akan dipakai
repeat-x pengulangan gambar ke samping bisa juga repeat-y pengulangan gambar ke bawah atau repeat gambar terus di ulang
untuk background saya bahas entar yua soalnya ada banyak penggunaan background pada sebuah template
Kayaknya blog ane harus dimodifikasi nih buat CSS... ditunggu kunjungannya...
ReplyDeleteterima kasih ilmux gan.., sy tunggu kelanjutanx ya... *smile
ReplyDelete@Spider Share ,@Rohis Facebook makasih sobat :-) saya lanjutin lagi
ReplyDeleteHebat lahh...ini sip bnget,,,dasarnya CSS Pak bendahara hehehe...
ReplyDelete