Gusdwi dot Info » arti css http://gusdwi.info HTML - CSS - WEB DESIGN - SHARING ABOUT LIVES Mon, 26 Jul 2010 07:36:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 Tips Belajar CSS yang bagus http://gusdwi.info/belajar-css.html http://gusdwi.info/belajar-css.html#comments Wed, 03 Jun 2009 04:48:38 +0000 admin http://www.gusdwi.info/?p=376 Dalam hal ini saya mencoba flashbacks kembali mengenai apa yang saya ketahui tentang CSS, jika saya urut dari awal ternyata ada hal hal penting yang perlu dicatat dan dapat dijadikan pedoman untuk belajar CSS dengan mudah dan menyenangkan.
Semoga Tips Belajar Css ini beramanfaat untuk anda.

Pertama: Siapkan waktu dan pikiran yang sehat.
maksudnya adalah semakin banyak anda punya waktu untuk belajar CSS maka semakin cepat anda pintar dan tentu harus didukung dengan pikiran yang sehat agar selalu menghasilkan yang terbaik.

Kedua: Cobalah jangan takut salah.
maksudnya adalah pada kode CSS anda akan banyak menemukan bahasa yang asing didengar/dilihat dan sulit diterangkan satu persatu, maka daripada itu anda harus berani mencoba satu persatu dan lihat perbedaan efek yang terjadi pada browser. Dengan demikian saya rasa anda akan lebih cepat ingat daripada anda diberitahu langsung oleh seseorang.

Ketiga: Cari tutorial sebanyak mungkin.
maksudnya adalah segala yang ada dibumi ini tidak ada yang abadi termasuk CSS, pelajari hal hal yang baru tentang CSS melalui media, baik itu internet ataupun buku buku yang menjelaskan tentang CSS.

Keempat: Jangan pernah putus asa.
maksudnya adalah kalau anda benar benar tekun dan serius belajar CSS dan menjadikan CSS bagian dari permainan anda maka saya yakin anda adalah orang  yang  tak kenal menyerah.

]]> http://gusdwi.info/belajar-css.html/feed 4 CSS Font dan Text http://gusdwi.info/css-font-dan-text.html http://gusdwi.info/css-font-dan-text.html#comments Sat, 16 May 2009 04:08:17 +0000 admin http://www.gusdwi.info/?p=295 Properti Font berfungsi untuk mengatur font pada suatu elemen HTML, baik itu jenisnya,ukurannya,gayanya ataupun variasinya.

Ada beberapa macam properti Font antara lain:

  • Font, untuk mengatur secara keseluruhan nilai-nilai yang digunakan pada suatu elemen.
    contoh:

p { font:bold 20px Arial, Helvetica sans-serif ;}

  • Font-family, untuk mengatur model/jenis font pada suatu elemen.
    contoh:

p { font-family:”Verdana” Arial Helvetica sans-serif ;}

  • Font-size, untuk mengatur ukuran font pada suatu elemen. Nilainya dapat berupa satuan unit, persentase, ataupun inherit, xx-small, x-small, small, smaller, xx-large, x-large, large, larger dan medium.
    contoh:

p { font-size:xx-large ;}

  • Font-style, untuk mengatur model/gaya font pada suatu elemen. Nilainya dapat berupa inherit, italic, normal dan oblique.
    contoh:

p { font-style:italic ;}

  • Font-weight, untuk mengatur tebal/tipis font pada suatu elemen. Nilainya dapat berupa bold, normal, inherit, bolder, lighter, ataupun satuan angka dari 100-900.
    contoh:

p { font-weight:bold;}

Properti Text berfungsi untuk mengatur gaya atau style teks pada suatu elemen.
Ada beberapa macam properti Text antara lain:

  • Text-align, untuk menentukan perataan teks pada suatu elemen.Nilainya dapat berupa left,center dan right.
    contoh:

p {text-align:left;}

  • Text-transform, untuk merubah teks menjadi huruf besar atau kecil pada suatu elemen. Nilainya dapat berupa uppercase, lowercase, capitalize dan none.
    contoh:

p {text-transform:uppercase;}

  • Text-indent, untuk mengatur jarak masuk teks pertama pada paragraf pada suatu elemen. Nilainya dapat berupa inherit atau satuan unit.
    contoh:

p {text-indent:4px;}

  • Line-height, untuk mengatur jarak baris antar teks pada suatu elemen. Nilainya dapat berupa persentase atau satuan unit.
    contoh:

p {line-height:14px;}

  • Letter-spacing, untuk mengatur jarak spasi antar teks pada suatu elemen. Nilainya dapat berupa inherit, normal, persentase atau satuan unit.
    contoh:

p {letter-spacing:1px;}

  • Text-decoration, untuk menentukan dekorasi teks pada suatu elemen. Nilainya dapat berupa underline, line-through, overline, blink dan none.
    contoh:

p {text-decoration:underline;}

]]> http://gusdwi.info/css-font-dan-text.html/feed 0 ID Selector dan Class http://gusdwi.info/id-selector-dan-class.html http://gusdwi.info/id-selector-dan-class.html#comments Sat, 16 May 2009 04:06:52 +0000 admin http://www.gusdwi.info/?p=293 Selain dengan cara standar dalam penulisan CSS yaitu memberi style atau properti pada selector bawaan HTML, kita juga dapat memberikan nama sendiri pada suatu elemen tertentu dengan cara membuat ID Selector dan Class Selector.

ID Selector adalah selector yang dapat digunakan hanya satu kali pada suatu elemen, sedangkan Class Selector dapat digunakan beberapa kali pada suatu elemen.

Penulisan ID Selector pada CSS diawali dengan simbol # (octothorpe) sedangkan penulisan Class Selector pada CSS diawali dengan tanda titik (.)

Contoh:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ID Selector dan Class</title>
<style type=”text/css”>
.box {border:2px solid #666666; padding:10px; margin-bottom:10px;}
#header_title {font-size:24px; color:#FF0000; text-transform:uppercase; text-align:center}
#header_desc {font-size:16px; color: #666600; text-transform:uppercase; text-align:center}
</style>
</head>
<body>
<div class=”box”>
<p id=”header_title”>Gus Dwi&acute;s Blog<br/><span id=”header_desc”>Tentang CSS tutorial</span></p>
</div>
<div class=”box”>
<p>Isi keterangan tentang Blog anda disini</p>
</div>
</body>
</html>

Kalau dilihat pada browser akan menjadi seperti ini:
id-selector-view

]]> http://gusdwi.info/id-selector-dan-class.html/feed 0 CSS Border http://gusdwi.info/css-border.html http://gusdwi.info/css-border.html#comments Fri, 15 May 2009 04:22:42 +0000 admin http://www.gusdwi.info/?p=287 Properti Border adalah untuk membuat garis pinggir pada suatu elemen.
Ada beberapa properti pada Border sebagai berikut:

  • Border Top, untuk mengatur garis pinggir sebelah atas.
    Contoh:

div {border-top-style:solid;
    border-top-width:1px;
    border-top-color:#FF0000;}

  • Border Right, untuk mengatur garis pinggir sebelah kanan.
    Contoh:

div {border-right-style:double;
    border-right-width:4px;
    border-right-color:#000000;}

  • Border Bottom, untuk mengatur garis pinggir sebelah bawah.
    Contoh:

div {border-bottom-style:dashed;
    border-bottom-width:thick;
    border-bottom-color:#FF0000;}

  • Border Left, untuk mengatur garis pinggir sebelah kiri.
    Contoh:

div {border-left-style:dotted;
    border-left-width:thin;
    border-left-color:#FF0000;}

Apabila anda ingin menggabungkan semua properti border menjadi satu deklarasi, caranya adalah seperti berikut ini:

div {border-top:1px solid #000000;
    border-right :2px dashed #cccccc;
    border-bottom:3px dotted #999999;
    border-left :4px double #333333;}

]]> http://gusdwi.info/css-border.html/feed 2 CSS Background http://gusdwi.info/css-background.html http://gusdwi.info/css-background.html#comments Fri, 15 May 2009 04:20:21 +0000 admin http://www.gusdwi.info/?p=285 Properti Background adalah untuk membuat efek latar belakang pada sebuah element.
Ada beberapa macam properti pada Background sebagai berikut:

  • Background Color, berfungsi untuk mengatur latarbelakang sebuah element dengan warna solid.
    Contoh:

h1 {background-color:#FFFFFF;}

  • Background Image, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar.
    Contoh:

h1 {background-image: url(nama-gambar.gif);}

  • Background Repeat, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar yang dapat diulang atau tidak.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;}

selain bernilai no-repeat juga dapat bernilai inherit, repeat, repeat-x dan repeat-y.
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background Attachment, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar, apakah dapat digulirkan atau tidak.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-attachment: fixed;}

selain bernilai fixed juga dapat bernilai inherit dan scroll
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background Position, berfungsi untuk mengatur letak/posisi gambar latarbelakang sebuah element.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;
background-position: top;}

selain bernilai top juga dapat bernilai inherit, center, left, right, dan bottom
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background, berfungsi untuk mendeklarasikan semua background properti menjadi satu. Cara ini paling banyak digunakan oleh web designer karena dapat mempersingkat waktu kerja anda.
    Contoh:

h1 {background:#FFFFFF url(nama-gambar.gif) no-repeat left top;}

]]> http://gusdwi.info/css-background.html/feed 0 Format Dasar CSS http://gusdwi.info/format-dasar-css.html http://gusdwi.info/format-dasar-css.html#comments Fri, 15 May 2009 04:16:56 +0000 admin http://www.gusdwi.info/?p=283 Kalau kita perhatikan secara seksama sebetulnya hasil terjemahan bahasa HTML pada browser adalah berbentuk Kotak, didalam kotak tersebut dapat dibagi menjadi beberapa area seperti Content, Padding, Border, dan Margin.
Dari masing-masing area tersebut dapat diformat dengan menggunakan CSS style.

Untuk memperjelas apa yang disampaikan diatas tentang Format CSS, lihat ilustrasi dibawah ini:

css-box-model

Keterangan:

  • Pada area yang paling tengah disebut Content,
    Content bisa berupa Teks atau Image, juga gabungan antara Teks dan Image.
  • Diluar content area disebut Padding,
    Padding memisahkan content dengan Border.
  • Diluar Padding disebut Border,
    Border adalah batas tepi daripada content yang berada diantara padding dan Margin.
  • Area yang paling luar disebut Margin,
    Margin memisahkan antara border dan sisi paling luar.

Jadi….Gampang kan…
Kalau kita mau serius belajar CSS, pasti ketagihan dech….
Nah, SEMOGA bermanfaat untuk anda

]]> http://gusdwi.info/format-dasar-css.html/feed 1