Tutorial Cascading Style Sheet (CSS) - Linked CSS

Pada kesempatan kali ini akan kita bahas mengenai linked CSS.
Apa sebenarnya maksud dari linked CSS itu ???
Linked CSS adalah sebuah cara untuk memisahkan skrip-skrip CSS diluar dokumen HTML. Selama ini kita telah belajar menuliskan skrip CSS di dalam dokumen HTML yang penempatannya persis diantara tag <head> dan tag </head> yang mana penulisan seperti ini disebut dengan Header Style (Style yang diletakkan di bawah tag header) karena ada juga style yang di terapkan pada elemennya secara langsung misal seperti potongan code : <body> <p style="font-family:arial; color:green">...... </body> yang disebut dengan Inline Style (Style yang diletakkan langsung pada elemen diluar tag head).
Kembali ke bahasan mengenai Linked CSS. Dalam memsiahkan skrip-skrip CSS dari dokumen HTML, memiliki beberapa keuntungan antara lain :

Kita tidak perlu membuka dokumen HTML untuk mengedit skrip CSS karena skrip CSS diletakkan di luar dokumen HTML dengan file terpisah.
File CSS yang sama dapat digunakan oleh beberapa dokumen HTML yang berbeda, sehingga dengan demikian akan menghemat waktu saat pembuatan desain web.

Adapun syntax yang digunakan tetap sama, akan tetapi di buat dalam file yang berbeda dengan HTML dan memiliki extensi (.css).
Lalu bagaimana menghubungkan antara dokumen HTML dengan skrip CSS yang berada diluar dokumen HTML ???
Syntax untuk menghubungkannya cukup dengan menuliskan code dibawah ini yang ditempatkan diantara tag

<head> dan </head> seperti berikut :

<link rel="stylesheet" href="file.css" type="text/css">

Sekarang kita akan mencoba berdasarkan tutorial yang sebelum-sebelumnya, memisahkan skrip CSS dari dokumen HTML. Misalkan kita memiliki dokumen HTML seperti dibawah ini yang akan kita pisahkan menjadi dua (2) file, yang satu sebagai dokumen HTML dan yang satunya lagi menjadi file CSS.


<html>
<head>
<title>Belajar</title>

<style>

/* shorthand properties */
body{
    background:#DFC url(mawar.jpg) repeat-y right; 
}

div {
     border-width:1px 5px 10px 20px;
     border-color:red green blue yellow;
     border-style:solid;
     background-color:#CC9;
     }

</style>

</head>
<body>
  <div id="top">  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Google</a>
  </div>         

</body>
</html>

Pertama akan kita pisahkan dahulu skrip CSSnya (hilangkan tag <style> dan </style> seperti berikut ini:



/* shorthand properties */
body{
    background:#DFC url(mawar.jpg) repeat-y right; 
}

div {
     border-width:1px 5px 10px 20px;
     border-color:red green blue yellow;
     border-style:solid;
     background-color:#CC9;
     }

File CSS ini misalkan disimpan dengan nama styleku.css, sehingga tinggal dokumen HTML setelah dipotong skrip CSSnya.
Dalam dokumen HTML tersebut, berikan Linked CSS sehingga kode selengkapnya seperti berikut :


<html>
<head>
<title>Belajar</title>

<link rel="stylesheet" href="styleku.css" type="text/css">

</head>
<body>
  <div>  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Google</a>
  </div>         

</body>
</html>

Maka setelah disimpan dan dipanggil melalui browser akan menghasilkan tampilan yang sama seperti pada saat menuliskan skrip css di Header Style pada gambar di bawah.

Demikianlah tutorial singkat mengenai linked, dan file CSS ini jika dilengkapi dengan elemen-elemen serta properti yang lain bisa digunakan untuk dokumen HTML yang lain.
Sehingga dengan demikian semakin cepat kita dalam membuat desain web, karena tidak lagi menuliskan skrip css ulang.
Selamat Belajar, Selamat Berkarya dan Salam Coding.

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Linked CSS