Isi

• Langkah
• Metode 1 dari 2: Cara menyiapkan lembar gaya eksternal
• Metode 2 dari 2: Cara menyisipkan lembar gaya internal
• Tips
• Peringatan

Hypertext Markup Language (HTML) menentukan elemen apa yang ada pada halaman web. Bahasa pemrograman Cascading Style Sheets (CSS) menjelaskan bagaimana elemen-elemen ini seharusnya terlihat.File CSS dapat ditambahkan ke HTML sebagai eksternal (CSS ditambahkan sebagai file terpisah) atau lembar gaya internal (CSS disertakan dalam file HTML). Pelajari cara menyematkan CSS dalam file HTML untuk mendesain ulang situs Anda.

Langkah

Metode 1 dari 2: Cara menyiapkan lembar gaya eksternal

1. 1 Buat file CSS. Siapkan dan simpan file CSS dengan ekstensi ".css".
2. 2 Unggah file CSS ke situs Anda.
3. 3 Salin alamat (URL) file CSS. Alamat situs akan terlihat seperti ini: www.situsanda.com/stylesheet.css.
   • Ini adalah praktik yang baik untuk menghapus nama domain utama dari URL. Berdasarkan ini, alamat http: //myisite.com/css/default.css akan disingkat menjadi "/css/default.css". Ingatlah untuk menyertakan garis miring ("/"). Ini disebut jalur relatif.
4. 4 Masukkan tautan ke dalam file. Temukan tag / head> di file HTML Anda dan buat baris kosong tepat di atasnya. Tempel di baris itu LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, ganti "www.your ..." dengan link di file CSS.
5. 5 Simpan file HTML dan unggah ke situs.
6. 6 Pastikan semua yang ada di situs terlihat seperti seharusnya. Jika tidak, buka kembali file HTML, cari kesalahan, dan buat perubahan.

Metode 2 dari 2: Cara menyisipkan lembar gaya internal

1. 1 Buat gaya label>. Buka file HTML dan temukan tag / head>. Tambahkan beberapa baris kosong di atasnya dan masukkan berikut ini:

Jenis GAYA = "teks / css"> / GAYA>

1. 1 Rekatkan semua CSS Anda di antara dua label ini.
2. 2 Simpan file HTML (dengan ekstensi .html).
3. 3 Pastikan semua yang ada di situs terlihat seperti seharusnya. Jika tidak, buat perubahan yang diinginkan.

Tips

• Selalu periksa tampilan situs di berbagai browser dan sistem operasi yang berbeda. Beberapa browser terhubung ke CSS dengan cara yang sedikit berbeda. Itu bahkan dapat terjadi di browser yang sama, tetapi pada versi Mac dan Windows yang berbeda. Jika situs Anda terlihat berbeda di browser lain (misalnya, jarak antara beberapa objek, seperti daftar, berukuran berbeda), maka masalahnya adalah pengaturan browser tersebut. Temukan master stylesheet dan tempel di bagian atas file CSS untuk mengubah pengaturan browser default. Ini dilakukan agar pengaturan Anda tidak mengubah apa pun di browser itu sendiri.
• Masukkan lembar gaya eksternal jika Anda bisa. Ini akan memungkinkan Anda untuk mengubah tampilan situs dengan memodifikasi kode di file sumber. Dengan cara ini Anda tidak perlu mengubah CSS di setiap halaman situs Anda.
• Jika situs Anda tidak merespons CSS seperti yang Anda harapkan, periksa kembali seluruh pengkodean untuk memastikan ejaannya benar. Secara khusus, berikan perhatian khusus pada titik koma (";") dan tanda kurung tutup ("}"). Cukup mudah untuk menghilangkan salah satu karakter ini dalam file CSS.
• Simpan file HTML ke komputer Anda sehingga Anda dapat membukanya nanti di berbagai browser web dan memeriksa ulang tampilannya sebelum mengunduhnya lebih lanjut. Tetapi untuk memuatnya, file CSS perlu dimasukkan ke dalam HTML sebagai stylesheet eksternal.
• Jika lembar gaya bertentangan dengan dirinya sendiri - misalnya, pertama-tama dikatakan bahwa teks akan berwarna biru dan kemudian akan menjadi merah - kondisi terakhir akan selalu terpenuhi. Jika satu perintah adalah lembar gaya eksternal dan yang lainnya adalah lembar gaya internal, lembar gaya internal akan aktif.

Peringatan

• Jangan gunakan CSS staging "terbuka", yaitu CSS yang disertakan dalam tag HTML. (Contoh: "align = 'center'" adalah pengaturan CSS terbuka). Ini adalah opsi usang dengan sintaks yang buruk. Jika setelah beberapa saat Anda harus memperbarui situs, pengaturan ini akan sulit diubah.