1. Cascading Style Sheets (CSS)
a.
Pengertian
Konsep Dasar CSS :
Cascading
Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur
tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling
umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan
XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua
jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide
Web Consortium (W3C).
Cascading
Style Sheets (CSS) dapat dituliskan pada bagian <body>, <head>
suatu dokumen HTML atau di letakkan di sebuah file eksternal dan perintah CSS
dibatasi oleh tag <style> dan </style>
CSS
mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over,
warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter
lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan
format yang berbeda.
b.
Sejarah
Cascading Style Sheets (CSS) :
Pada
tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS atau
yang disebut CSS1 sebagai bahasa pemrograman standard dalam pembuatan web.
Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan
Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan
tag sendiri untuk mengatur tampilan web.
CSS
1 mendukung pengaturan tampilan dalam hal :
1.
Font (Jenis ketebalan).
2.
Warna, teks, background dan elemen lainnya.
3.
Text attributes, misalnya spasi antar baris, kata dan huruf.
4.
Posisi teks, gambar, table dan elemen lainnya.
5.
Margin, border dan padiing.
Pada
tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2
yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua
atribut dari CSS 1 dan diperluas dengan penekanan pada International
Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan
untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di
printer.
CSS
3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain
website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya
animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal
kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni
media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple
background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object
Model.
c.
Keuntungan
Penggunaan CSS :
Banyak dari keuntungan yang dapat anda
peroleh dari menggunakan CSS ini seperti :
1.
CSS
memberikan keseragaman pada halaman web.
2.
Dengan
CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS,
perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu
membuat perubahan dalam style sheet.
3.
CSS
memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
4.
Layers
(Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
5.
CSS
membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
d.
Kekurangan
Penggunaan CSS :
Tidak semua
browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan
web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser
yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua
browser dan menambahkan kode-kode khusus browser tertentu jika memang
dibutuhkan agar tampilan web anda terlihat baik di semua browser
e.
Syntax
CSS :
Syntax / kalimat CSS terdiri dari
beberapa set peraturan yang memiliki: 1
selector, 1 property, 1 value.
-
Format
penulisan kalimat CSS:
selector {
property: value }
Selector itu untuk menunjukkan bagian mana
yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti)
dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Mengatur color dari h1 ke warna merah
-
Pengelompokan
Selectors
Menulis satu kode CSS untuk berbagai
macam selector dengan cara menggunakan koma. Misalkan anda akan mengatur agar
tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang
dipisahkan oleh koma.
-
CSS
Comment
Ada baiknya anda menuliskan komentar ke
dalam kode CSS anda untuk memberi catatan pengingat. Bisa menggunakan syntax
pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di
antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan.
/* Tulis komentar anda di sini */
p
{
text-align:
justify;
/* Tulis komentar anda di sini */
color:
blue;
font-family:
arial;
}
f.
Implementasi
CSS :
Ada 4 cara memasang kode CSS ke dalam
kode HTML / halaman web, yaitu:
·
Inline
CSS
·
Embed
atau memasang kode css ke dalam bagian <head>
·
Nge
link ke external CSS
·
Import
CSS file
-
Inline
CSS
Kode CSS
dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya
digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<p style=”color:blue”>
Isi paragraf.
</p>
Pada
contoh di atas, elemen paragraf <p> di format agar tulisannya menggunakan
warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena
format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan
CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax
property: value.
-
Embedded
CSS
Anda bisa juga
menempelkan kode CSS di antara tag <head> dan </head>. Penulisan
CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag
</style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di
atas semua elemen <p> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
-
External
CSS
Kode CSS
external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css
lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda
buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang
digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam
pengimplementasian CSS dengan cara ini.
Contoh:
Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”>
</head>
-
Import
CSS
Anda bisa juga
meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
2.
Cascading Style
Sheets Priority
CSS Style Priority
adalah gaya bahasa CSS pada awal diterapkan, gaya yang akan berlaku, beberapa
gaya deklarasi menimpa satu sama lain sementara yang lainnya tidak.
Firefox, Chrome, Safari, Opera dan
Internet Explorer adalah lima desktop browser di pasar. Ini browser dan semua
browser lain mengikuti aturan standar untuk menyertakan built-in gaya default
untuk membuat elemen HTML.
Heading digunakan untuk menampilkan struktur tulisan
pada sebuah halaman. Sama seperti format heading pada aplikasi-aplikasi
pengolah kata. Tag heading pada sebuah halaman HTML berdasarkan ukuran huruf
atau karakter dan tujuan penulisan atau penggunaannya, secara umum dibedakan
menjadi 6 (enam), yaitu ;
a.
Ukuran
huruf terbesar untuk tujuan terpenting, dituliskan dengan tag <h1>..</h1>
b.
Ukuran
huruf terkecil dengan tujuan yang relatif kurang penting, ditulis dengan tag
<h6>..</h6>
Pada sebuah
halaman HTML, tag heading <h1> … <h6> ditulis diantara atau didalam
lingkungan elemen <body>.
Untuk membedakan
tag heading dengan tag <head> serta tag <title>, berikut adalah
contoh penulisannya ;
<html>
<head>
<title>Text ini biasanya muncul dipojok kiri
atas browser</title>
</head>
<body>
<h1>Contoh menggunakan tag heading
1</h1>
<h2>Contoh menggunakan tag heading
2</h2>
<h3>Contoh menggunakan tag heading
3</h3>
<h4>Contoh menggunakan tag heading
4</h4>
<h5>Contoh menggunakan tag heading
5</h5>
<h6>Contoh menggunakan tag heading
6</h6>
</body>
</html>
Tag Heading
dapat di ikuti satu atau beberapa Atribut Standar (seperti: class, dir, id,
lang, style, title, xml:lang) dan atau Atribut Event (seperti: onclick,
onmouseover, onkeypress, dll) serta Atribut Optional (seperti: align).
Atribut-atribut tersebut dapat didefinisikan untuk mengatur tampilan sebuah tag
heading sesuai keinginan.
-
Selector
Selector paling dasar dari CSS
adalah tag dari HTML itu sendiri. Efisiensi dari selector ini tergantung dari
desain dan kemampuan programmer dalam memakainya. Mengenai selector, akan kita
bahas secara lebih detail dalam tutorial CSS selanjutnya.
Posts
