Makalah
CASCADING STYLE SHEET
Disusun Oleh : Riswan Muhammad Qusyairi
Kelas X-RPL-I
SMKN 4 BANDUNG
Tahun Ajaran 2013-2014
PEMBAHASAN
MATERI CSS
Apa Itu CSS?
CSS
adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading
itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari
suatu kode ke kode lain yang saling berhubungan.
Jadi
kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah:
kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format
/ tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika
anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet,
anda harus merubah satu per satu halaman website anda dan merubah tipe font
dari arial menjadi trebuchet.
Dengan
menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup
merubah satu baris kode css untuk merubah font di semua halaman web dari arial
ke trebuchet.
Jadi,
keuntungan menggunakan CSS, akan lebih praktis!
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.
Syntax
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
Kalau diterjemahkan ke kalimat
bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah
(red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS
untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau
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.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu
properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red;
font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan
h3 di atur agar menggunakan warna merah, dengan type font arial,
dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode
CSS menggunakan beberapa baris dimana pengaturan property dan values nya di
indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan
dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda
mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala, ada baiknya anda
menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda 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 untuk
diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
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
Yuk kita bahas satu per satu…
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. Anda 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:
1. Anda membuat satu file
dengan notepad atau teks editor lain, dan berinama, misalkan: style.css,
lalu tuliskan kode-kode css di dalam file tersebut.
2. p {font-family: arial; font-size:
small;}
3. h1 {color: red; }
4. Langkah kedua adalah
memanggil file style.css dari semua halaman web. 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");
Penggunaan
Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS
untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web,
menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama,
di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan
saling bertabrakan, dari eksternal style sheet, text-align=left
sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang
akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet
lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode
yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
Class dan Id selector
Class Selector
Class
selector adalah penggabungan beberapa properties yang digunakan lebih dari satu
kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag
HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap
awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML
anda menggunakan tag <div class=nama-class> dan di akhiri dengan
tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks
tengah akan berwarna merah.
Tag H1
tengah akan berwarna hitam
Tag
H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class
selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian
yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat
bagian menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke
dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal
nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda
menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
