PENGENALAN
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,
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 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
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. Hanya agar rapi dan lebih mudah di baca aja, tidak wajib.
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;
}
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>
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:
- 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; }
- 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
CLASS & ID SELECTOR
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;}
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>.
CSS FONT
CSS dapat memformat font dengan
berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan
coba bahas satu per satu ya.
- Font Family
- Font Size
- Font Style
- Font Variant
- Font Weight
- Font Color
- Font Property
CSS Font Family
Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa
merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti:
arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini
Font Family.
Cara penulisan:property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasil:
Ini adalah Heading 1 (H1)
menggunakan font Verdana
Ini adalah Heading 2 (H2) menggunakan font Times New Roman
CSS font size
CSS font size menentukan ukuran font pada bagian tertentu. Dengan
menggunakan property ini, memudahkan kita untuk mengatur ukuran font
berbeda-beda dalam satu halaman website.
Cara penulisan:
property -> font-sizevalue -> Ada berbagai macam cara penulisan value sbb:
Menentukan ukuran font secara absolut:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- larger
- smaller
- Menggunakan satuan ukuran
px, misalnya: 10px, 12px. Angka negatif tidak diperbolehkan.
- Menentukan ukuran lebih
besar atau lebih kecil sebesar x% dari ukuran font dari element sebelumnya
(parent element). Misalnya: 110% atau 80%.
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan ukuran
pasti 14px
Ini adalah
Heading 2 (H2) menggunakan ukuran pasti 12px
CSS font Style
CSS font style menentukan kemiringan font di bagian tertentu.
Ada 3 macam style yaitu:
- normal : default; browser
menampilkan font secara normal
- Italic : browser
menampilkan font miring
- oblique : browser
menampilkan font oblique.
Perbedaan italic dan oblique:
Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan,
untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type
(normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style
oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada
saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata
antara penggunaan style italic dan oblique.
property -> font-style
value -> normal, italic, oblique
Contoh penulisan:
h1 {
font-size: 14px;
font-style: italic;
}
h2 {
font-size: 12px;
font-style:oblique;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan
style italic
Ini adalah
Heading 2 (H2) menggunakan style oblique
CSS font variant
Properti font variant digunakan untuk menampilkan font dalam huruf kapital
kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi
ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat
menggunakan properti ini.Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
Hasil:
Ini
adalah Heading 1 (H1) menggunakan properti font variant
CSS font weight
Cara penulisan:
property -> font-weight
value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
300
400 – normal
500
600
700 – bold
800
900
Contoh penulisan:
h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight:100;
}
Hasil:
Tidak ada komentar:
Posting Komentar