Apakah CSS ? Bagian II – Perbedaan CSS dan HTML

CSS dan HTML adalah dua “gaya” penulisan kode dalam membentuk halaman-halaman pada website. Keduanya banyak dipergunakan dalam praktik pembuatan website. HTML telah banyak dikenal dan akan terus dipergunakan mengingat cara penulisannya yang cukup sederhana dan mudah untuk dipraktikkan. Sedangkan CSS baru belakangan dikembangkan, namun memiliki banyak keunggulan yang tidak dimiliki oleh HTML.

Banyak hal yang membedakan HTML dengan CSS. Untuk itu, kita bisa mempelajarinya dengan berdasarkan pada pengalaman pemakaian HTML secara umum. Beberapa contoh di bawah ini dapat memperlihatkan kemudahan penggunaan stylesheet dibandingkan dengan menggunakan kode HTML biasa.

Struktur Halaman CSS Lebih Sederhana

Website dapat dibangun dengan menggunakan kode HTML sederhana. Sebagai contoh, sebuah halaman dibuat dengan mengandalkan kode-kode HTML seperti berikut ini:

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
  </body>
</html>

Perhatikan bahwa untuk mengatur text pada Tag <H1> dan Tag <p> ditambahkan Tag baru di dalamnya, yakni Tag <font>.

Halaman tersebut dapat dituliskan dengan menggunakan stylesheets sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:24px;
            color:red;
            }
    	p {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:12px;
           color:orange;
           }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
  </body>
</html>

Ketika kedua file tersebut disimpan dalam file yang berbeda, kemudian keduanya ditampilkan pada Internet browser. Maka, kedua file tersebut akan ditampilkan dengan cara yang sama.

Akan tetapi, struktur kode HTML pada file pertama menggunakan Tag <font> yang berdiri sendiri. Jika pengaturan pada text tersebut akan diterapkan pada tempat yang berbeda, maka seluruh pengaturan yang ditulis pada Tag <font> harus ditulis ulang. Demikian halnya pengaturan text pada Tag <p> di bawahnya. Jika pengaturan text pada paragraf tersebut akan ditempatkan pada Tag <p> lainnya, maka seluruh pengaturan yang ditulis pada Tag <font> harus ditulis ulang.

html-vs-css-1

<h3>Keseragaman Style </h3>
<p>Perhatikan dua contoh berikut :</p>
<p>Halaman yang menggunakan style yang ditulis dengan kode HTML : </p>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td width=”600″ bgcolor=”#CCCCCC”><pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Halaman HTML&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;<span class=”style2″>&lt;font face=&quot;Arial&quot; size=&quot;2&quot; color=&quot;Red&quot;&gt;</span>BENGAWAN SOLO – Cipt. GESANG<span class=”style2″>&lt;/font&gt;</span>&lt;/h1&gt;
&lt;p&gt;<span class=”style2″>&lt;font face=&quot;Georgia&quot; size=&quot;2&quot; color=&quot;orange&quot;&gt;</span>Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu<span class=”style2″>&lt;/font&gt;</span>&lt;/p&gt;
&lt;hr&gt;
&lt;h1&gt;<span class=”style2″>&lt;font face=&quot;Arial&quot; size=&quot;2&quot; color=&quot;Red&quot;&gt;</span>BENGAWAN SOLO – Cipt. GESANG<span class=”style2″>&lt;/font&gt;</span>&lt;/h1&gt;
&lt;p&gt;<span class=”style2″>&lt;font face=&quot;Georgia&quot; size=&quot;2&quot; color=&quot;orange&quot;&gt;</span>Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu<span class=”style2″>&lt;/font&gt;</span>&lt;/p&gt;
&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt; </pre></td>
</tr>
</table>
<p>Jelaslah bahwa pada contoh di atas, untuk membuat text dengan format yag sama harus dituliskan Tag &lt;font&gt; dengan properti yang sama pula. Bandingkan dengan halaman yang dituliskan dengan menggunakan stylesheets  berikut :  </p>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td width=”600″ bgcolor=”#CCCCCC”><pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Halaman HTML&lt;/title&gt;
<span class=”style2″>&lt;style type=&quot;text/css&quot;&gt;
h1 { font-family:Arial, Helvetica, sans-serif; font-size:24px; color:red; }<br />        p {font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:12px; color:orange; }<br />    &lt;/style&gt;</span>
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;BENGAWAN SOLO – Cipt. GESANG&lt;/h1&gt;
&lt;p&gt;Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu&lt;/p&gt;
&lt;hr&gt;
&lt;h1&gt;BENGAWAN SOLO – Cipt. GESANG&lt;/h1&gt;
&lt;p&gt;Bengawan Solo, Riwayatmu ini&lt;br /&gt;
Sedari dulu jadi perhatian insani&lt;br /&gt;
Musim kemarau, tak seb’rapa airmu&lt;br /&gt;
Di musim hujan air meluap sampai jauh&lt;br /&gt;
Mata airmu dari Solo, Terkurung gunung serbu&lt;br /&gt;
Air meluap sampai jauh, Akhirnya ke laut&lt;br /&gt;
Itu perahu, riwayatmu dulu&lt;br /&gt;
Kaum pedagang slalu naik itu perahu&lt;/p&gt;
&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt; </pre></td>
</tr>
</table>
<p>Hasilnya akan ditampilkan sebagai berikut :</p>

Keseragaman Style

Perhatikan dua contoh berikut :

Halaman yang menggunakan style yang ditulis dengan kode HTML :

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
    <hr>
    <h1><font face="Arial" size="2" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
    <hr>
  </body>
</html>

Jelaslah bahwa pada contoh di atas, untuk membuat text dengan format yag sama harus dituliskan Tag <font> dengan properti yang sama pula. Bandingkan dengan halaman yang dituliskan dengan menggunakan stylesheets berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:24px;
            color:red;
            }
    	p {
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size:12px;
            color:orange;
            }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
    <hr>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
    <hr>
  </body>
</html>

Hasilnya akan ditampilkan sebagai berikut :

html-vs-css-2

Pada dua contoh di atas, terlihat perbedaan mendasar penggunaan stylesheets dibandingkan dengan penggunaan Tag <font>:

Penggunaan Tag <font> menghasilkan pengaturan text secara individual dan tidak terkoordinasi. Setiap pengaturan text dengan Tag <font> harus selalu disertakan pada setiap tempat, misalnya pada Tag <h1> di seluruh struktur HTML. Apabila diperlukan pengubahan style text tersebut, maka masing-masing Tag <font> harus diubah satu demi satu.

Penggunaan stylesheets menghasilkan pengaturan text secara seragam dan terkoordinasi rapi pada bagian struktur head ; Tag <style> sampai dengan </style>. Dengan pemisahan tersebut, maka struktur HTML di dalam Tag <body> tetap dapat dituliskan secara rapi, tanpa harus disertai dengan Tag lain (Tag <font>) di dalamnya. Apabila diperlukan pengubahan style pada text, maka perubahan dapat dilakukan pada bagian stylesheets saja.

Keleluasaan Penggunaan

CSS menyediakan pilihan yang jauh lebih banyak dibandingkan dengan kode HTML biasa. Banyak hal yang dapat dengan mudah dituliskan dalam stylesheet, misalnya pengaturan margin, penggunaan warna latar belakang, dan sebagainya.

Contohnya, sebuah halaman web ditulis dengan kode HTML sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
  </head>
  <body>
    <table width="100%" border="0" cellpadding="5"
    cellspacing="0" bgcolor="#99CCFF">
      <tr>
        <td><h1><font face="Arial" size="5" color="Red">
        BENGAWAN SOLO - Cipt. GESANG</font></h1></td>
      </tr>
    </table>
    <p><font face="Georgia" size="2" color="orange">
    Bengawan Solo, Riwayatmu ini<br />
    Sedari dulu jadi perhatian insani<br />
    Musim kemarau, tak seb'rapa airmu<br />
    Di musim hujan air meluap sampai jauh<br />
    Mata airmu dari Solo, Terkurung gunung serbu<br />
    Air meluap sampai jauh, Akhirnya ke laut<br />
    Itu perahu, riwayatmu dulu<br />
    Kaum pedagang slalu naik itu perahu</font></p>
  </body>
</html>

Halaman tersebut dapat ditulis dengan menggunakan CSS tanpa menggunakan Tag <table>, sebagai berikut :

<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
    	h1 {
           font-family:Arial, Helvetica, sans-serif;
           font-size:24px;
           color:red;
           background-color:#99CCFF;
           padding:5px }
    	p {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:12px;
           color:orange; }
    </style>
  </head>
  <body>
    <h1>BENGAWAN SOLO - Cipt. GESANG</h1>
    <p>Bengawan Solo, Riwayatmu ini<br />
       Sedari dulu jadi perhatian insani<br />
       Musim kemarau, tak seb'rapa airmu<br />
       Di musim hujan air meluap sampai jauh<br />
       Mata airmu dari Solo, Terkurung gunung serbu<br />
       Air meluap sampai jauh, Akhirnya ke laut<br />
       Itu perahu, riwayatmu dulu<br />
       Kaum pedagang slalu naik itu perahu</p>
  </body>
</html>

Hasilnya ditampilkan sebagai berikut :

html-vs-css-3

Perhatikan bahwa pada contoh di atas, CSS dapat menghasilkan format text dengan fitur yang jauh lebih lengkap dibandingkan dengan Tag HTML biasa. Sebagai perbandingan, Tag <font> memiliki sekitar 10 properties (termasuk properti style), sedangkan style sheets memiliki sekitar 123 properties. Jelas bahwa fitur pada CSS jauh lebih kaya dibandingkan dengan kode HTML.

Demikian, mudah-mudahan informasi ini bisa bermanfaat.

http://www.kursusprivat.com ■

Advertisements

Apakah CSS ? Bagian I – Mengenal CSS

Website sederhana biasanya dituliskan dalam bahasa HTML (Hyper Text Markup Language). Sebuah bahasa yang dipergunakan secara luas untuk membuat website dengan cara menuliskan perintah-perintah dalam bentuk Tag (ditandai dengan kurung siku “<” dan ditutup dengan “>” ). Untuk itu, Anda dapat mempelajari secara lengkap dengan mengikuti tutorial yang telah saya tuliskan di sini.

Seiring dengan perkembangan teknologi, HTML mengalami perubahan dari waktu ke waktu. HTML yang dahulu dikembangkan oleh Tim Berners-Lee sekarang sudah memasuki versi 5. Tentu saja seiring dengan perkembangan tersebut, ada bagian-bagian yang diperluas, dan ada pula bagian yang dihilangkan mengingat kegunaannya sudah dapat digantikan oleh fungsi-fungsi baru. Menguasai HTML sangatlah dianjurkan bagi mereka yang ingin berkecimpung dalam dunia Web Desain.

Seiring dengan perkembangan teknologi HTML tersebut, berkembang pula sistem penulisan “style” yang dinamakan CSS (Cascading Style Sheets). CSS versi pertama mulai diperkenalkan pada Desember 1996. Sesuai dengan namanya Cascade Style Sheet, ditujukan sebagai tempat menuliskan Style yang dipergunakan dalam halaman-halaman web.

Banyak hal dapat disiapkan dalam CSS misalnya untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. Dengan demikian, CSS terutama digunakan untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS).

CSS 1

CSS pertama yang direkomendasikan oleh W3C ini dipublikasikan pada Desember 1996. CSS level 1 memiliki kemampuan sebagai berikut :

  • Mengatur Font properties seperti jenis font dan aksentuasinya
  • Mengatur Warna text, warna background, dan elemen-elemen lainnya
  • Atribut Text seperti spasi antar kata, antar huruf, dan spasi antar baris
  • Perataan pada text, image, tabel dan elemen-elemen lainnya
  • Margin, border, padding, dan positioning pada kebanyakan elemen
  • Identifikasi yang unik dan klasifikasi umum pada kelompok atribut

CSS 2

CSS level 2 dikembangkan oleh W3C dan dipublikasikan pada Mei 1998. CSS2 meliputi sejumlah kemampuan baru seperti penempatan elemen secara absolut, relatif, dan tetap, konsep berbagai jenis media, mendukung aural style sheets (penggunaan suara) dan bidirectional text (penulisan kanan ke kiri / Arabic), dan ditambah dengan font properti baru yakni drop shadow.

Apa yang bisa dilakukan dengan CSS ?

CSS adalah sebuah bahasa style yang dipergunakan untuk mengatur layout halaman HTML. Contohnya untuk mengatur jenis font, warna, margin, garis, tinggi, lebar, gambar background, posisi, dan berbagai hal lainnya.

HTML dapat dipergunakan untuk membuat layout pada halaman website. CSS dapat dipergunakan untuk layout halaman website dengan option yang lebih banyak dan lebih beragam, lebih akurat dan lebih canggih. CSS juga didukung oleh semua internet browser yang ada saat ini.

Segera setelah Anda mengetahui kegunaan dan cara menggunakan CSS, maka Anda dapat menambahkan tampilan baru pada website yang Anda miliki.

Mengapa harus ada CSS dan HTML ?

HTML dipergunakan untuk menyusun struktur halaman HTML. CSS dipergunakan untuk mengatur format pada struktur halaman HTML tersebut. Mungkin pada tahap awal hal ini cukup membingungkan, namun bisa kita analogikan dengan membangun sebuah bangunan. HTML dipakai untuk menyusun bangunan tersebut terdiri dari berapa lantai, masing-msing lantai terdiri dari berapa ruang, dan ruang-ruang tersebut memiliki berapa pintu. CSS dapat dipergunakan untuk mengatur style dari masing-masing lantai, contohnya jenis bahannya, warnanya, ketebalannya, dsb. Demikian halnya style dari masing-masing ruang dan style dari masing-masing pintu.

Pada prakteknya, sebuah struktur halaman HTML akan tersusun atas Tag-tag HTML, sebagai contoh pada halaman HTML akan terdapat Tag <h1> untuk Heading, Tag <p> untuk Paragraf, Tag <a> untuk Anchor, dsb. Pada struktur halaman tersebut, diperlukan perintah lain untuk mengatur jenis font, warna, ukuran text, dsb, yang kemudian dapat diatasi dengan penggunaan Tag <font>. Hal ini diprakarsai oleh Netscape dan Microsoft, yang sebetulnya berupa tambahan terhadap Tag HTML standar yang berlaku pada saat itu.

Demikian halnya dengan Tag < table > yang secara luas dipergunakan (baca: disalahgunakan) untuk mengatur layout halaman website, mengingat pada saat itu tidak ada cara yang lebih mudah untuk mengatur layout halaman selain dengan memanfaatkan Tag < table >

CSS dibuat untuk menyediakan berbagai kebutuhan bagi web desainer, dengan berbagai kemungkinan layout halaman yang canggih yang sekaligus didukung oleh semua internet browser. Kehadiran CSS bagi web desainer juga dapat memudahkan pengaturan dengan memisahkan struktur halaman HTML dari style-nya. Dengan demikian, akan memudahkan maintenance / perawatan website tersebut.

Apa keuntungan penggunaan CSS ?

Keuntungan penggunaan CSS adalah sebagai berikut :

  • Dapat mengatur layout banyak halaman sekaligus dengan satu dokumen stylesheet.
  • Dapat mengatur layout halaman dengan lebih presisi.
  • Dapat mengaplikasikan layout yag berbeda pada jenis media yang berbeda (screen, print, dll.).
  • Tersedia dengan banyak teknik yang canggih.
  • Menghemat Bandwidth, karena stylesheet akan selalu disimpan pada cache browser dan dipergunakan secara berulang.

Bagaimana cara menuliskan CSS ?

Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

1. Inline style

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Inline styles diletakkan pada bagian yang ingin diatur tampilan tulisannya. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag. Penggunaan inline style Pada sebuah Tag <H1> ditambahkan style untuk menggunakan jenis font Arial. Tag <H1> yang biasanya ditulis
<h1> … </h1>
dapat ditambahkan dengan atribut style berikut jenis properti style yang ingin digunakan. Sehingga sekarang dituliskan sebagai berikut :
<h1 style=””> … </h1>
Ditambahkan properti style, yakni font-family, berikut nilainya, yakni Arial menjadi sebagai berikut :
<h1 style=”font-family:Arial;”> … </h1>
Contoh :

<h1 style=”font-family:Arial, Helvetica, sans-serif;”> Tulisan dengan font Arial </h1>

Akan ditampilkan sebagai berikut :

Tulisan dengan font Arial

Jika ingin ditambahkan properti lain pada style tersebut, dapat dituliskan dengan menggunakan separator berupa tanda titik-koma ( ; ) Contoh :

<h1 style=”font-family:Arial, Helvetica, sans-serif; color:Green;”> Tulisan Arial berwarna Hijau </h1>

Akan ditampilkan sebagai berikut :

Tulisan Arial berwarna Hijau

2. Internal Style Sheet

Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.

Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam Tag <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut. Contohnya, sebuah halaman HTML berisi content sebagai berikut :

<h1> TULISAN JUDUL </h1>
<a href=”http://www.kursusprivat.com”&gt; LINK </a>
<p> Tulisan berupa paragraf </p>

Untuk mengatur style pada halaman tersebut kita dapat menuliskan stylesheet di antara Tag <head> … </head> . Misalnya sebagai berikut :

<style type=”text/css”>
h1 { color:blue; background-color:lightblue; }
p { color:green; margin-left:20px; margin-right:20px; background-color:lightgreen; }
a { color:red; background-color:yellow; }
</style>

3. External Style Sheet

External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css

Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.

Penggunaan External Stylesheet pada halaman HTML ditandai dengan link ke file Stylesheet. Link terhadap file .css external tersebut dituliskan pada bagian Tag sebagai berikut :

<head>

<link rel=”stylesheet” type=”text/css” href=”namafile.css”>
</head>

Contoh penggunaan dari ketiga jenis style sheet tersebut dapat dilihat pada link di bawah ini : Membuat Website Itu Mudah (Bagian VI – Font Style)

Demikian, mudah-mudahan informasi ini bermanfaat.

http://www.kursusprivat.com