Pemrograman Web lagii

CSS (Cascading Style Sheet)

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Keuntungan menggunakan CSS

• Memisahkan presentation sebuah dokumen dari konten dokumen itu sendiri
• Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML

Ada tiga jenis cara dalam penggunaan CSS ini, yaitu :

1. External Style Sheet
2. Internal Style Sheet
3. Inline Style Sheet

External Style Sheet

Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya menggunakan script HTML yang disisipkan antara tag head sebagai berikut :

<link rel=”stylesheet” type=”text/css” href=”direktori/filecss.css” />

Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana anda menempatkan file css nya. Penggunaan system embedding css ini sangat disarankan karena memang banyak kelebihan yaitu mudah untuk melakukan pengeditan mengatur semantik dan praktis terkumpul dari satu file.

Internal Style Sheet

Adalah cara embedding css dengan menulis langsung di dalam file html yang ingin kita atur tampilannya. Penulisan ini disisipkan antara tag head juga dengan diapit oleh tag style. Berikut contohnya :

<style type=”text/css”>

                body {

                background:#cccccc;

                font-family:arial;

}

</style>

Inline Style Sheet

Adalah penulisan script css langsung pada tag html dengan menambahkan style didalamnya. Contoh :

<p style=”font-size:20px;”>Tulisan yang diatur </p>

Dua cara terakhir ini tidak disarankan digunakan karena ribet dan memperbesar file setiap html anda sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat. Darurat disini berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda sedang membuka file itu dan tidak sempat membuka file css karena keterbatasan koneksi misalnya.

Namun penggunaan external css akan memudahkan anda di waktu kedepan dalam hal update dan editing.

Aturan Penulisan CSS

Selector

Terdiri dari :

                Tag/Elemen

                                Setiap tag yang ada pada HTML bisa dijadikan selector

                Class

                                Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class                                           style1.css

                ID

                                Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header, content,                                   dan footer dalam desain web karena didefinisikan dengan ID berbeda.

Declaration

Mendeskripsikan property dan value. Contoh :

h1

{

                color : #0000FF;

}

Keterangan :

-          Selector               : h1

-          Property              : color

-          Value                   : #0000FF

CSS Background

Property background

1.  Background-color

Contoh:

Body {

 Background-color : green;

}

2.  Background-Image

Contoh:

Body {

 Background-image : url(gambar1.jpg);

}

3.  Background-attachment

Body {

 Background-attachment : scroll;

}

4.  Background-Repeat

Body {

 Background-repeat : repeat;

 Background-image : url(image/gambar1.jpg);

}

5.  Background-position

Body {

Background-repeat : no-repeat;

Background-image : url(image/gambar1.jpg);

Background-position : bottom center;                 

}

CSS Font

Property Font

1.  Font-family

P {

Font-family : Arial,Helvetica;

}

2.  Font-size (satuan em,pt,px,mm,cm,%)

P {

Font-size : 24em;

}

3.  Font-style (nilai : oblique,italic,normal)

P {

Font-style : oblique;

                }

4.  Font-variant (nilai : normal,small-caps)

P {

                                Font-family : Arial,Helvetica;

}

5.  Font-weight (nilai :normal,bold,bolder,lighter,100-900)

P {

Font-weight : bolder;

}

CSS Text

Property teks

1.  color

P {

color :red;

}

2.  teks-align (nilai left,right,center,justify)

P {

Text-align :justify;

}

3.  text-decoration (nilai : none,underline,overline,line-through,blink)

P {

Text-decoration :overline;

}

4.  text-transform (nilai : none,capitalize,uppercase,lowercase)

P {

Text-transform : capitalize;

}

5.  Letter-spacing

P {

letter-spacing : 20px;

}

6.  Teks-indent

P {

Text-indent : 50px;

}

CSS List

Property list

1.  List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)

Ul  {

List-style-type : disc ;

}

2.  List-style-image  (nilai : url,none)

Ul  {

List-style-image : url(gambar1.jpg) ;

}

3.  List-style-position  (nilai : inside,outside)

Ul  {

List-style-position : inside;

}