Cara Menghubungkan File CSS dengan HTML
Cara Menempatkan/ Menghubungkan File CSS dengan HTML
 |
| Menghubungkan file CSS dg HTML |
Teman kan sudah tau bahwa cara penulisan CSS itu ada (Selector, deklarasi, property, dan value) yang sudah dijelaskan pada artikel sebelumnya. Ok langsung saja berikut adalah cara menghubungkan file CSS dengan HTML.
1. Inline
Inline dengan kata lain adalah langsung pada tag. Merupakan penempatan file atau kode CSS langsung pada sebuah tag HTML dengan cara menuliskan style=” ” didalam tag HTML tersebut. Perhatikan contoh berikut :
<H1 style=”color:blue”> Belajar CSS </H1>
Pada syntak diatas kode CSS bertujuan untuk memberi warna pada tag H1. dimana ketika pada tag H1 diberi kata Belajar CSS maka akan tampil dengan warna biru. Seperti gambar berikut :
 |
| Contoh inline |
2. Internal
Untuk bagian internal masih diletakkan pada file HTML yang sama. Tetapi file CSS nya dipisah yakni diletakkan di dalam bagian <Head> … </Head> pada HTML, Lalu menggunakan tag <style> … </style>. Agar lebih jelas perhatikan contoh berikut :
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<Style>
H1 {
Color : Red ;
Font-family : Arial ;
}
</Style>
</head>
<body>
<H1> Belajar CSS Pemula </H1>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<Style>
H1 {
Color : Red ;
Font-family : Arial ;
}
</Style>
</head>
<body>
<H1> Belajar CSS Pemula </H1>
</body>
</html>
Pada syntak diatas Kode CSS berfungsi untuk mengubah niali (value) yang ada pada tag H1 menjadi berwarna merah dan jneis tulisannya Arial.
Seperti yang teman lihat pada syntak diatas setelah tag style kemudian panggil selektor yang ingin kita ubah warna atau jenis tulisannya, deklarasi, properti, dan nilai yang ingin kita tampilkan. seperti gambar berikut :
 |
| Contoh Internal |
3. External
Selanjutnya menempatkan file CSS diluar file HTML nya atau buat file CSS sendiri. Setelah file CSS nya dibuat dengan format .CSS, baru kemudian dihubungkan ke HTML dengan cara menuliskan tag Link pada HTML. Perhatikan contoh berikut :Ada dua file pertama namafile.html :
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<link rel=”stlyesheet” href=”namafile.css”>
</head>
<body>
<H1> Belajar CSS pemula </H1>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<link rel=”stlyesheet” href=”namafile.css”>
</head>
<body>
<H1> Belajar CSS pemula </H1>
</body>
</html>
Dan file kedua namafile.css :
H1 {
Color : chocolate;
Font-family : times new roman;
}
Color : chocolate;
Font-family : times new roman;
}
Dari syntak diatas ada dua file. Pertama file HTML kedua file CSS. Cara menghubungkan file HTML ke CSS menggunakan tag <link rel=”stylesheet” hreff=”namafile.css”>. sehingga tag yang dipanggil di file css dapat dirubah warna, jenis tulisan dsb. Maka akan menampilkan niali yang ada pada tag H1 menjadi warna merah dan bertulisan times new roman. Seperti gambar berikut :
 |
| Contoh external |
Baik teman-teman itulah artikel singkat yang membahas tentang cara penempatan/ menghubungkan file CSS dengan HTML. untuk tutorial selanjutnya yakni Part 3 kami akan membahas
0 Response to "Cara Menghubungkan File CSS dengan HTML"
Post a Comment