"Sebelum kita lanjut ada baiknya kita pahami terlebih dahulu mengenai HTML"
CSS mempunyai pengertian sebagai alat/fasilitas
yang dapat mewariskan atrribut pada sebuah tag html dan berfungsi untuk
mempercantik sebuah tampilan dokumen. Apakah langsung dituliskan kedalam dokumen HTML atau secara terpisah.
Dengan adanya CSS maka kita dapat dengan mudah merubah tampilan atau
attribut sebuah tag HTML. Seperti merubah warna background & teks,
paragraph, ukuran huruf, templates website dan sebagainya.
Wah kayaknya masih banyak yang bingung!!!!! Ok kita langsung saja ke contoh penggunaan CSS pada dokumen HTML:
Pertama, penulisan CSS secara Inline style sheet atau langsung kedalam tag HTML.
Pertama, penulisan CSS secara Inline style sheet atau langsung kedalam tag HTML.
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body bgcolor="FFFFFF">
<p id="ex_1">Contoh paragraph tanpa menggunakan CSS</p>
<p id="ex_2" style="font-size:14pt;">Contoh paragraph menggunakan CSS, besar huruf 14 pt</p>
<p id="ex_3" style="font-size:18pt; color:blue;">Contoh paragraph menggunakan CSS, besar huruf 18 pt dan berwarna biru</p>
</body>
</html>
kata yang berwarna merah adalah attribute style
yang berfungsi merubah ukuran dan warna tulisan. Untuk mencobanya Anda
bisa lakukan copy & paste kode program di atas atau dibawah ini. caranya: buka
notepad -->paste kode program --> simpan --> "index.html"
(jangan lupa untuk menambahkan tanda petik pada nama file) -->
selesai --> langsung uji coba.
Dapat dijadikan catatan, ketika kita merubah attribut style sebuah tag HTML maka tidak akan merubah attribut tag HTML yang lain dikarenakan penulisan style sheet ini bersifat independent atau berdiri sendiri.
Dapat dijadikan catatan, ketika kita merubah attribut style sebuah tag HTML maka tidak akan merubah attribut tag HTML yang lain dikarenakan penulisan style sheet ini bersifat independent atau berdiri sendiri.
Kedua, penulisan CSS secara embedded style sheet
CSS didefinisikan diantara tag pembuka <style>...</style> diletakkan di atas tag <body> OK jika masih bingung langsung saja kita menuju contoh penulisannya. Pasti dijamin ngerti.....
<html>
<head>
<title>Embedded Style Sheet</title>
</head>
<style>
body{background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1{font-size:16pt; color:yellow}
P{font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<H1 id="ex_1">Header Berwarna Kuning</H1>
<P id="ex_2">Paragraph 1 mempunyai format ukuran font 12pt, tipe font Arial dan berindentasi 0.5 in. Semua dokumen mempunyai margin kiri sebesar 0.5 inch dan berwarna #0000FF , didefinisikan pada attribut tag <body>...</body> </P>
</body>
</html>
Kata yang diberi warna merah adalah
pendefinisan CSS secara embedded style sheet, jika kita melakukan
perubahan attribut tag HTML maka tag HTML yang ada di dokumen akan
berubah semua. misalnya: kita rubah attribut color:yellow pada tag H1 dengan color:black maka semua tag H1 di dalam dokumen akan mengalami perubahan.
Seperti yang sebelumnya, Anda pun dapat melakukan CoPas (copy --> paste) kode HTML beriktu untuk dicoba sendiri.
0 komentar:
Posting Komentar