CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita .
Perintah-perintahnya :
1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
Maka hasil dari style diatas adalah sebagai berikut:
2. Dengan menaruhnya di dalam header dokumen html.
Sebagai
contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di
dokumen html, cara penulisannya adalah sebagai berikut:
Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :
3.
Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang
tespisah dari dokumen html, secara umum yang terakhir ini adalah yang
paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS
tersebut kita cukup menambahakan yang berikut ini di header dokumen
html:
Sehingga di dokumen html akan terlihat seperti berikut ini:
Untuk
mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman
website, berikut kita akan membuat sebuah halaman website sederhana
yang menggunakan CSS.
Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”
Yang
berada diantara <–– dan ––> hanya sebagai keterangan agar lebih
mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut
dengan browser, maka kita akan melihat halaman yang polos dengan tulisan
seadanya.
Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.
1
2
3
| < head > < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > |
1
2
3
| hr { color :sienna;} p { margin-left : 20px ;} body { background-image : url ( "images/back40.gif" );} |
1
| margin-left : 20px |
Internal Style Sheet
Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.
1
2
3
4
5
6
7
| < head > < style > hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </ style > </ head > |
Inline Style
Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.Contoh berikut akan menambahkan warna dan margin pada paragraf :
1
| < p style = "color:sienna;margin-left:20px" > |
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.
1
2
3
| < head > < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > |
1
2
3
| hr { color :sienna;} p { margin-left : 20px ;} body { background-image : url ( "images/back40.gif" );} |
1
| margin-left : 20px |
Internal Style Sheet
Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.
1
2
3
4
5
6
7
| < head > < style > hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </ style > </ head > |
Inline Style
Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.Contoh berikut akan menambahkan warna dan margin pada paragraf :
1
| < p style = "color:sienna;margin-left:20px" > |
Tidak ada komentar:
Posting Komentar