Ada 3 cara dalam menempatkan file CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML).
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header : berisi Deskripsi web/ judul.
Menu : menu link web.
Content : isi dari web.
Footer : identitas/hak cipta.
Ada dua cara menempatkan dokumen CSS dalam web yaitu :
1.Posisi (Position)
Mengunakan properti position terdapat 4 cara:
-
Absolute, Posisi elemen berpatokan pada jendela browser.
- Fixed, Posisi elemen tetap walaupun digeser.
-
Static, Posisi normal (default).
- Relative, Posisi elemen tergantung dari elemen yang lain.
2.Menempel (Float)
Menggunakan properti float atau clear:
- Clear:left, Elemen akan menempel pada sebelah kiri dan berada di bawah.
- Clear:right, Elemen akan menempel pada sebelah kanan dan berada dibawah.
- Clear:both, Elemen akan berada pada posisi bawah elemen diatasnya.
- Float:left, Elemen akan menempel pada sebelah kiri elemen induk.
- Float:right, Elemen akan menempel pada sebelah kanan elemen induk.
Margin, jarak/batas elemen dengan elemen lain.
Border, border/gari tepi elemen.
Padding, jarak elemen dengan isi elemen.
Contoh menulis,
Tanpa CSS :
<html> <head> <title>Apa Itu CSS ?</title> </head> <body> <h1><font face="Verdana">Apa Itu CSS ?</font></h1> </body> </html>
Menggunakan Internal CSS,
<html> <head> <title>Belajar CSS</title> <style type="text/css"> h1 { font-family: verdana; } </style> </head> <body> <h1>Belajar CSS</h1> </body> </html>
Selanjutnya apabila kita ingin menggunakan external CSS maka kita harus membuat file CSS, dengan eksistensi .css, kita coba membuatnya dengan nama style.css
h1 { font-family: verdana; }
Sekarang kita menulis kode HTML-nya seperti ini
<html> <head> <title>Apa Itu CSS ?</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Apa Itu CSS ?</h1> </body> </html>
Diatas hanya akan mengubah tag <h1> yakni akan mengubah font menjadi Verdana, maka akan menjadi seperti ini
Apa Itu CSS ?
Dalam dokumen HTML kita perlu memanggil file CSS dengan menggunakan tag
<link>
yang harus anda letakan diantara tag <head>.Kode CSS mempunyai dua bagian utama yaitu: Selector, dalam hal ini h1 dan yang kedua terdapat diantara kurung kurawal
{font-family: verdana}. Didalam
deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini
font-family dan value yakni verdana.Tidak semua browser dapat menampilkan jenis font yang kita letakan didalam CSS. Sebagai contoh anda ingin menampilkan dari keluarga font Serif dan fontnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum.Seperti ini :
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
CSS
- Secara umum kode CSS ditandai dengan sebuah tag pembuka <style type=”text/css”> dan diakhiri dengan tag penutup </style>.
- Setiap bagian kode dikenal dengan istilah syntax. Contoh #header-wrapper {
width: 940px;
margin:10px auto;
padding:10px 0;
} - Kode CSS bisa disimpan di antara tag pembuka <head> dan tag penutup </head> tetapi dapat juga disimpan di antara tag pembuka <body> dan tag penutup </body>.
- Apabila anda memasang kode CSS secara eksternal maka flie tersebut harus bereksistensi .css dan uploadlah di file hosting dan memanggilnya (misalkan style.css) maka kodenya
Javascript<link rel="stylesheet" type="text/css" href="style.css">
- Kode Javascript biasanya diletakan di antara tag pembuka <script> dan tag penutup </script> atau dalam bentuk yang berbeda dengan tag pembuka <script type=”text/javascript”> dan tag penutup </script>.
- Javascript dapat disimpan di template biasanya diantara tag pembuka <body> dan tag penutup </body> atau di antara tag pembuka <head> dan tag penutup </head> .
bagus tampilannya
BalasHapusthanks
BalasHapusSangat complette.
BalasHapusInfo yang sangat menarik sob.
BalasHapusTetapi say pelajari lebih dalam dulu ya.