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 fontarial 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, 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
/ 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 h3semua 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,blue,pink;
font-family:arial,trebuchet; font-size:150%,200%;}
Pada contoh di atas, tag h1, h2 dan h3 di
atur agar menggunakan warnamerah, 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%;
}
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;
}
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>
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.
p
{font-family: arial; font-size: small;}
h1
{color: red; }
2. 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>
<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
Masih ingat kan
pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. Pada
contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai
selector.
Misalkan anda
membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin
memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin
tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom
tengah berwarna hitam.
Untuk kasus
seperti ini, anda bisa menggunakan Class selector 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;}
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>
<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>
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>.
.jpg)
thanks for the information
ReplyDelete