Tuesday, 27 September 2011

Membuat CSS Eksternal

| Tuesday, 27 September 2011 | 0 comments


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  yang 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  menambahkan  URL  secara
lengkap pada atribut href nya. 

<link rel="stylesheet" type="text/css" href="http://.../style.css" />




0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com