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.
Ketiga, penulisan CSS secara linked style sheet
Cara ketiga ini sebenarnya hampir mirip dengan cara kedua embedded style sheet hanya saja CSS tidak ditulis dalam satu dokumen tetapi ditulis secara terpisah dengan dokumen HTML dan mempunyai extensi file .css. mungkin sebagian mungkin ada yang bertanya kenapa CSS harus ditulis secara terpisah dengan HTML? ini adalah jawaban yang paling sederhana yaitu agar proses editing terhadap style dokumen dapat dilakukan secara mudah dan terpusat.
Untuk memanggil file css yang letaknya terpisah dengan file HTML dapat kita gunakan format linked berikut ini. letakkan format kode <link rel=stylesheet href="letak file css" type="text/css"> diantara tag <head>...</head>.
OK kita langsung saja menuju contoh biar cepet mengerti, buat dua buah file yaitu index.html dan style.css. Letakkan dua buah file tersebut di Dekstop komputer atau drive lain. kemudian panggil file index.html dan lihat hasilnya, apakah sama dengan cara yang kedua????
Oh iya hampir lupa isi file index.html dan style.css dapat Anda dapat dengan cara CoPas kode dibawah ini:
index.html
<html>
<head>
<title>Embedded Style Sheet</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<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>
style.css
<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>
Eh maaf untuk cara yang ketiga ini tidak Saya kasih contoh kode HTML yang ditulis di dalam textarea..... jadi semua prend adsloko dapat copas kode HTML diatas saja. Akhir kata jika Ada salah Saya minta maaf dan Jika masih banyak pertanyaan jangan sungkan atau malu untuk bertanya. Kasih saja komentar atau langsung hubungi kami lewat disini
SETIAP KATA YANG ANDA BERIKAN KEPADA KAMI ADALAH MUTIARA DAN HARAPAN KAMI
KARENA
KARENA
KAMI HADIR UNTUK MELAYANI
