Hi, pada kesemapatan sharing kali ini penulis akan membahas tentang bagaimana cara menggunakan css file ke dalam HTML. Pada sesi sebelumnya, penulis bisa membuat memodifikasi file HTML dengan source code CSS. Sebelum penulis sharing tentang membuat navigasi drop down list, untuk kali ini penulis akan menjelaskan bagaimana cara embed source code CSS file ke dalam HTML.
Untuk bisa embed source code CSS ke dalam HTML, ada beberapa cara yang bisa dilakukan.
1. Bisa dilakukan dengan cara memberikan tag <style> pada file HTML.
contoh::
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
</body>
Untuk embed source code CSS ke dalam HTML tambahkan tag <style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Embed CSS</title>
<style>
a
{
color:red;
text-decoration:none;
}
a:hover
{
color:black;
}
li
{
list-style-type:none;
}
</style>
</head>
Tag <style> harus diakhiri penutup </style>. Ini adalah salah satu cara bagaimana embed source code CSS ke dalam file HTML dengan menyertakan source code CSS dalam satu file HTML.
2. Cara berikutnya adalah embed source code dalam file yang lain yang akan dipanggil dalam file HTML.
pertama buat file HTML, dan simpan file dengan nama yang akan dipakai misal (test.html). Kemudian buat file satu lagi yang akan di embed source code CSS. Save dengan file berekstensi .css. Buat file HTML seperti contoh di atas:
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
</body>
simpan dengan nama index.html
kemudian buat file.css nya dan simpan dengan nama style.css
a
{
color:red;
text-decoration:none;
}
a:hover
{
color:black;
}
li
{
list-style-type:none;
}
Untuk cara yang berikutnya ini tidak perlu menambahkan tag <style> untuk embed source code CSS nya. File CSS akan dipanggil dengan cara menambahkan dimana letak, atau lokasi folder yang menampung source code CSS.
Untuk memanggil file CSS, maka menambahkan beberapa source code di dalam section head.
<link rel="stylesheet" type="text/css" href="css/style.css" />
css/style.css ----> Nama css file adalah style.css, ini bisa dirubah dengan nama yang disukai. misal sheet.css (sesuai dengan nama css yang telah di simpan).
Untuk hasil run dari source code CSS nya akan seperti:
