Ada 3 cara untuk menambahkan gaya CS ke situs web Anda. Anda dapat menggunakan CSS internal dan menambahkannya ke aturan CSS di bagian Show Opsi 1 – CSS internalKode CSS internal ditempatkan di bagian <style type="text/css">0. Sebagai contoh <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
Kerugian menggunakan CSS Internal
Bagaimana cara menambahkan CSS internal ke halaman HTML1. Buka file HTML Anda menggunakan editor teks. Jika halaman telah diunggah ke hosting, Anda dapat menggunakan editor teks yang disediakan oleh hosting Anda. Jika Anda memiliki file HTML di komputer Anda, Anda dapat menggunakan editor teks apa pun untuk mengedit dan kemudian mengunggah file tersebut ke akun hosting Anda menggunakan aplikasi FTP 2. Temukan bagian awal kode dan tambahkan kode berikut ini di bawahnya:<style type="text/css"> 3. Pada baris baru, tambahkan aturan CSS body { background-color: blue; } h1 { color: red; padding: 60px; } 4. Setelah Anda menambahkan aturan 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 – CSS eksternalSalah satu cara paling nyaman untuk menambahkan CSS ke situs web Anda adalah menautkannya ke file. CSS eksternal. Dengan begitu, setiap perubahan yang Anda lakukan pada file CSS akan muncul di situs web Anda secara keseluruhan. File CSS eksternal biasanya ditempatkan setelah bagian <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>_ Pada contoh di atas, file style. css berisi semua aturan. Sebagai contoh .xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; } Manfaat CSS eksternal
Kurangnya CSS eksternal
Opsi 3 – CSS sebarisInline CSS digunakan untuk tag HTML tertentu. Atribut <style type="text/css">2 digunakan untuk memberi gaya pada tag HTML tertentu. Cara ini tidak disarankan, karena setiap tag HTML harus diberi gaya tersendiri. Anda akan lebih kesulitan dalam mengatur website jika hanya menggunakan inline CSS. Namun, dalam beberapa situasi inline CSS menjadi berguna. Misalnya, saat Anda tidak memiliki akses ke file CSS atau harus mengubah gaya hanya untuk 1 elemen Contoh halaman HTML dengan inline CSS adalah sebagai 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
Kurangnya CSS sebaris
KesimpulanSekarang Anda mengetahui beberapa cara untuk menambahkan CSS ke situs web Anda dan juga mengetahui perbedaan antara stylesheet inline, eksternal, dan internal Penulis Ariata C Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca. Bagaimana cara kerja CSS?Cara kerja CSS
CSS bekerja pada saat browser menampilkan dokumen, karena pada saat itu browser harus menggabungkan isi dokumen dengan gaya informasi atau gaya presentasi di halaman situs.
Bagaimana cara menggunakan CSS dalam HTML?Ada tiga cara untuk menambahkan CSS ke dokumen HTML. . Inline – menggunakan atribut style dalam elemen HTML Internal – menggunakan elemen |