Cascading Style Sheets (CSS) berguna untuk mendesain
tampilan dokumen terutama HTML dengan cara memisahkan isi dari dokumen HTML
dengan kode untuk menampilkan (CSS). Jika ada banyak file HTML, kita hanya
memerlukan 1 file CSS, sehingga ketika kita ingin menggati jenis huruf pada
file CSS maka semua file HTML yang berhubungan pada File CSS tersebut akan
berubah. CSS bisa dipasan pada dokumen HTML yang telah jadi.
Aturannya terdiri dari 2
bagian penting
1. Selektor (selector) contoh H1
2. Deklarasi (declarator) contoh
{ color : green }
H1 { color : green }
property value
Selektor adalah
penghubung antara dokumen HTML dan style. Selektor mendefinisikan elemen apa
yang akan terkena dampak dari deklarasi tersebut. Deklarasi adalah bagian dari aturan yang
menentukan efek apa yang akan diberikan. Sesuai contoh diatas maka seluruh
elemen H1 akan berwarna hijau.
Cara
penggunaan CSS :
1. External
Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana
:
- <link, merupakan tag pembuka diakhiri dengan tanda “>”
- rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
- type=“text/css”, file yang dipanggil berupa css
- href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh
Penggunaan :
Tulis text HTML di notpad++
body {
color: green;
background: white;
font-family : arial;
}
kemudian save as CSS
Kemudian tulis text HTML di notpad++
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css"
HREF="efek.css">
</HEAD>
<BODY>
<H1>PENS
ITS</H1>
<P> PENS ITS adalah kampus teknik yang concern ke bidang elektro
</BODY>
</HTML>
Save as HTML
buka dengan web browsel file yang tersimpan maka hasilnya akan seperti ini:
2. Internal Style Sheet
Bentuk
umum :
<style
type=“text/css”>
…definisi style…
</style>
Contoh Penggunaan :
tulis pada noypad++
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<STYLE type="text/css">
body {
color: white;
background: green;
font-family : arial;
}
</STYLE>
</HEAD>
<BODY>
<H1>Zefnet</H1>
<P>Zefnet
adalah sebuah web Developer dan Linux
Center
</BODY>
</HTML>
save as HTML
buka dengan browser maka hasilnya akan seperti ini:
