Setelah dasar dari pondasi
dalam pembuatan web telah dikuasai, langkah selanjutnya adalah menghiasi
dari pondasi yang telah dibangun dengan menggunakan CSS. CSS sendiri
sampai sekarang sudah sampai pada CSS3. Untuk belajar lebih mudah dapat
langsung dipelajari pada w3schools.com/css3/default.asp.
Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks - syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut:
<html>
<head>
<style type="text/css">
...isi css...
</style>
...isi halaman...
</body>
</html>
atau dapat langsung menuliskan style pada tag html-nya : <img src ="../images/contoh.gif" align="..." Padding,Border,Margin.... >
Contoh kerangka kode berikut akan disimpan pada file.css
html {...}
body {...}
a {...}
.b {...}
.c {...}
#tujuan{...}
#header h1 a:visited{...}
a.page-numbers:hover {...}
div.content-bottom{...}
table th {...}
fieldset {...}
legend {...}
form {...}
p{...}
h1 {...}
div#nama li{...}
textarea {...}
input[type="..."] {...}
select {...}
label{...}
pre {...}
code {...}
blockquote {...}
ul {...}
li {...}
Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel="stylesheet" type="text/css" href="contoh.css" /> atau dapat juga dengan <style src="contoh.css" type="text/css" media="screen" />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:
<p class="b c"></p> dan untuk penulisan id adalah <div id="header"> </div> atau lebih jelas lagi seperti pada penggunaan link <a href="#tujuan "/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;
Sedangkan untuk CSS3 akan ada lebih banyak lagi tambahan atribut dari CSS dasar sehingga akan lebih mudah dipelajari dari kasus - kasus tertentu yang akan diberikan pada topik pembahasan studi kasus tentunya masih di Tutorial Pembelajaran.
Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks - syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut:
<html>
<head>
<style type="text/css">
...isi css...
</style>
...isi halaman...
</body>
</html>
atau dapat langsung menuliskan style pada tag html-nya : <img src ="../images/contoh.gif" align="..." Padding,Border,Margin.... >
Nama Penulis: ToPu, Tanggal terbit: 10 Mei 2012
Didukung oleh: Tutorial Pembelajaran,
<a href="http://wisnu-putra.blogspot.com/">Tutorial Pembelajaran</a>
Apabila
suatu style dari css akan dipergunakan untuk beberapa halaman, akan
lebih tepat mendeklarasikan css tersebut ke dalam suatu file css
terpisah dan baru dipanggil pada suatu halaman. Contoh yang paling
sederhana adalah sebagai berikut:Didukung oleh: Tutorial Pembelajaran,
<a href="http://wisnu-putra.blogspot.com/">Tutorial Pembelajaran</a>
Contoh kerangka kode berikut akan disimpan pada file.css
html {...}
body {...}
a {...}
.b {...}
.c {...}
#tujuan{...}
#header h1 a:visited{...}
a.page-numbers:hover {...}
div.content-bottom{...}
table th {...}
fieldset {...}
legend {...}
form {...}
p{...}
h1 {...}
div#nama li{...}
textarea {...}
input[type="..."] {...}
select {...}
label{...}
pre {...}
code {...}
blockquote {...}
ul {...}
li {...}
Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel="stylesheet" type="text/css" href="contoh.css" /> atau dapat juga dengan <style src="contoh.css" type="text/css" media="screen" />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:
<p class="b c"></p> dan untuk penulisan id adalah <div id="header"> </div> atau lebih jelas lagi seperti pada penggunaan link <a href="#tujuan "/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;
- Background
- Border
- Classification
- Dimension
- Font
- Generated Content
- List and Marker
- Margin
- Outlines
- Padding
- Positioning
- Table
- Text
Sedangkan untuk CSS3 akan ada lebih banyak lagi tambahan atribut dari CSS dasar sehingga akan lebih mudah dipelajari dari kasus - kasus tertentu yang akan diberikan pada topik pembahasan studi kasus tentunya masih di Tutorial Pembelajaran.
Tidak ada komentar:
Posting Komentar