MENGATUR LAYOUT DENGAN CSS

Sekarang akan membahas mengatur layout dengan CSS,
sekedar memahami penyusunan layout sebuah Template

tutor ini merupakan dasar dari pembuatan Template, untuk contoh
sederhana dan agar mudah dipahami

penulisan kode CSSnya berada satu dengan HTMLnya

Mulai dengan kode ini

<hthl>

<head>

<title>latihan layout dengan CSS</title>

</head>

<body>

<style>

body{
background: #000000;
}

#header{
background: #F22D24;
width: 980px;
height: 150px;
}

#top{
background: #332AEF;
width: 980px;
height: 50px;
}

#main{
width: 980px;
height: 550px;
}

#left{
background: #3EEF23;
width: 630px;
height: 550px;
float: left;
}

#right{
background: #EFEF61;
width: 330px;
height: 550px;
float: right;
}

#potter{
background: #3719BC;
width: 980px;
height: 90px;
}

</style>

<div id="header"></div>

<div id="top"></div>

<div id="main">

<div id="left"></div>

<div id="right"></div>

</div>

<div id="potter"></div>

</body>

</html>

kode ini simpan dengan nama apa aja titik HTML

Kita membuat halaman dengan header, topmenu, contain, right menu, dan
potter

sedangkan <div id="main"> adalah alas atau tempat untuk <div
id="left"></div>(contain) dan <div id="right"></div>(right menu)

kode div semua diatur oleh CSS diatasnya sesuai id masing-masing

bagi yang sudah mengerti HTML kode CSS diatas mungkin tidak terlalu
bingung karena sangat sederhana

cuma background dengan warna, lebar, dan tinggi saja, tapi yang perlu di
ingat,

kode CSS ditilis didalam tanda { (kurawal buka) dan } (kurawal tutp)
dan jangan lupa ; (titik koma)

sekarang coba kita modif dikit kode diatas

Tambahkan margin-top dan margin-bottom 10px di top seperti ini

#top{
background: #332AEF;
width: 980px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
}

agar ada jarak antara atas dan bawahnya semayak 10 px,jika ingin jarak di
kiri ganti pake left dan kanan dengan right

dan untuk isinya tulis aja kode HTML diantara DIV buka dan DIV
tutup seperti contoh

masukan tulisan TOP MENUdi DIV top seperti ini <div
id="top">TOP MENU</div>

kemudian tambahkan beberapa kode di CSSnya untuk mengatur Text

beri warna dengan menambahkan color: #F22D24; jenis huruf
dengan font-family: georgia;

ukuran text dengan font-size: 50px; posisi text
dengan text-align: center; seprti dibawah ini

#top{
background: #332AEF;
width: 980px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
color: #F22D24;
font-family: georgia;
font-size: 50px;
text-align: center;
}

silanhkan kembangkan sendiri

Terimakasih

CEX

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