Arsip | Draft 005: Style: Text Formatting Dengan CSS (Cascading Style Sheet)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<e-Web 2000>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
STYLE: TEXT FORMATTING DENGAN CSS (CASCADING STYLE SHEET)
=========================================================

Dalam edisi-edisi yang lalu, kita telah belajar mengatur style dengan 
menggunakan tag-tag pemformatan seperti <B>, <I>, <FONT> dan lain-
lain. Kesulitan yang timbul dengan cara ini adalah pengaturan style 
harus dilakukan berulang-ulang untuk setiap bagian yang akan 
diformat. Untuk mengatasi masalah ini digunakan Cascading Style Sheet 
[CSS] yang fungsinya serupa dengan template atau style pada pengolah 
kata populer seperti MS Word. Dengan CSS juga dimungkinkan untuk 
memisahkan style dan layout sebuah dokumen HTML dari isi dan struktur 
yang sebenarnya.

Penggunaan Style Sheet
----------------------
Terdapat tiga cara menggunakan style sheet dalam dokumen HTML, yaitu 
dengan linking, embedding, dan inline. Penggunaan masing-masing cara 
tersebut tergantung kebutuhan.

1. Linking Style Sheet
----------------------

  <LINK REL="STYLESHEET" TYPE="text/css" HREF=cssfile>

Atribut HREF menyatakan nama file style sheet yang akan digunakan 
untuk memformat seluruh dokumen HTML. File ini adalah sebuah file 
teks biasa yang berisi definisi-definisi style sheet yang akan 
digunakan dan disimpan dengan ekstensi .css. Tag ini harus dituliskan 
di dalam elemen HEAD.
Cara linking dipakai untuk memformat banyak dokumen HTML dengan 
menggunakan sebuah style sheet yang sama. Dengan demikian penampilan 
sebuah situs dapat dibuat konsisten dan mudah diubah-ubah cukup 
dengan hanya mengubah definisi style dalam file style sheet.

2. Embedding Style Sheet
------------------------

  <STYLE>
    <!--
      ...definisi style...
              ....
    //-->
  </STYLE>

Definisi style diletakkan di antara tag <STYLE> dan </STYLE>. Di sini 
digunakan tag komentar <!-- dan --> sehingga browser yang tidak dapat 
mengenali elemen STYLE tidak akan menampilkan definisi style tersebut 
dalam halaman web. Elemen ini harus diletakkan di dalam elemen HEAD. 
Dengan cara ini style yang didefinisikan hanya berlaku untuk dokumen 
yang mengandung elemen STYLE tersebut.

3. Inline Style
---------------

  <tag STYLE=definisi_style ...> ...teks... </tag>

Style juga dapat diberikan secara langsung dalam tag-tag HTML yang 
sudah kita pelajari di atas, misalnya P, H1, LI, DIV, SPAN, dan lain-
lain ('tag' dapat diganti dengan nama tag yang diinginkan). Cara ini 
sebenarnya tidak dapat dikatakan style sheet, karena style tersebut 
hanya berlaku untuk sebuah tag saja, jadi kita harus tetap menuliskan 
definisi yang sama untuk setiap tag yang akan diformat. Namun cara 
ini tetap berguna jika kita hanya ingin memformat beberapa tag saja 
secara khusus.

Mendefinisikan Style Sheet
--------------------------
Definisi style sheet dilakukan dengan menuliskan nama elemen atau tag 
yang akan didefinisikan diikuti dengan atribut dan nilainya yang 
diletakkan di dalam pasangan tanda '{' dan '}'. Atribut dipisahkan 
dari nilainya dengan tanda titik dua (:), dan masing-masing atribut 
dipisahkan dengan titik koma (;). Beberapa tag yang didefinisikan 
sama dapat dijadikan satu dengan dipisahkan tanda koma (,). Kita juga 
dapat mendefinisikan beberapa variasi dari sebuah elemen (disebut 
CLASS) dengan menggunakan tanda titik (.) yang diikuti dengan nama 
class. Contohnya:

  LI, P, DIV.kecil {font-size: 15pt;
                    font-weight: 'bold'}

Definisi di atas menyatakan bahwa elemen LI dan P ditampilkan dengan 
font 15 point dan tebal, demikian juga dengan class 'kecil' dari 
elemen DIV. Class digunakan dengan memakai atribut baru CLASS pada 
tag yang didefinisikan:

  <tag CLASS=nama_class ...> ...teks... </tag>

Atribut Style Sheet
-------------------
Style sheet dapat digunakan untuk menentukan berbagai atribut, 
diantaranya: font, warna, margin, perataan, dan lain-lain.

1. Font
-------

  {font-family: _nama_font_, ...;
   font-size: xx-small|x-small|small|medium|large|x-large|xx-large;
   font-weight:lighter|light|medium|bold|bolder;
   font-style: normal|italic}

Atribut font-family menentukan jenis font yang digunakan. Beberapa 
nama font dapat dituliskan sekaligus sebagai alternatif. Atribut font-
size menentukan ukuran font, font-weight menentukan ketebalan font, 
dan font-style menentukan apakah font ditulis normal atau italic.

2. Teks
-------

  {text-align: left|center|right|justify;
   text-decoration: underline|line-through|none;
   text-indent: _indentasi_;
   text-transform: capitalize|uppercase|lowercase|none;
   line-height: _jarak_baris_}

Atribut text-align menentukan perataan teks, text-decoration 
menentukan apakah garis pada teks terletak di bawah atau di tengah, 
text indent menentukan besarnya indentasi (dalam cm, in, pt, atau 
px), text transform menentukan kapitalisasi teks, dan line-height 
menentukan jarak antar baris dalam teks.

3. Margin
---------

  {margin-top: _margin_atas_;
   margin-bottom: _margin_bawah_;
   margin-left: _margin_kiri_;
   margin-right: _margin_kanan_}

Atribut margin-top, margin-bottom, margin-left, dan margin-right 
masing-masing menentukan margin atas, bawah, kiri, dan kanan sebuah 
elemen.

4. Padding
----------

  {padding-top: _padding_atas_;
   padding-bottom: _padding_bawah_;
   padding-left: _padding_kiri_;
   padding-right: _padding_kanan_}

Atribut padding-top, padding-bottom, padding-left, padding-right 
masing-masing menentukan padding atas, bawah, kiri, dan kanan sebuah 
elemen.

5. Border
---------

  {border-top-width: thin|medium|thick;
   border-bottom-width: thin|medium|thick;
   border-left-width: thin|medium|thick;
   border-right-width: thin|medium|thick;
   border-color: _warna_border_;
   border-style: dotted|dashed|solid|double|groove|ridge|
                 inset|outset|none}

Atribut border-top-width, border-bottom-width, border-left-width, dan 
border-right-width masing-masing menentukan ketebalan border atas, 
bawah, kiri, dan kanan sebuah elemen. Atribut border-color menentukan 
warna border, dan atribut border-style menentukan jenis border.

6. Warna dan Background
-----------------------

  {color: _warna_;
   background-color: _warna_latar_;
   background-image: _gambar_latar_}

Atribut color menentukan warna teks, background-color menentukan 
warna latar belakang, dan background-image menentukan gambar latar 
belakang.

7. Posisi Elemen
----------------

  {position: absolute;
   top: _koordinat_atas_;
   left: _koordinat_kiri_;
   width: _lebar_;
   height: _tinggi_;
   float: none|left|right;
   clear: none|left|right|both}

Atribut position menentukan apakah elemen akan diletakkan pada suatu 
tempat secara khusus, jika nilainya 'absolute' maka atribut top dan 
left menentukan koordinat kiri atas elemen. Atribut width dan height 
menentukan lebar dan tinggi elemen. Atribut float dan clear digunakan 
untuk menentukan pengaturan gambar dan elemen-elemen.

8. Display dan Visibility
-------------------------

  {display: true|false;
   visibility: true|false}

Atribut display dan visibility digunakan untuk menentukan apakah 
elemen akan ditampilkan atau tidak. Atribut-atribut terakhir ini 
biasanya digunakan bersama-sama dengan scripting yang akan dijelaskan 
pada edisi berikutnya.

-------------------------
Edisi Berikutnya:
  "PENGGUNAAN SCRIPT"

-------------------------
Referensi untuk edisi ini:

W3 Consortium
http://www.w3.org/style/

Tim Berners-Lee's Style Guide
http://www.w3.org/hypertext/WWW/Provider/Style/Overview.htm

Yale Medical School
http://info.med.yale.edu/caim/

Style Sheets Overview
http://www.w3.org/hypertext/WWW/Style/ 

Guide to Web Style
http://www.sun.com/styleguide/

The WDVL: Style Sheets and Guides
http://www.wdvl.com/Authoring/Style/

Digital Library SunSITE
http://sunsite.berkeley.edu/Web/

The Webmaster's Reference Library
http://www.webreference.com/