BELAJAR CSS

BELAJAR CSS DASAR

Bagi semua blogger tampilan blog mau ga mau harus
menarik,kalau kata sahabat gw si “biar keliatan propesional”,blog cantik emang
kebanggaan tersendiri tapi jangan lupa isinya harus bermutujuga.

Untuk kali ini gw kasih ni TUTORIAL CSS dasar ya buat
Bantu-bantu mempercantik blog . ga bias ditawar lagi kalo mau blognya ga
malu-maluin CSS harus dikuasai, tapi sebelum baca ini harus ngerti dulu HTML ya
seenggenya mengenal lah

Ok kita mulai

CSS merupakan kelanjutan dari HTML jadi kuasai dulu HTMLnya
baru maen CSS, CSS digunakan untuk memper cantik atau mempermudah penulisan Di
kode HTML masih bingun sama gw juga,

Lanjut boy

CSS digunakan semua Web Design untuk membuat template Dll,
biasanya ditulus satu file dengan kode HTML dengan di apit kode<style></style>untuk
menyatakan kode ini adalah CSS. Dan ada juga yang di pisah dan dipanggil di kode
HTMLnya dengan kode

Cepe penjelasan terun malah tambah pusing mulai aja latihan
ok

Untuk kali ini hanya pengenalan kode CSS aja karena buat
template jadi kode yang sering di gunain bikin template dan buat template blog
ajka yang kita bahas

Buat dulu kode HTMLnya teserah seinget kamu aja sekedar
contoh

<h1>CSS PERTAMA KU</h1>

Masukan CSS nya teserah mau diatas atau di bawah nya tapi
setandarnya diatas kode HTML

<style>

H1{

color : #5544ff;

font-family: Georgia;

size: 16px;

}

</style>

Nah sekareng pasti udah ada pencerahan

CSS untuk mengelompokan perintah jadi gausah ribet setiap
menggunakan H1 di HTML akan otomatis dikasih warna ukuran dan jenis hurufnya

Yang harus dimengerti biasanya di template pake div
perhatiin aja id atau class setelah divnya, kalo <div id=”nama_id”> pada CSS
nya pake tanda #(pagar)nama_id kalo <div class”nama_class”> pake tanda .(titik)nama_class
di CSSnya.

Untuk isi dari CSS didalam tanda { }(tanda kurawal buka
dan tutup),akhir kode pake;(titik koma)

Untuk mengstur posisi CSS menggunakan perintah margin atau
padding arah posisi tentukan dengan top(atas) left(kiri)right(kanan)bottom(bawah)

Contoh

#widget{

Padding-top: 10px;

Padding-left: 10px;

Padding-right: 10px;

Padding-bottom: 10px;

}

Jadi maju dari atas,kiri,kanan,bawah 10px kode yang diapit
<div id=”widget”></div>

Jika didalam apitan <div id=”widget”></div> ada kode HTML
lagi dan mau dispesifikasi lagi perintahnya tinggal tambahkan didepan nya

Contoh

#widget a{

color : #5544ff;

font-family: Georgia;

size: 16px;

}

Untuk a ada beberapa pilihan seperti a:visited untuk link
yang sudah di klik, a:active untuk link yang sedang aktif dan a:hover untuk link
yang dideketin mouse

Contoh

a{

color : #ffffff;

}

a:active, a:visited {

color : #000000;

}

a:hover{

color : # E51919;

}

Jadi link pertama berwarna putih,kalo dideketin mouse
berubah jadi merah dan setelah di klik akan jadi hitam.

Untuk kali ini udah dulu ah cape ni, besik dilanjut lagi ya
tutorial belajar bikin template joomla dan blog tungguinaja ok

Tanks

CEX