Belajar Membuat CSS Eksternal
Assalamualaikum Sahabat Ikut Belajar Blog, jangan bingung karena tidak ada kerjaan. mending internetan dan Belajar di Blog Belajar. hehe promosi dikit..
langsung yach sekarang kita Belajar Membuat CSS Eksternal Pada CSS.
Pada contoh-contoh sebelumnya, jenis CSS yang dibuat adalah CSS internal karena ditulis jadi satu dengan code (X)HTML nya. Perhatikan kembali contoh berikut ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
p.group {
color: #FF0000; /* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
</style>
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3.
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.
</p>
</body>
</html>
Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang disebut CSS eksternal yang memiliki file extension .css
Sebagai contoh, misalnya style di atas kita simpan ke dalam file style.css
style.css
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
p.group {
color: #FF0000; /* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
Lantas… bagaimana cara mengintegrasikan style.css tersebut ke halaman web ang kita buat? Caranya adalah dengan memberikan perintah
<link rel="stylesheet" type="text/css" href="style.css" />
pada bagian header halaman web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3.
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.
</p>
</body>
</html>
Dengan konsep ini, Anda dapat menggunakan CSS eksternal yang berasal dari situs web lain untuk mengatur style halaman web Anda, dengan cara enambahkan URL secara lengkap pada atribut href nya.
<link rel="stylesheet" type="text/css" href="http://.../style.css" />
Post a Comment
Silahkan Berkomentar Dengan Baik dan Sopan
No Spam
No Link
Terima Kasih Telah Berkunjung Ke Blog ini