Ada 3 cara untuk menambahkan style CS ke website Anda: Anda bisa menggunakan internal CSS dan menambahkannya ke rule CSS di dalam bagian Show Opsi 1 – Internal CSSKode CSS internal diletakkan di dalam bagian <style type="text/css">0. Contohnya: <head> <style type="text/css"> p {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;} </style> </head> Manfaat internal CSS:
Kekurangan menggunakan Internal CSS:
Cara menambahkan internal CSS ke halaman HTML1. Buka file HTML Anda dengan menggunakan text editor. Jika halaman sudah di-upload ke hosting, Anda bisa menggunakan text editor yang telah disediakan oleh hosting Anda. Jika Anda memiliki file HTML di komputer Anda, Anda bisa menggunakan text editor apapun untuk meng-edit dan kemudian meng-upload file ke akun hosting Anda menggunakan aplikasi FTP. 2. Temukan bagian awal kode <head> dan tambahkan kode berikut ini di bawahnya: <style type="text/css"> 3. Pada baris baru, tambahkan rule CSS: body { background-color: blue; } h1 { color: red; padding: 60px; } 4. Setelah Anda menambahkan rule CSS, tambahkan tag penutup: </style> Nantinya file HTML yang sudah ditambahkan style CSS akan terlihat seperti ini: <!DOCTYPE html> <html> <head> <style> body { background-color: blue; } h1 { color: red; padding: 60px; } </style> </head> <body> <h1>Hostinger Tutorials</h1> <p>This is our paragraph.</p> </body> </html> Opsi 2 – External CSSSalah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> Dalam contoh diatas, file style.css berisikan semua rule. Contohnya: .xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; } Manfaat CSS eksternal:
Kekurangan CSS eksternal:
Opsi 3 – Inline CSSInline CSS digunakan untuk tag HTML tertentu. Atribut <style type="text/css">2 digunakan untuk memberikan style ke tag HTML tertentu. Cara ini kurang direkomendasikan, karena setiap tag HTML malah harus diberikan style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, pada saat Anda tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja. Contoh halaman HTML dengan inline CSS adalah seperti berikut: <!DOCTYPE html> <html> <body style="background-color:black;"> <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1> <p style="color:white;">Something usefull here.</p> </body> </html> Manfaat Inline CSS:
Kekurangan inline CSS:
KesimpulanKini Anda sudah mengetahui beberapa cara menambahkan CSS ke website Anda dan juga mengetahui perbedaan antara inline, eksternal dan internal stylesheets. Penulis Ariata C. Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca. Apa yang dimaksud Embedded style sheet?Embedded style sheet yaitu pemanggilan code css yang biasanya terletak tepat di bawah <head></head> akan tetapi masih berada pada satu laman yang sama, yang dapat dipanggil dengan kode class.
Apa bedanya CSS internal dan eksternal?Lebih jelasnya, Eksternal CSS adalah kode CSS yang dideklarasikan dalam file .css terpisah dari file HTML yang menggunakannya. Eksternal CSS juga dapat digunakan bersama-sama dengan file HTML lain alias global & reusable. Sedangkan Internal CSS dideklarasikan didalam tag <style></style> suatu file HTML.
Pada bagian HTML manakah external style sheet diletakkan?File external CSS umumnya diletakkan setelah bagian <head> di halaman. Metodi ini dinilai lebih mudah dan sederhana daripada menambahkan kode CSS di setiap elemen HTML yang diatur tampilannya.
Apa kelebihan dari penggunaan external CSS?Opsi 2 – External CSS
Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi. Kecepatan loading menjadi lebih cepat. File CSS yang sama bisa digunakan di banyak halaman.
|