MODUL 14 PENGANTAR CASCADING STYLE SHEET

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

  1. Pengertian CSS
  2. Memahami Konsep CSS
  3. Memahasi Aturan Penulisan CSS
  • Memahami Manipulasi Font, Teks, Image, Background, Border
  • Memahami Manipulasi Tabel, Link dan Kursor Mouse.

14.1 Pengantar CSS

CSS adalah singkatan dari Cascading Style Sheet yaitu kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halaman HTML. Dengan CSS kita dapat mengatur tampilan dan melakukan perubahan struktur, huruf, warna, gambar, latar belakang halaman web dan lainnya secara sakaligus tanpa mesti merubah satu persatu. Misalnya, Anda ingin merubah jenis huruf yang digunakan dari Arial ke Helvetica, maka bayangkan jika halaman web Anda lebih dari 100 halaman, tentu akan sulit memperbaikinya satu persatu, namun dengan CSS, Anda cukup mengubahnya di CSS saja, maka akan berubah ke seluruh halaman web Anda.

CSS lahir pada bulan Desember 1996 dengan diluncurkan CSS versi 1, tahun 1998 dirilis CSS versi 2 dan sekarang sudah mencapai CSS versi 3 dengan perbaikan yang sangat signifikan.

Tata penulisan CSS mempunyai aturan-aturan tertentu agar di kenal oleh browser.

Secara umum penulisan CSS terdiri atas :

  • Selector, yaitu tag HTML yang akan diberikan perintah CSS, seperti tag<h1>, <img>, <table> dan lainnya.
  • Property, yaitu atribut dari tag HTML yang dikonversi menjadi propertyCSS, misalnya color, align dan laiinya.
  • Value, adalah nilai yang diberikan ke property.

Sintaknya :

Selector { property: value }

Contoh : Anda dapat menentukan bingkai dari sebuah table seperti berikut :

table{ border :1px solid #C00; }

artinya, jika perintah table anda gunakan pada HTML, maka otomatis akan diberikan atribut border dengan nila 1, solid dan berwarna #C00.

Satu selector dapat diberikan banyak property sekaligus, perhatikan contoh berikut :

h1 {

border: 1px;

color: #ccc;

background-color: #000080;

}

Anda juga dapat memberikan CSS pada selector secara bertingkat seperti berikut :

ul em { color: #000; }

Artinya, CSS tersebut hanya berlaku untuk tag <em> yang berada setelah tag <ul>.

Jika Anda ingin membuat class selector sendiri (bukan dari tag HTML), maka dapat dilakukan dengan cara :

.black { color: black; }

Implementasinya pada kode HTML seperti berikut :

<p class=black>Tulisan akan berwarna hitam</p>

Namun, jika Anda ingin mengacu kepada id (attribute id), maka penulisannya :

#black { color: black; }

jika dibuat bertingkat, maka :

h1#black { color: black; }

ini akan memberikan efek hanya pada tag <h1> yang atribut idnya sama dengan black. Jika Anda ingin semua tag <h1> akan berwarna black, maka :

#black h1 { color: black; }

Implementasinya pada kode HTML seperti berikut : <p id=black>Tulisan akan berwarna hitam</p> Selector group :

Kita dapat membuat selector ini berdasarkan sekelompok tag, dengan cara memisahkan antara satu selector dengan selector lainnya dengan tanda koma (,). Contoh :

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}

Aturan penulisan :

  1. Nilai untuk property tidak boleh dalam tanda petik.

contoh :color : green;

  • Nama property bersifat case sensitive.

color : green;

14.2 Manfaat CSS

Beberapa kelebihan dari penggunaan CSS ini adalah :

  1. Lebih hemat waktu, karena kode yang yang dibuat dengan CSS dapatdigunakan untuk banyak halaman secara sekaligus.
  2. Loading halaman lebih cepat, dengan memanfaatkan CSS, Anda tidakakan menulis kode HTML yang banyak, sehingga ini membuat loading halaman web lebih cepat.
  3. Mudah dalam mengelolanya, dengan CSS, jika bagian yang salah atauingin diperbaiki, maka cukup dilakukan pada file CSSnya saja.
  4. Kompatibilitas, CSS dapat dikenal oleh berbagai browser dan device.
  5. Standard Web, kedepannya CSS akan terus dikembangkan dan menjadibagian yang tak terpisahkan dari sebuah web.

14.3 Cara Menggunakan CSS

Terdapat 3 cara memanfaatkan CSS ini untuk diterapkan pada HTML :

  • Embedded/Internal CSS, yaitu kode CSS langsung disisipkan pada fileHTML (halaman web) dengan terlebih dahulu menambahkan element style. Tag ini diletakkan pada tag <head> … </head>. Dengan sintak :

<head>

<style type=”text/css”>

Style Rules

…………

</style>

</head>

Contoh :

<head>

<style type=”text/css” >

h1{

color: #36C;

}

</style>

</head>

Artinya, setiap Anda menggunakan tag <h1> pada halaman web ini, maka otomatis akan berwarna #36C.

  • Inline CSS, yaitu kode CSS langsung disisipkan pada tag HTML, danhanya memberikan efek pada tag HTML itu saja. Sintaknya :

<element style=”…style rules….”>

Contoh :

<h1 style=”color:#36C;”>Inline CSS </h1>

Maka tulisan “Inline CSS akan berwarna #36C dan akan memberikan efek hingga tag <h1> di tutup (</h1>). Secara default, tag <h1> hanya memiliki atribut align, namun dengan inline CSS anda dapat memberikan atribut lainnya dengan style, sehingga keberadaan elemen style ini mampu memperkaya kemampuan sebuah tag.

  • External CSS, yaitu file CSS diletakkan secara terpisah dengan fileHTMLnya. Artinya Anda harus membuat sebuah file khusus untuk

mengumpulkan semua script CSS dan menyimpannya dengan ekstensi .css. Kemudian pada setiap file HTML yang akan memanggil file css tersebut harus disisip perintah :

<head>

<link href=” css file ” rel=”stylesheet”

type=”text/css”>

</head>

Type=”text/css” merupakan atribut yang wajib diberikan. href diisi dengan lokasi dan nama file css-nya. Perhatikan contoh berikut :

1.    Buat file baru dengan nama style.css, isi dengan kode berikut :

body {

color: green;

background: cyan;

font-family : arial;

}

h1, h2, h3 {

color: efabcd;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}

Perintah diatas akan memberikan efek pada setiap file HTML menggunakan tag <h1>, <h2> dan <h3>, maka otomatis akan berwarna #36C, font weight = normal, spasi 4em, margin bottom=1em dan hurufnya kecil.

2. Buat file HTML dengan css.html, lalu isi dengan kode berikut :

PRAKTIKUM

Untuk lebih memahami CSS ini, silahkan Anda praktek latihan dibawah ini dan ambil kesimpulannya.

1.    Background

Hasilnya :

2. Variasi huruf

Hasilnya :

3.    Manipulasi Teks

Hasilnya :

4.    Manipulasi Teks Lanjutan :

Hasilnya :

5. Image Properti, pastikan Anda telah memiliki sebuah gambar untuk mencoba latihan ini.

Hasilnya :

6. Manipulasi Link

Hasilnya :

7. Border style

Hasilnya :

8.    Border

Lanjutan :

9.    Margin

Hasilnya :

10. Kursor Mouse

Hasilnya :

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/css/
  2. http://www.htmldog.com/guides/css/beginner/
  3. http://htmldog.com/guides/css/intermediate/
  4. http://www.tutorialspoint.com/css/css_useful_resources.htm
  5. http://www.csstutorial.net/