Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML

bySetyo Wibowo ID - 0

Setelah dalam tutorial sebelumnya kita telah belajar mengenai struktur dari skrip cssyang terbagi atas selector, property dan value, dalam tutorial kali ini kita akan membahas mengenai cara penulisan kode css pada HTML, cara penulisan ini dibagian menjadi 3 cara, yaitu internal style, external style dan inline style.perbedaan dari 3 cara penulisan tersebut adalah letak dari kode cssnya, untuk effect penggunaan cssnya semuanya sama, baik langsung saja kita akan bahas satu persatu.





Internal Style





Internal style atau biasanya juga disebut dengan embeded style, penulisan kode css dengan mode ini, kode cssnya ditulis diantara tag <head> dan </head>.





Contoh penggunaan internal style adalah sebagai berikut :





<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        p {
        color:red;
        }
    </style>
</head>
<body>
<p>Ini adalah paragraf yang terkena effect skrip css</p>
</body>
</html>




semisal saya simpan dengan nama contoh_internal_style.html, lalu saya buka di browser :









nah maka skrip css akan merubah warna dari paragraf menjadi warna merah, untuk peletakkan skrip css berada di antara <head> dan </head>, untuk penulisan css dengan mode ini, menuliskannya diantara tag <style> dan </style> dan memberikan attribute type dengan value “text/css”.





<style type="text/css">
        p {
        color:red;
        }
</style>




External Style





Jika Internal Style cara penulisan kode css harus berada di file HTML yang sama, akan timbul masalah jika anda harus menuliskan kode css lagi ketika ada file html lain yang menggunakan kode css yang sama, nah untuk mengatasi hal tersebut anda dapat menggunakan cara external style, dengan menggunakan external style anda dapat menuliskan kode css di dalam file lain, sehingga ketika ada lebih dari 1 file html yang membutuhkan skrip css yang sama, anda bisa langsung memanggil dengan menggunakan mode external style ini, agar tidak bingung perhatikan contoh dibawah ini :





 p {
        color:red;
}




saya tuliskan kode css tersebut lalu saya simpan di file dengan nama semisalcssku.css





Setelah anda membuat sebuah file css, berikutnya anda dapat membuat file html, dan kita akan melakukan pemanggilan file cssnya di file html yang telah dibuat, untuk pemanggilannya bisa menggunakan 2 cara seperti dibawah ini :





Cara pertama anda bisa menggunakan kode @import





<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(cssku.css);
    </style>
</head>
<body>
<p>Ini adalah paragraf yang terkena effect skrip css</p>
</body>
</html>




pada value url, anda bisa menuliskan nama file css, dalam contoh ini saya tuliskancssku.css





Cara kedua dengan menggunakan tag <link>





<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="cssku.css">
</head>
<body>
<p>Ini adalah paragraf yang terkena effect skrip css</p>
</body>
</html>




tag <link> dituliskan diatara tag <head> dan </head>, attribute yang digunakan adalah :





  1. rel dengan value “stylesheet”
  2. type dengan value “text/css”
  3. href dengan value nama file cssnya




yang terpenting dari kedua cara tersebut adalah penulisan nama file css yang akan dipanggil, anda dapat menggunakan alamat relatif contohnya: foldercss/cssku.css maupun alamat absolutcontohnya : www.warungbelajar.com/cssku.css





karena dalam contoh ini untuk file cssnya kita letakkan difolder yang sama sehingga langsung saya tuliskan nama filenya









semisal file htmlnya kita beri nama contoh_external_style.html, lalu saya buka di browser maka hasilnya adalah sebagai berikut :









Mode Inline Style





mode ini berbeda dengan mode internal dan external style, jika anda menggunakan mode inline style, anda harus menuliskan kode css didalam tag html secara langsung, dengan menggunakan tag <style>, contohnya adalah sebagai berikut :





<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
</head>
<body>
<p style="color:red;">Ini adalah paragraf yang terkena effect skrip css</p>
</body>
</html>








lalu semisal kita simpan dengan nama contoh_inline_style.html, lalu kita buka di browser :









penulisan css dengan cara ini memang lebih mudah, karena tinggal menulisnya di bagian tag html yang diinginkan, tapi kita tidak menyarankan untuk menggunakan cara ini karena anda harus menuliskan disetiap tag untuk mendapatkan effect dari kode cssnya, berbeda dengan mode internal dan external yang menurut kita bisa lebih efisien dalam penulisan kode css.





bagaimana sahabat warung belajar, sudah paham kan mengenai 3 mode penulisan dari kode css, kita lebih merekomendasikan untuk menggunakan mode external style, karena jika nanti ada beberapa file HTML yang memerlukan effect dari kode css yang sama, anda tinggal memanggil file css tersebut baik menggunakan tag <link> ataupun @import, sehingga anda tidak perlu menuliskan lagi kode css di masing – masing file html, baik sekian dulu pembahasan mengenai mode penulisan skrip css, jika ada yang ingin didiskusikan bisa di kolom komentar.


Tags:

Post a Comment (0)

Lebih baru Lebih lama