Cara Menerapkan CSS pada Dokumen HTML
Jika kalian sudah mempelajari tutorial sebelumnya tentang Pengertian CSS, Fungsi CSS dan Pentingnya Belajar CSS. Seharusnya kalian sudah memahami tentang pengertian CSS, fungsi CSS dan mengapa harus mempelajari CSS.
Cara Menerapkan CSS di HTML
Penggunaan CSS selalu berbarengan dengan HTML, karena fungsi CSS adalah memberikan format terhadap dokumen HTML sehingga tampilan website bida lebih menarik. Secara umum, ada 3 cara menggunakan atau menerapkan kode CSS pada HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebelum kalian melanjutkan tutorial ini, jika kalian belum pernah belajar tentang HTML, silahkan pelajari terlebih dahulu Tutorial HTML di blog ini. Mengapa ini saya sarankan? Ya karena kebanyakan orang akan kesulitan belajar CSS sebelum belajar HTML.
Sekarang kita akan membahas satu per satu cara menggunakan atau cara mengaitkan CSS pada HTML.
CSS Inline Style
Cara/Metode penggunaan CSS Inline Style dilakukan dengan cara menuliskan kode CSS langsung pada elemen html dengan menggunakan artibut style. Kode CSS yang ditulis dengan cara Inline Style ini hanya diterapkan pada elemen itu saja, sehingga aturan-aturan tampilan atau style hanya berdampak pada elemet HTML itu saja.
Format Penulisan Inline Style:
1 |
<elemen style="..kode_css..">...konten...</elemen> |
Contoh Penerapan CSS Inline Style
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Contoh Penerapan CSS Inline Style</title> </head> <body> <h1>Judul Tanpa CSS</h1> <h2 style="color:red;">Judul dengan CSS Inline Style</h2> </body> </html> |
Hasil dari contoh penerapan CSS Inline Style di atas terlihat seperti pada gambar berikut ini:
Hasil Penerapan CSS Inline Style
CSS Internal Style Sheets
Sebelumnya kita telah menggunakan Inline Style untuk mengaitkan kode CSS dengan HTML. Selanjutnya kita akan belajar menerapkan kode CSS dengan Internal Style Sheets atau sering disebut dengan Embedded Style Sheets. Kalian dapat menempatkan kode atau aturan CSS ke dalam dokumen HTML menggunakan elemen <style>. Elemen <style> ditempatkan di dalam tag <head> … </head>.
Kode atau Aturan CSS yang ditentukan menggunakan ini akan diterapkan pada semua elemen yang terdapat dalam dokumen HTML.
Berikut ini contoh penerapan Internal Style Sheets
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Contoh Penerapan CSS Internal Style Sheets</title> <style> body{ background-color: green; font-family: Arial; } h2{ color:red; } p{ text-align: justify; } </style> </head> <body> <h1>Judul Tanpa CSS</h1> <h2>Judul dengan CSS Inline Style</h2> <p>Ini adalah contoh paragraf yang secara otomatis akan diformat dengan rata kiri-kanan (justify) sesuai dengan aturan pada kode CSS. Penerapan CSS seperti ini disebut Internal Style Sheets.</p> </body> </html> |
Hasil dari penerapan Internal Style Sheets pada kode HTML di atas adalah sebagai berikut:
Hasil Penerapan CSS Internal Style Sheets
External Style Sheets
Penerapan kode CSS di HTML dengan cara External Style Sheets ini paling sering digunakan dan dipandang paling efektif jika kita ingin memformat banyak dokumen HTML. Penerapan CSS dengan cara External Style Sheets dilakukan dengan cara memisahkan kode atau aturan-aturan CSS kedalam file tersendiri yang ber-ekstensi .css. Kemudian untuk menggunakannya pada HTML menggunakan elemen <link> untuk memanggil filde .css.
Cohtoh penerapannya akan kita pelajari pada tutorial ini. Pertama kita harus membuat file dengan ekstensi .css. Silahkan kalian buat file dengan nama style.css dan simpan ke dalam folder latihan kalian.
Ketik kode CSS berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body{ background-color: #01afc7; font-family: Arial; } h2{ color:red; } p{ text-align: justify; font-size:0.8em; } |
Selanjutnya buat file HTML seperti contoh di bawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Contoh Penerapan CSS External Style Sheets</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Judul Tanpa CSS</h1> <h2>Judul dengan CSS</h2> <p>Ini adalah contoh paragraf yang secara otomatis akan diformat dengan rata kiri-kanan (justify) sesuai dengan aturan pada kode CSS. Penerapan CSS seperti ini disebut Eksternal Style Sheets.</p> </body> </html> |
Hasil dari penerapan External Style Sheets di atas adalah seperti pada gambar di bawah ini.
Hasil Penerapan CSS Eksternal Style Sheets
Demikian tutorial tentang Cara Menerapkan CSS pada Dokumen HTML, mudah-mudahan bisa diikuti dan membawa manfaat bagi kita semuanya. Seperti biasa, jika ada pertanyaan silahkan mengisi kolom komentar di bawah postingan ini.
