Newsletter

Suka Dengan artikel Di blog Ini, Masukkan alamat Email Anda Di Bawah Ini Untuk berlangganan artikel Blog Ini GRATISS...!!

Enter your email address:

Delivered by FeedBurner

Followers

Popular posts

Banner Musuh

Photobucket
(SYMOI) gubuk blekenyek cooltext433177153
http://borneoblogger.com/
logo Paddi Blog

Your Banner Here. .!!
Fatkhan On Jumat, 26 Juni 2009

Cascading Style Sheets (CSS) merupakan cara menambahkan Style pada document web
sperti warna , jenis huruf dll.
CSS Basic Syntax
Berikut contoh basic style dari HTML dan CSS

**
body {background-color: #FF0000;}
Menggabungkan HTML dengan CSS
Method 1: In-line (the attribute style)
Menggabungkan CSS dengan HTML menggunakan atribut HTML


Example


background warna biru





Method 2: Internal (the tag style)
Menggabungkan HTML dengan CSS menggunakan tag


Halaman dengan background merah




Method 3: External (link to a style sheet)
Membuat link dengan file terpisah mis : stye.css


My web



CONTOH STYLE
/**
* jwc.css
/* Elemen Utama */
a {
color:#049;
text-decoration:none
a:hover {
text-decoration:underline
}
body {
background:#CECECE url('images/bg_body.gif') top left repeat-x fixed;
color:#444;
font-family:Arial,Helvetica,Sans,Sans-Serif;
font-size:11px;
margin:0px
}
form {
margin:0px
}
input, select, textarea {
font-family:Arial,Helvetica,Sans,Sans-Serif;
font-size:11px
}
td {
font-size:11px;
text-align:left
}
/* Dasar Halaman */
#base {
background:#FFF
}
/* Head Kiri & Kanan */
#headkiri, #headkanan {
background:#555 url('images/bg_head.jpg') top left repeat-x
}
#headkanan {
text-align:right
}
/* Menu Utama */
#menu {
background:url('images/bg_menu.gif');
height:28px
}
/* Submenu */
#submenu {
background:url('images/bg_menubawah.gif');
color:#999;
letter-spacing:1px;
padding:3px 8px 3px 8px
}
#submenu a {
color:#CCC
}
#submenu a:hover {
color:#FFF;
text-decoration:none
}
/* menu.kiri */
#menu.kiri {
color:#999;
letter-spacing:1px;
padding:3px 8px 3px 8px
}
#menu.kiri a {
color:#CCC
}
#menu.kiri a:hover {
color:#FFF;
text-decoration:none
}
/* Intro */
#left #intro {
border-bottom:4px solid #EEE;
line-height:16px;
padding:6px 10px 10px 10px
}
/* Artikel */
#left #articles {
color:#777;
padding:10px
}
#left #articles .entry {
border-bottom:1px solid #EEE;
margin-bottom:6px;
padding-bottom:6px
}
#left #articles .entry a {
font-weight:bold
}
/* Support */
#left #support {
padding:0px 0px 10px 10px
}
#left #support #messenger .team {
margin-bottom:6px
}
#center {
background:url('images/bg_split.gif') top left repeat-y
}
/* Registrasi Domain */
#center #domreg {
background:url('images/bg_domreg.gif') top left;
font-size:10px;
height:127px
}
#center #domreg .subtitle {
margin-top:6px
}
#center #domreg td {
color:#000;
font-size:10px
}
/* WebComplete */
#center #webcomplete {
background:url('images/bg_webcpl.gif');
color:#FFF;
xpadding:8px
}
/* Berita & Informasi */
#center #berita {
color:#777;
padding:10px 10px 0px 10px
}
#center #berita .entry {
margin-bottom:10px
}
#center #berita .entry .tanggal {
font-size:10px
}
#center #berita .entry .judul {
color:#333;
font-weight:bold
}
/* Klien Kami */
#center #klien {
padding:10px
}
#center #klien .entry {
background:url('images/el_panah.gif') center left no-repeat;
border-bottom:1px solid #EEE;
margin-bottom:2px;
padding:0px 0px 2px 10px
}
#right {
background:url('images/bg_split.gif') top left repeat-y
}
/* Fitur Hosting */
#right #fitur {
background:url('images/bg_fitur.gif') top left;
height:127px;
padding:0px 6px 0px 6px
}
#right #fitur .subtitle {
margin-top:6px
}
#right #fitur td {
font-size:10px
}
/* Paket Hosting */
#right #paket {
background:url('images/bg_paket.gif') top left repeat-x;
text-align:center
}
/* Situs Bulan Ini */
#right #situs {
color:#777;
padding:10px
}
/* Alamat JWC */
#alamat {
background:url('images/bg_alamat.gif');
padding:8px 4px 4px 32px
}
/* Menu Bawah */
#menubawah {
background:url('images/bg_menubawah.gif');
color:#FFF;
font-size:10px;
padding:4px;
text-align:center
}
#menubawah a {
color:#CCC
}
#menubawah a:hover {
color:#FFF;
text-decoration:none
}
/* Class Global */
.subtitle {
margin-bottom:8px
}
.more {
padding:4px 10px 0px 0px;
text-align:right
}
/* Button */
.btxt {
background:#FFF;
border:1px solid #AAA
}
.btn {
}
.bck {
border:none
}**

Leave a Reply

Subscribe to Posts | Subscribe to Comments