CSS Dasar Part 3 - Cara Menempatkan FIle CSS
CSS Dasar Part 3 - Cara Menempatkan FIle CSS - Artikel sebelumnya saya sudah membahas mengenai bagaimana penulisan struktur/anatomi statement CSS dideklarasikan. Dalam artikel ini saya akan membahas bagaimana cara menempatkan atau menghubungkan CSS pada document HTML. Ada beberapa cara untuk menempatkan CSS pada document HTML, yaitu :
 |
| 3 Cara Penempatan File CSS |
1. Embed
<style></style>
Di artikel saya yang berjudul Tag HTML Untuk Tag Head dan Tag Body, saya menjelaskan tag apa saja yang bisa disimpan dalam tag <head>. Salah satunya adalah CSS. CSS bisa disimpan dalam halaman HTML yang sama, dengan menempatkan sintak CSS didalam tag <head>, artinya kalau kita menempatkan/menyimpan/menghubungkan CSS dalam satu halaman HTML di dalam tag <head>, kita melakukan cara yang dinamakan dengan Embed. Biasanya penulisan sintak CSS dibawah tag <title>. Yang dibungkus dalam tag <style></style>. Cara penulisan sintaknya bisa dilihat di contoh berikut ini :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Embed CSS</title> <style> h1 { color: pink; font-family: : arial; text-align: center; } p { color: blue; font-family: : verdana; } </style> </head> <body> <h1>Hello World</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> </body> </html>
 |
| Embed CSS |
2. Inline
<h1 style="color: lightgreen;">Hello World</h1>
Untuk penempatan CSS kita juga bisa memberikan langsung di dalam setiap element yang ada pada halaman HTML yang ingin kita beri style tertentu. Sintak CSS dibungkus dengan tag <style></style> yang ditulis di dalam element HTML. Namun cara inline ini tidak disarankan, dan jarang dilakukan, karena akan mengotori halaman HTML yang kita buat dan mencampur aduk antara konten dan style. Saya pernah membahas fungsi masing-masing baik HTML dan CSS pada artikel saya yang berjudul About HTML, HTML untuk menyajikan konten, sedangkan CSS untuk memberikan style/dekorasi. Di artikel yang berjudul Beauty Of CSS, saya juga menegaskan lagi fungsi dari CSS untuk memberikan style, sehingga jangan pernah mencampur antara HTML dan CSS. kecuali ada satu kondisi yang membuat kita harus menggunakan cara inline ini, tapi kita juga harus paham benar, kenapa harus meletakkan CSS di dalam elemen HTML kita dengan cara inline seperti ini, intinya kalau terpaksa atau tidak ada pilihan lain, kita bisa menggunakan cara inline ini, tapi sebaiknya hindarkan cara penempatan CSS secara Inline. Contoh penulisan sintak bisa dilihat dibawah ini :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline CSS</title> </head> <body> <h1 style="color: pink; font-family: arial; text-align: center;">Hello World</h1> <p style="color: blue; font-family: : verdana;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> </body> </html>
 |
| Inline CSS |
3. Eksternal
<link rel="stylesheet" href="style.css">
Cara penempatan CSS dengan cara eksternal, artinya kita membuat file CSS terpisah dengan file HTML, yang nanti akan dihubungan keduanya dengan tag HTML yang disebut tag <link>. Tag <link> akan ditempatkan di halaman HTML di dalam tag <head>. Biasanya setelah tag <title>. Untuk penulisan sintaknya bisa lihat contoh dibawah ini :
File HTML :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Eksterna CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, earum, ullam at ducimus tempora unde ratione, perferendis vero fugiat eum nisi. Ipsa ea, sequi laborum, veniam voluptates culpa pariatur excepturi.</p> </body> </html>
File CSS :
h1 { color: pink; font-family: arial; text-align: center; } p { color: blue; font-family: verdana; }
 |
| Eksternal CSS |
Untuk pembahasan mengenai bagaimana penempatan CSS, sudah saya jelaskan, semoga artikel ini bisa dipahami dan dimengerti, terutama bagi tamen-teman yang baru mau belajar CSS. Tetap semangat guys. See you on my next articles. Bye bye....
Referensi:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Belum ada Komentar untuk "CSS Dasar Part 3 - Cara Menempatkan FIle CSS "
Posting Komentar