Gusdwi dot Info » class style 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 Mengatur Display dengan CSS http://gusdwi.info/mengatur-display-dengan-css.html http://gusdwi.info/mengatur-display-dengan-css.html#comments Tue, 26 May 2009 04:38:14 +0000 admin http://www.gusdwi.info/?p=367 CrackedEarth0018_5_S

Properti Display, befungsi untuk mengatur tampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti display adalah: inline, block, list-item, run-in, inline-block, compact, inline-table, marker, table, table-caption, table-cell, table-column, table-row, table-footer-group, table-header-group, table-column-group, table-row-group, inherit dan none.

contoh:

div#topMenu {display:inline;}

Properti Overflow, berfungsi untuk menentukan keadaan yang diperlakukan pada suatu elemen apabila isinya melebihi box diluarnya. Nilai nilai yang dapat ditulis pada properti overflow adalah: auto, visible, scroll, hidden dan inherit.

contoh:

.content { overflow:scroll;}

Properti Visibility, berfungsi untuk menentukan penampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti visibility adalah: collapse, visible,  hidden dan inherit.

contoh:

.content img  { visibility:hidden;}

Properti Cursor, berfungsi untuk menentukan penampilan cursor ketika mouse melewati suatu elemen. Nilai nilai yang dapat ditulis pada properti cursor adalah: crosshair, pointer, move, text, wait, auto, default, help, e-resize, n-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize, progress dan inherit.

contoh:

img a:hover  { cursor:pointer;}

Jika anda ingin melihat tampilan cursor yang lain pada browser, cobalah satu persatu dari nilai nilai properti cursor tersebut.

]]> http://gusdwi.info/mengatur-display-dengan-css.html/feed 4 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