SEJARAH HTML DAN CSS
Pengertian HTML
HTML adalah singkatan dari HyperText Markup
Language yaitu bahasa pemrograman standar yang digunakan untuk membuat
sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai
informasi di dalam sebuah penjelajah web Internet
(Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam
situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan
antar situs dalam dunia internet. Supaya dapat
menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana
ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan
perintah-perintah HTML.
HTML
merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di
dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup
Language (SGML). Sekarang ini HTML merupakan standar Internet yang dikendalikan
dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun
1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM
pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika
energi tinggi di Jenewa). HTTP atau Hypertext Transfer
Protokol merupakan protokol yang digunakan untuk mentransfer data atau document
yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang
memungkinkan Anda menjelajah internet dan melihat halaman web.
Versi HTML
a)
HTML versi 1.0
Pemrograman Web pada HTML versi 1.0. memiliki
kemampuan yakni menampilkan Heading, Paragraph, Hypertext, List, cetak tebal,
dan miring pada penulisan teks. Versi ini hanya mendukung peletakan gambar pada
dokumen tanpa membolehkan teks berada disekeliling gambar (wrap text;top or
bottom).
b) HTML versi 2.0
Pemrograman
Web pada HTML
versi 2.0. ini terdapat penambahan kualitas TML yang ada pada kemampuan
menampilkan sebuah form di dokumen. Adanya form ini memudahkan kita dalam
memasukkan nama, alamat, serta saran atau kritik. Dan mulai dari versi ini HTML
menjadi pioneer dalam perkembangan homepage interaktiv
.
c) HTML versi 3.0
Pemrograman
Web pada HTML
versi 3.0. ini ada penambahan beberapa fasilitas baru misalnya adanya tabel.
Versi ini disebut juga HTML+, tetapi tidak tertahan lama dan segera
digantikan dengan HTML versi 3.2. (18/12/1997).
d) HTML versi 4.0
Pemrograman
Web pada HTML
versi 4.0. ini memiliki banyak perubahan serta revisi dari HTML versi
sebelumnya. Hampir semua perintah-perintah HTML meliputi Table, Image, Text, Link, Form, Imagemaps,
Meta dan lainnya. Setelah itu pada tanggal 24 April 1998 lahirlah HTML
versi 4.01 yang dikeluarkan oleh W3C secara resmi. Pada tahun 1999 versi HTML
4.01 menjadi standart HTML, versi ini merupakan revisi dari versi sebelumnya
yaitu HTML versi 4.0 (18 Desember 1997). HTML versi ini (HTML 4.01) masih
menjadi standart resmi hingga sekarang ini.
e) HTML versi 5.0
Pemrograman
Web pada HTML
versi 5.0 versi ini adalah perkembangan HTML generasi saat ini. Dan mungkin
akan terus berkembang searah mengikuti perkembangan zaman. Versi ini juga
merupakan generasi terakhir.
Beberapa fitur baru yang berada pada
versi 5 ini antara lain :
·
Fitur canvas memungkinkan kita untuk menggambar.
·
Fitur Video dan Audio sebagai media player untuk memutar
video atau musik.
·
Elemen-element baru seperti, artikel, header, footer , dan
navigasi.
·
Fitur Dukungan yang lebih baik guna penyimpana secara
offline local.
·
Fitur Control dalam bentuk baru, meliputi ; kalender, waktu,
email, search, URL
Akan tetapi sampai saat ini HTML
versi ini belum menjadi standart resmi. Banyak browser juga yang belum support
terhadap HTML 5. HTML versi ini (HTML 5) mungkin akan menjadi standart baru
untuk HTLM dan XHTML.
Kelebihan Dan Kekurangan HTML
Kelebihan-kelebihan
HTML antara lain:
1) Merupakan bahasa penkodean yang
lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai
jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang
berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor
karakter ASCII.
2) Dapat disisipi gambar baik gambar
statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan
hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web,
dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak),
poligon (kurva tak beraturan) atau lingkaran digunakan untuk 'jump' ke halaman
lain, atau link ke halaman di luar web yang bersangkutan.
3) Dapat disisipi animasi berupa Java
Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave
(untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan
file-file animasi ini).
4) Dapat disisipi bahasa pemrograman
untuk mempercantik halaman web seperti Javascript, VBScript, Active Server
Pages, Perl, Tcl, PHP dan sebagainya.
5) Bukan merupakan bahasa pemrograman
jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan
browser.
Kekurangan dari HTML ini adalah:
1) Menghasilkan halaman yang statis,
untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman
tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau
Shockwave.
2) Memiliki tag-tag yang begitu banyak
sehingga susah dipelajari untuk yang masih awam.
3) Tidak dapat menghasilkan halaman
yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan
server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat
menangani hal tersebut, contohnya Perl atau Tcl.
Struktur Dasar HTML
Dalam
penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag
kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda"/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
v <HTML> Sebagai tanda awal dokumen HTML.
v <HEAD> Sebagai informasi page header. Di
dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT,
STYLE & META.
v <TITLE> Sebagai titel atau judul halaman.
Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas
browser Anda (pada title bar).
Contoh : <TITLE>Tips HTML --
www.klik-kanan.com</TITLE>
v <BODY> Di dalam tag ini bisa
diletakkan berbagai page attribute seperti warna latar belakang, warna teks,
warna link, warna visited link, warna active link dan lain-lain.
Atribut : BGCOLOR, BACKGROUND, TEXT,
LINK, VLINK, ALINK, LEFTMARGIN
& TOPMARGIN.
Contoh : <BODY
bgcolor="#000000" background="images/pcb.gif"text="#FFFFFF"
link="#FF0000"
vlink="FFFF00" alink="#0000FF">
Sebuah
contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF"
background="images/gambar1.gif" text="#FF0000">
Letakkan
text, images, dan link Anda di sini
</BODY>
</HTML>
Pengaturan Teks
Untuk
mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini
yang biasa digunakan dalam pengaturan teks :
1) Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran
huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara
<H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan
<H6> merupakan ukuran terkecil.
Contoh : <H2>Tutorial
Html</H2>
2) Paragraph Baru: <P>
Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran
</P> tapi juga bisa tidak diberi.
3) Line
Break: <BR>
Digunakan untuk pindah ke baris baru.
4) No Line
Break:
<NOBR> Bila
digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris
bawahnya bila baris pertama sudah terlalu panjang.
5) Font
<FONT>
Untuk mendefinisikan berbagai attribut FONT,
yaitu : SIZE, FACE, COLOR.
·
SIZE: Ukuran font yang digunakan,
berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran
terbesar.
·
FACE: Jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila
terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis
bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font
yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer
pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan
font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda
ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan
graphic.
·
COLOR: Warna font, didefinisikan dengan
menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red
misalnya).
Contoh : <FONT SIZE=4 FACE="Verdana, Arial,
Helvetica"
COLOR="#FF0000">Contoh teks yang berwarna
merah</FONT>
6) Base Font:
<BASEFONT>
Digunakan untuk mendefinisikan "default text". Attribut sama dengan
attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh : <BASEFONT SIZE=2
FACE="Arial,Helvetica" COLOR="#FF0000">
Lists
Terdapat
tiga tipe list yang dapat digunakan, yaitu :
·
Unordered Lists: <UL> Untuk membuat daftar item dengan
tanda bullet. List entries didefinisikan dengan tag <LI>.
·
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap
item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan
dengan <LI> tag.
·
Definition Lists: <DL>
Contoh
:
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
Images
·
Images: Digunakan untuk menampilkan image
atau animasi gif pada halaman web Anda.
·
Atribut: alt, align=(center, left, right),
hspave, vspace, border, width & height
Contoh : <IMG SRC="logo.gif" alt="Ini
adalah logo halaman pembuka" width=200
height=100>
<IMG SRC="logo.gif"
hspace=10 vspace=5 align=right border=2>
·
Links : Digunakan untuk membuat link ke
halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh : <A HREF="halaman2.html">Klik di
sini</A>
<A
HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A>
Untuk
membuat link pada alamat e-mail.
<A
HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke
bagian lain pada
halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A>
Untuk membuat link
kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A>
Untuk membuat
link dengan menggunakan gambar.
Tabel
Tabel sangat penting artinya dalam desain web. Karena dengan
menggunakan tag table Anda dapat membuat halaman web "terbagi" pada
beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda
baca ini. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan
table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah
bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE>
dan </TABLE>
Ø <TABLE> Terdiri dari atribut :
·
align - perataan : rata kiri (left),
tengah (center) atau kanan (right).
·
bgcolor - warna latar belakang (background)
dari tabel.
·
border - ukuran lebar border tabel (dalam
pixel).
·
cellpadding - jarak antara isi cell dengan
batas cell (dalam pixel).
·
cellspacing - jarak antar cell (dalam pixel).
·
width - ukuran tabel dalam pixel atau
percent.
Contoh
: <TABLE align="center" bgcolor="#0000FF"
border="2" cellpadding="5"
cellspacing="2" width="90%">
Ø <TR> Tag ini digunakan untuk membuat
baris baru (pada tabel). Terdiri dari atribut:
·
align - perataan : rata kiri (left), tengah (center) atau
kanan (right).
·
bgcolor - warna latar belakang dari baris.
·
valign - perataan vertikal : top, middle atau bottom.
Contoh
: <TR align="right" bgcolor="#0000FF" valign=top>
Ø <TD> Tag ini digunakan untuk membuat
kolom baru pada tabel.
·
align - perataan : rata kiri (left), tengah (center) atau
kanan (right).
·
background - image yang digunakan sebagai latar belakang
dari kolom.
·
bgcolor - warna latar belakang
·
colspan - lihat gambar contoh
·
height - ukuran tinggi cell dalam pixels.
·
nowrap - membuat supaya isi dari kolom tetap berada pada
satu baris.
·
rowspan - lihat gambar contoh
·
valign - perataan vertikal :top, middle atau bottom.
·
width - ukuran kolom dalam pixel atau percen.
Contoh
: <TD align="right" background="back.gif"
bgcolor="#0000FF" colspan="3"
height="200" nowrap
rowspan="2" valign="bottom" width="300">
Frames
Frames
merupakan salah satu fitur baru dari HTML yang hanya di implementasikan pada
browser terbaru (Netscape 2.0 atau yang lebih tinggi) yang memungkinkan satu
jendela browser dibagi menjadi beberapa bagian, masing-masing halaman HTML
bersifat independen yang dimuat didalamnya dan halaman HTML ini dapat
berinteraksi satu sama lain. Setiap halaman dimuat dalam setiap bagian dari
frame dokumen HTML yang terpisah.
Contoh: <html>
<head><title>testing complex
frames</title></head>
<frameset
cols="33%,33%,33%">
<frameset
rows="*,100">
<frame
src="page1.html" NAME="index">
<frame src="page2.html"
NORESIZE>
</frameset>
<frameset>
<frame src="main.html"
NAME="main">
</frameset>
<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html"
SCROLLING="no"> </frameset> </frameset>
<noframes><body> This page requires a frames-enabled browser!
</body></noframes> </html>
Kumpulan
Tag HTML
!-- -->
|
Memberi
komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak
akan terlihat pada browser
|
<a href>
|
Membuat
link ke halaman lain atau ke bagian lain dari halaman tersebut
|
<a name>
|
Membuat
nama bagian yang didefinisikan pada link pada halaman yang sama
|
<applet>
|
Sebagai
awal dari Java applets
|
<area>
|
Mendefinisikan
daerah yang dapat diklik (link) pada image map
|
<b>
|
Membuat
teks tebal
|
<basefont>
|
Membuat
atribut teks default seperti jenis, ukuran dan warna font
|
<bgsound>
|
Memberi
(suara latar) background sound pada halaman web
|
<big>
|
Memperbesar
ukuran teks sebesar satu point dari defaultnya
|
<blink>
|
Membuat
teks berkedip
|
<body>
|
Tag awal
untuk melakukan berbagai pengaturan terhadap text, warna link & visited
link
|
<br>
|
Pindah
baris
|
<caption>
|
Membuat
caption pada tabel
|
<center>
|
Untuk
perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan
komentar pada halaman web tidak tidak akan nampak pada browser
|
<dd>
|
Indents
teks
|
<div>
|
Represents
different sections of text.
|
<embed>
|
Menambahkan
sound or file avi ke halaman web
|
<fn>
|
Seperti
tag <a name>
|
<font>
|
Mengganti
jenis, ukuran, warna huruf yang akan digunakan utk teks
|
<form>
|
Mendefinisikan
input form
|
<frame>
|
Mendefinisikan
frame
|
<frameset>
|
Mendefinisikan
attribut halaman yang akan menggunakan frame
|
<h1> ... <h6>
|
Ukuran
font
|
<head>
|
Mendefinisikan
head document.
|
<hr>
|
Membuat
garis horizontal
|
<html>
|
Bararti
dokumen html
|
<i>
|
Membuat
teks miring
|
<img>
|
Image,
imagemap atau an animation
|
<input>
|
Mendefinisikan
input field pada form
|
<li>
|
Membuat
bullet point atau baris baru pada list (berpasangan dengan tag <dir>,
<menu>, <ol> and <ul> )
|
<map>
|
Mendefinisikan
client-side map
|
<marquee>
|
Membuat
scrolling teks (teks berjalan) - hanya pada MS IE
|
<nobr>
|
Mencegah
ganti baris pada teks atau images
|
<noframes>
|
Jika
browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan
awal dan akhir list
|
<p>
|
Ganti
paragraf
|
<pre>
|
Membuat
teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan
awal script
|
<table>
|
Membuat
tabel
|
<td>
|
Kolom pada
tabel
|
<title>
|
Mendefinisikan
title
|
<tr>
|
Baris pada
tabel
|
<u>
|
Membuat
teks bergaris bawah
|
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
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:
a. 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.
b. Embeded 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.
c. 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>
d. 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 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>
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>.
Sumber dari:
