Cara menggunakan css tidak berfungsi

Ada 3 cara untuk menambahkan gaya CS ke situs web Anda. Anda dapat menggunakan CSS internal dan menambahkannya ke aturan CSS di bagian <head> dokumen HTML, atau menautkan file CSS eksternal yang berisi semua aturan CSS, atau yang terakhir adalah menggunakan CSS sebaris. Tutorial kali ini akan membahas 3 cara tersebut beserta kelebihan dan kekurangannya masing-masing. Simak perbedaan CSS berikut ini

Opsi 1 – CSS internal

Kode CSS internal ditempatkan di bagian <head> halaman. Kelas dan ID dapat digunakan untuk merujuk ke kode CSS, tetapi hanya akan aktif di halaman tersebut. Gaya CSS yang diinstal dengan metode ini akan diunduh setiap kali halaman dipanggil, sehingga akan meningkatkan kecepatan akses. Namun, ada beberapa kasus di mana penggunaan stylesheet internal sebenarnya berguna. Salah satu contohnya adalah mengirim template halaman ke seseorang - karena semuanya bisa dilihat dalam 1 halaman, akan lebih mudah untuk melihat previewnya. CSS internal ditempatkan di tag

<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

  • Perubahan hanya terjadi pada 1 halaman
  • Kelas dan ID dapat digunakan oleh stylesheet internal
  • Tidak perlu mengunggah beberapa file karena HTML dan CSS dapat digunakan dalam satu file yang sama

Kerugian menggunakan CSS Internal

  • Meningkatkan waktu akses situs web
  • Perubahan hanya terjadi pada 1 halaman – tidak efisien bila Anda ingin menggunakan CSS yang sama pada beberapa file

Bagaimana cara menambahkan CSS internal ke halaman HTML

1. 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 eksternal

Salah 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> halaman

<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

  • Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi
  • Kecepatan loading menjadi lebih cepat
  • File CSS yang sama dapat digunakan di banyak halaman

Kurangnya CSS eksternal

  • Halaman tidak ditampilkan dengan sempurna sampai file CSS selesai dipanggil

Opsi 3 – CSS sebaris

Inline 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

  • Berguna jika Anda ingin menguji dan melihat perubahan
  • Berguna untuk perbaikan cepat
  • Permintaan HTTP yang lebih kecil

Kurangnya CSS sebaris

  • CSS sebaris harus diterapkan ke setiap elemen

Kesimpulan

Sekarang 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