Stillcetek.com
Struggle to Move Better
Google
 
Home | Gallery | Project | Contact | About       
 
 
 
About
Lukman, lahir di Kalianda, Lampung Selatan 1984, selesai pendidikan tingkat atas di SMA Islam di Kalianda, kemudian melanjutkan ke Perguruan Tinggi Ilmu Komputer AMIK Dian Cipta Cendikia Lampung ... >>
Recently
Categories
Archives
link blog

Apa sih CSS itu?

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk memformat tampilan html, bahasa yang direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya seperti font, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS sangat membantu para web designer untuk memperindah halaman web templatesnya.

Apa bedanya css dengan format html biasa? apa untungnya?

CSS sama fungsinya dengan cara format html biasa, namun CSS mempunyai lebih banyak element yang  bisa kita atur.

contoh:

tag table punya element border, css juga punya fromat untuk border namun lebih detail lagi seperti : border-top, border-right, border-bottom, border-left. artinya lebih kompleks karena memungkinkan kita membuat sisi border yang berbeda. :) .

ini contoh sederhana aja, masih banyak sekali keuntungan-keuntungan lain. So.. go to struggle.

Dimana saya bisa meletakkan kode-kode css?

Setidaknya ada 3 tempat meletakkan kode-kode css

1. Tag <Head> document HTML

Kita bisa menuliskan seluruh kode-kode css kita didalam tag head document html kita

Contoh

<HTML><head>
<title>page title</title>
<style type="text/css">
body{
background-color:#FFFFFF;
margin:2px;
}
//KODE KODE CSS
</style>
</head>
<body></body>
</HTML>


2. Di Tag Element-element HTML

Kita juga bisa meletakkan kode-kode css kita di properties tag-tag html

contoh:

<p style="font-size:12px;color:#0000FF"> text-text content yang akan diformat </p>

3. Ekternal File

Menuliskan kode-kode css di luar document html dengan ekstensi file *.css. Kemudian file *.css ini diincludekan kedalam document html tepatnya pada tag head.

contoh:

<head>
<title>page title</title>
<link rel="stylesheet" href="eksternal_file_css.css " type="text/css">
</head>

Kode-kode CSS juga bisa dituliskan dengan berbagai cara, lihat contoh-contoh dibawah.

Menerangkan format tag-tag html

seperti <body>, <div>, <table>,<p>,<h1>,<font> dan lain-lain

p{
font-family:Arial;
color:#0000DD;
font-size11px;
text-align:right;
}

Dengan contoh diatas maka text-text yang berada didalam tab <p> akan diformat dengan jenis font arial, warna biru tua, ukuran 11 pixel dan rata kanan.

Selector Class

kode css:

.areabanner{
width:200px;
height:100px;
}

kode di html:

<div class="areabanner">content</div>

atau bisa juga

<p class="areabanner">content</p>

Semua tag html yang mempunyai class areabanner maka akan diformat sesuai dengan format yang ditulis di .areabanner

Selector ID

kode css:

#areabanner{
width:200px;
height:100px;
}

kode html

<div id="areabanner">content</div>

dengan menambahkan karakter # di awal nama ID nya, berarti format itu adalah format untuk tag html yang berselector ID.

Author : Lukman

Comments

3 Responses to “Pengenalan CSS”
  1. Ridwan on January 15th, 2008 8:49 pm

    memang apa saja software yang diperlukan untuk bikin website dan css itu software apa kang..?

  2. Lukman on January 15th, 2008 9:44 pm

    bahkan untuk membuat halaman website bisa dibuat hanya dengan menggunakan notepad. *.asp, *.php, *.htm, *.html, *.css, file2 itu bisa dibuat hanya dengan menggunakan notepad.

    Namun untuk memudahkan kita, ada banyak jenis software yang bisa digunakan.

    Saya biasa menggunakan ultraedit untuk coding php. Sedang design html, css saya biasa menggunakan macromedia dreamweaver.

    Untuk mengolah image saya biasa menggunakan adobe photoshop.

    untuk browser Mozilla Firefork, Internet Explorer biasa saya gunakan.

    upload file ke server hosting saya pake CuteFTPpro, dan SSHSecureShellClient.

  3. zoelis on August 4th, 2008 11:33 am

    mas minta bantuannya. saya ni lagi da tugas pkn disuruh buat web pake css.bisa gak kirimin contoh2 beserta code2nya?yg lengkap ya…please

Leave a Reply

   
   
   
   
   
   
       
   
           

CAPTCHA image

Visitor
 
free-counter
 
Shoutbox
recent comment