Peranan CSS tentu akan berkaitan langsung dengan HTML. Lalu bagaimana cara meletakkan CSS dalam sebuah halaman kode HTML? Berikut ini akan di bahas beberapa pilihan dalam meletakkan kode CSS dalam halaman HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Posisi CSS dengan inline</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Bagian ini akan memiliki latar hitam dan warna huruf putih
</h2>
</body>
</html>
Dari contoh di atas bisa dilihat kode yang diwarnai biru. Atribut tersebut akan menampilkan teks dengan latar hitam dan warna putih untuk tulisannya. Penggunaan seperti ini memang tidak begitu susah. Namun kesulitannya nanti adalah ketika mengedit tampilan. Anda harus edit setiap atribut kode jika ingin melakukan perubahan tampilan.
<!DOCTYPE html>
<html>
<head>
<title>CSS ada di dalam tag head</title>
<style type="text/css">
h2 {
background-color:green;
color:blue;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Bisa diperhatikan kode yang diwarnai merah. Itu adalah kode CSS yang diletakkan pada bagian tag <head>. Pada kode CSS tersebut akan di defenisikan bahwasanya h2 akan ditampilkan sebagaimana yang diinginkan. Otomatis, ketika di compile, h2 akan menjadi tampil sesuai kustomisasi CSS.
Sayangnya untuk penggunaan ini, jika website memiliki 2 halaman atau lebih, maka harus dibuat CSS tersendiri. Sebagai solusinya bisa digunakan cara ketiga di bawah ini.
color:white;
}
Kemudian ambil kode HTML di bawah ini dan simpan di halaman notepad yang berbeda. Perhatikan kode yang berwarna hijau. Kode ini berfungsi untuk memanggil css dari luar halaman HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
@import url(ini.css);
</style>
</head>
<body>
<h2>
Hasil h2 ini dari CSS
</h2>
</body>
</html>
Perhatikan kode berwarna hijau. Kode tersebut disisipkan @import url(ini.css); pada html sebagai fungsi pemanggilan kode CSS. Alamat tersebut bisa saja berupa alamat halaman relatif seperti /belajar/ini.css atau dari sebuah alamat absolut seperti http://websitekoe.com/ini.css.
Cara pemanggilan lain CSS ke halaman HTML adalah dengan mengunakan tag <link rel="stylesheet" type="text/css" href="alamatpenyimpan.css">. Contohnya bisa dilihat pada contoh di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="ini.css">
</head>
<body>
<h2>
Ini ditampilkan dengan batuan CSS
</h2>
</body>
</html>
Bisa dilihat kode yang diwarnai pink.Kode tersebut berfungsi untuk memanggil css dari luar halaman html.
Pada penggunaanya banyak website menggunakan cara ke-tiga yaitu external style sheets. Salah satu keunggulannya adalah, ketika anda ingin mengubah tampilan website, cukup mengedit halaman css tersendiri. Namun pada catatan tutorial di blog ini saya menggunakan metode pertama karena akan mempermudah penulisan kode. Sebaiknya anda menerapkan nanti pada sebuah website dengan metode ke tiga.
Metode Inline Style
Meletakkan CSS dengan metode inline style ini adalah dimana kode CSS langsung disisipkan dalam tag HTML. Dalam hal ini akan digunakan atribut style. Sebagai contoh perhatikan kode di bawah ini.<!DOCTYPE html>
<html>
<head>
<title>Contoh Posisi CSS dengan inline</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Bagian ini akan memiliki latar hitam dan warna huruf putih
</h2>
</body>
</html>
Dari contoh di atas bisa dilihat kode yang diwarnai biru. Atribut tersebut akan menampilkan teks dengan latar hitam dan warna putih untuk tulisannya. Penggunaan seperti ini memang tidak begitu susah. Namun kesulitannya nanti adalah ketika mengedit tampilan. Anda harus edit setiap atribut kode jika ingin melakukan perubahan tampilan.
Metode Internal Style Sheets
Metode ini disebut juga dengan embedded Style Sheets. CSS akan diletakkan terpisah dengan kumpulan kode HTML namun masih dalam sebuah halaman. CSS di tandai dengan atribut <style>. Posisinya berada di antara tag <head> dan</head>. Sebagai contoh bisa dilihat kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>CSS ada di dalam tag head</title>
<style type="text/css">
h2 {
background-color:green;
color:blue;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Bisa diperhatikan kode yang diwarnai merah. Itu adalah kode CSS yang diletakkan pada bagian tag <head>. Pada kode CSS tersebut akan di defenisikan bahwasanya h2 akan ditampilkan sebagaimana yang diinginkan. Otomatis, ketika di compile, h2 akan menjadi tampil sesuai kustomisasi CSS.
Sayangnya untuk penggunaan ini, jika website memiliki 2 halaman atau lebih, maka harus dibuat CSS tersendiri. Sebagai solusinya bisa digunakan cara ketiga di bawah ini.
Metode External Style Sheets
Penggunaan metode ini adalah dengan meletakkan CSS pada halaman khusus. Atau dengan kata lain berada diluar halaman HTML. Ketika ingin menggunakan, cukup dipanggil CSS tadi. Untuk contoh sekarang akan digunakan dua file. Ikuti langkah berikut ini.
Bukalah notepad baru, kemudian copas kode di bawah ini dan simpan dengan nama ini.css. File harus disimpan dengan ekstensi CSS (dengan format namafile.css). Kode disimpan pada folder yang sama dengan dimana anda menyimpan file HTML.
h2 {
background-color:blue;color:white;
}
Kemudian ambil kode HTML di bawah ini dan simpan di halaman notepad yang berbeda. Perhatikan kode yang berwarna hijau. Kode ini berfungsi untuk memanggil css dari luar halaman HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
@import url(ini.css);
</style>
</head>
<body>
<h2>
Hasil h2 ini dari CSS
</h2>
</body>
</html>
Perhatikan kode berwarna hijau. Kode tersebut disisipkan @import url(ini.css); pada html sebagai fungsi pemanggilan kode CSS. Alamat tersebut bisa saja berupa alamat halaman relatif seperti /belajar/ini.css atau dari sebuah alamat absolut seperti http://websitekoe.com/ini.css.
Cara pemanggilan lain CSS ke halaman HTML adalah dengan mengunakan tag <link rel="stylesheet" type="text/css" href="alamatpenyimpan.css">. Contohnya bisa dilihat pada contoh di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="ini.css">
</head>
<body>
<h2>
Ini ditampilkan dengan batuan CSS
</h2>
</body>
</html>
Bisa dilihat kode yang diwarnai pink.Kode tersebut berfungsi untuk memanggil css dari luar halaman html.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment