Secara gari besar, terdapat 3 cara menginputkan kode CSS ke dalam HTML, yaitu metode Inlie Style, Internal Style Sheets, dan External Syle Sheets.
*METODE INLINE STYLE
Metode ini adalah cara menginputkan kode CSS langusung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan metode inline style CSS adalah sebagai berikut :
Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin di terapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak di sarankan karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatanya SCC agar desain terpisah dengan konten.
* METODE INTERNAL SYLE SHEETS
Metode ini di sebut juga dengan metode Embedded Syle Sheets, digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML. Atribut style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan Metode Internal Syle Sheets CSS :
Dari kode di atas jika di jalankan akan tampil seperti gambah di bawah ini :
Contoh medote diatas udah jauh lebih baik dari pada line style, Karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.
Namun kekurangan menggunakan internal style sheets, jika kita memiliki bebrapa halaman dengan syle yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode extenal style sheets
*METODE EXTERNAL STYLE SHEETS
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat bebrapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk "mengangkat" kode CSS tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal "memanggil" file CSS tersebut.
Tahap pertama kita akan membuat file dengan format .css dengan isian sebagai berikut :
@charset "utf-8";
h2
{
background-color:#00F;
font-family:"Comic Sans MS", cursive;
color:#0F0;
}
Untuk sekarang tempat save .css kita gunakan pada satu folder yang sama dengan save HTML kita. Kembali ke halaman HTML.
Css Menyediakan 2(dua) cara untuk menginputkan kode CSS tersebut ke halaman HTML, yang pertama kita gunakan @import
Contoh penggunaanya :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
@import url(css.css);
</style>
</head>
<body>
<h2>
Belajar CSS
</h2>
</body>
</html>
Untuk metode @import external style sheet ini, kita menyisiplan @import url(css.css); pada tag <style>. Alamat pada bagian url bisa berupa halaman relatif ( seperti:folderku/css.css) maupun absolut ( seperti www.tipblack.blogspot.com/belajar.css).
Cara yang kedua adalah dengan menggunakan tag <link>.
Contoh penggunaanya :
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h2>
Belajar CSS
</h2>
</body>
</html>
Dari Semua kode yang menggunakan metode external style sheets jika di jalankan akan menjadi seperti gambar di bawah
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang berisi alamat dari CSS.
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah menggunakan medote EXTERNAL STYLE SHEETS. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama tanpa kita ulangi kode nya dari awal lagi, dan jika kita ingin mengubah seluruh tampilan halaman website kita, kita hanya butuh mengubah 1 file CSS saja.
*METODE INLINE STYLE
Metode ini adalah cara menginputkan kode CSS langusung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan metode inline style CSS adalah sebagai berikut :
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h2 style="background:#00F; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif">
Belajar CSS
</h2>
</body>
</html>
Dari kode di atas jika di jalankan akan tampil seperti gambah di bawah ini :
Hasil dari css di atas
Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin di terapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak di sarankan karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatanya SCC agar desain terpisah dengan konten.
* METODE INTERNAL SYLE SHEETS
Metode ini di sebut juga dengan metode Embedded Syle Sheets, digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML. Atribut style ini harus berada pada bagian <head> dari halaman HTML.
Contoh penggunaan Metode Internal Syle Sheets CSS :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
h2 {
background-color:#00F;
color:#FFF;
}
</style>
</head>
<body>
<h2>
Belajar CSS
</h2>
</body>
</html>
Namun kekurangan menggunakan internal style sheets, jika kita memiliki bebrapa halaman dengan syle yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode extenal style sheets
*METODE EXTERNAL STYLE SHEETS
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat bebrapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk "mengangkat" kode CSS tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal "memanggil" file CSS tersebut.
Tahap pertama kita akan membuat file dengan format .css dengan isian sebagai berikut :
@charset "utf-8";
h2
{
background-color:#00F;
font-family:"Comic Sans MS", cursive;
color:#0F0;
}
Untuk sekarang tempat save .css kita gunakan pada satu folder yang sama dengan save HTML kita. Kembali ke halaman HTML.
Css Menyediakan 2(dua) cara untuk menginputkan kode CSS tersebut ke halaman HTML, yang pertama kita gunakan @import
Contoh penggunaanya :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
@import url(css.css);
</style>
</head>
<body>
<h2>
Belajar CSS
</h2>
</body>
</html>
Untuk metode @import external style sheet ini, kita menyisiplan @import url(css.css); pada tag <style>. Alamat pada bagian url bisa berupa halaman relatif ( seperti:folderku/css.css) maupun absolut ( seperti www.tipblack.blogspot.com/belajar.css).
Cara yang kedua adalah dengan menggunakan tag <link>.
Contoh penggunaanya :
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h2>
Belajar CSS
</h2>
</body>
</html>
Dari Semua kode yang menggunakan metode external style sheets jika di jalankan akan menjadi seperti gambar di bawah
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang berisi alamat dari CSS.
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah menggunakan medote EXTERNAL STYLE SHEETS. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama tanpa kita ulangi kode nya dari awal lagi, dan jika kita ingin mengubah seluruh tampilan halaman website kita, kita hanya butuh mengubah 1 file CSS saja.
