Apa Itu CSS ? - Keuntungan Penggunaan 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 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; font-family:arial;
font-size:150%;}
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%;
}
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>
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
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 dapat memformat font dengan berbagai macam cara mulai dari
pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.
·
Font Property
CSS dapat memformat font
dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya
akan coba bahas satu per satu ya.
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 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-size
value -> Ada berbagai macam cara penulisan value sbb:
Menentukan ukuran font secara absolut:
·
xx-small
·
x-small
·
small
·
medium
·
large
·
x-large
·
xx-large
Menentukan ukuran secara relatif:
·
larger
·
smaller
Menentukan berdasarkan ukuran pasti:
·
Menggunakan
satuan ukuran px, misalnya: 10px, 12px. Angka negatif tidak diperbolehkan.
Menentukan ukuran berdasarkan persen:
·
Menentukan
ukuran lebih besar atau lebih kecil sebesar x% dari ukuran font dari element
sebelumnya (parent element). Misalnya: 110% atau 80%.
Contoh penulisan:
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
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.
Cara penulisan:
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
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
Properti font weight
digunakan untuk mengatur ketebalan font.
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:
Ini adalah Heading 1 (H1) menggunakan font weight bold
Ini adalah Heading 2 (H2) menggunakan font weight 100
Properti color digunakan
untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari
properti font.
Cara penulisan:
property
-> color
value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)
Contoh penulisan:
h1
{
font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan
warna merah
Ini adalah Heading 2 (H2) menggunakan warna biru
Katakunci : CSS, kelebihan dan kekurangan css
0 Response to "Apa Itu CSS ? - Keuntungan Penggunaan CSS"
Posting Komentar