Ada tiga cara untuk menerapkan CSS ke HTML: In-line, internal dan eksternal.
Kode di atas akan membuat warna merah di kode-kode tertentu yang kalian kasi tag seperti diatas.
Tapi, jika di ingat, pendekatan/pembuatan terbaik kode HTML adalah HTML harus berdiri sendiri atau ditempatkan secara terpisah, supaya kita tidak dibuat bingung saat ingin otak-atik HTML dan CSS dan gaya In-line harus dihindari sebisa mungkin. Lain halnya dengan blogspot karena di blogspot memang harus menggunakan In-line kode.
Internal
Tertanam, maupun internal, adalah gaya yang digunakan untuk seluruh halaman. Didalam unsur <head>, yang style tags mengelilingi semua halaman.
Lihat contoh dibawah:
Kode di atas akan membuat semua paragraf di halaman anda menjadi Merah dan semua link berwarna Biru.
Meskipun lebih baik untuk menghias HTML kita dengan In-line, Itu sama, biasanya lebih baik kita membuat HTML dan CSS tetap terpisah.
External
External adalah gaya yang digunakan untuk seluruh situs Multy-Halaman. Ada file CSS yang terpisah, yang hanya akan terlihat seperti :
Lihan contoh dibawah :
Terus simpan kode di atas dengan nama "style.css" tanpa tanda kutip, di directory yang sama dengan file HTML kalian supaya bisa terhubung dengan file HTML yang kalian buat.
Di file HTML kalian, panggil style.css dengan menambah kode di antara kode <head>...</head> seperti ini:
Terapkan!
Untuk mendapatkan hasil maksimal dari tutorial ini, kalian bisa membuat beberapa kode untuk diterapkan sesuai dengan apa yang kita pelajari bersama disini, jadi mulailah membuat file baru dengan text editor dan simpan document kosong berinama "style.css" dan "bla..bla.html, untuk bahan percobaan kalian sesuai dengan ide-ide yang kalian punya.
Sekarang buka file HTML yang tadi kalian buat, isi dengan kode dibawah ini :
Simpan file HTML kalian, ini akan terhubung dengan file CSS yang akan kalian buat, berhubung file CSS kalian masih kosong maka HTML yang kalian buka melalui browser kalian hanya akan terlihat putih, maka dari itu buatlah file CSS seperti contoh diatas. Kemudian reload browser kalian tadi dan lihat hasilnya.
Nanti kami akan melanjutkan tutorial ini di postingan selanjutnya.
Read More
In-line
In-line adalah gaya yang mengempaskan/menempatkan tag langsung ke HTML menggunakan atribut style.
Lihat contoh dibawah :
<p style="color: red">text</p>
Kode di atas akan membuat warna merah di kode-kode tertentu yang kalian kasi tag seperti diatas.
Tapi, jika di ingat, pendekatan/pembuatan terbaik kode HTML adalah HTML harus berdiri sendiri atau ditempatkan secara terpisah, supaya kita tidak dibuat bingung saat ingin otak-atik HTML dan CSS dan gaya In-line harus dihindari sebisa mungkin. Lain halnya dengan blogspot karena di blogspot memang harus menggunakan In-line kode.
Internal
Tertanam, maupun internal, adalah gaya yang digunakan untuk seluruh halaman. Didalam unsur <head>, yang style tags mengelilingi semua halaman.
Lihat contoh dibawah:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>p {
color: red;
}
a{
color: blue;
{
</style>
...
<html>
<head>
<title>CSS Example</title>
<style>p {
color: red;
}
a{
color: blue;
{
</style>
...
Kode di atas akan membuat semua paragraf di halaman anda menjadi Merah dan semua link berwarna Biru.
Meskipun lebih baik untuk menghias HTML kita dengan In-line, Itu sama, biasanya lebih baik kita membuat HTML dan CSS tetap terpisah.
External
External adalah gaya yang digunakan untuk seluruh situs Multy-Halaman. Ada file CSS yang terpisah, yang hanya akan terlihat seperti :
Lihan contoh dibawah :
p {
color: red;
}
p {
color: blue;
}
color: red;
}
p {
color: blue;
}
Terus simpan kode di atas dengan nama "style.css" tanpa tanda kutip, di directory yang sama dengan file HTML kalian supaya bisa terhubung dengan file HTML yang kalian buat.
Di file HTML kalian, panggil style.css dengan menambah kode di antara kode <head>...</head> seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>contoh bla..blaa</title>
<link rel="stylesheet" href="style.css">
</head>
</html>
<html>
<head>
<title>contoh bla..blaa</title>
<link rel="stylesheet" href="style.css">
</head>
</html>
Terapkan!
Untuk mendapatkan hasil maksimal dari tutorial ini, kalian bisa membuat beberapa kode untuk diterapkan sesuai dengan apa yang kita pelajari bersama disini, jadi mulailah membuat file baru dengan text editor dan simpan document kosong berinama "style.css" dan "bla..bla.html, untuk bahan percobaan kalian sesuai dengan ide-ide yang kalian punya.
Sekarang buka file HTML yang tadi kalian buat, isi dengan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>contoh bla..blaa</title>
<link rel="stylesheet" href="style.css">
</head>
</html>
<html>
<head>
<title>contoh bla..blaa</title>
<link rel="stylesheet" href="style.css">
</head>
</html>
Simpan file HTML kalian, ini akan terhubung dengan file CSS yang akan kalian buat, berhubung file CSS kalian masih kosong maka HTML yang kalian buka melalui browser kalian hanya akan terlihat putih, maka dari itu buatlah file CSS seperti contoh diatas. Kemudian reload browser kalian tadi dan lihat hasilnya.
Nanti kami akan melanjutkan tutorial ini di postingan selanjutnya.