Cara Menggunakan Lembar Gaya Eksternal untuk Pemrograman HTML5 dan CSS3 - dummies

CSS3 mendukung style sheet eksternal. Teknik ini memungkinkan Anda mendefinisikan lembar gaya sebagai dokumen terpisah dan mengimpornya ke dalam halaman web Anda. Untuk melihat mengapa hal ini mungkin menarik, lihat contohnya.

Bila Anda melihat kode untuk externalStyle. html, Anda mungkin terkejut melihat tidak ada informasi gaya yang jelas sama sekali!

externalStyle. html

Gaya Eksternal

Halaman ini memiliki gaya yang ditetapkan untuk paragraf, body, dan header 1.

Gaya didefinisikan dalam style sheet eksternal.

Di mana Anda biasanya melihat tag gaya (di header), tidak ada gaya. Sebagai gantinya, Anda melihat sebuah tag. Tag khusus ini digunakan untuk menghubungkan dokumen saat ini dengan dokumen lain.

Bagaimana mendefinisikan gaya eksternal

Bila Anda menggunakan gaya eksternal, elemen gaya tidak disematkan di header halaman namun dalam dokumen yang sama sekali terpisah.

Dalam kasus ini, halaman terhubung ke file khusus bernama myStyle. css File ini berisi semua aturan CSS:

/ * myStyle. css * / body {background-color: # 333300; warna: #FFFFFF;} h1 {warna: # FFFF33; text-align: center; font: italic 200% fantasy;} p {background-color: # FFFF33; warna: # 333300; text-align: right; border: 3px groove # FFFF33;}

Lembar gaya terlihat seperti gaya halaman, kecuali beberapa perbedaan utama:

Aturan style sheet terdapat dalam file terpisah. Gaya tidak lagi menjadi bagian dari halaman HTML namun merupakan file terpisah yang tersimpan di server. File CSS biasanya diakhiri dengan. ekstensi css
Tidak ada tag . Ini tidak diperlukan karena gayanya tidak lagi tertanam dalam HTML.
Kode diawali dengan komentar. Pasangan / * * / pasangan menunjukkan komentar di CSS. Sejujurnya, Anda bisa memberi komentar di CSS di tingkat halaman. File CSS eksternal sering memiliki komentar di dalamnya.
Dokumen gaya tidak memiliki HTML. Dokumen CSS tidak berisi apa-apa selain CSS. Ini mendekati tujuan pemisahan gaya (dalam dokumen CSS) dan konten (dalam dokumen HTML).
Dokumen tidak terkait dengan halaman tertentu. Keuntungan besar dari CSS eksternal digunakan kembali. Dokumen CSS bukan bagian dari halaman tertentu, namun halaman apapun bisa menggunakannya.

Cara menggunakan kembali gaya CSS eksternal

Lembar gaya eksternal benar-benar menyenangkan bila Anda memiliki lebih dari satu halaman yang memerlukan gaya yang sama. Sebagian besar situs web saat ini menggunakan banyak halaman, dan mereka harus berbagi lembar gaya yang sama untuk menjaga konsistensi.

Kode menunjukkan betapa mudahnya hal ini dilakukan:

SecondPage.html

Halaman Kedua

Halaman ini menggunakan gaya yang sama dengan externalStyle. html

Lembar gaya eksternal memiliki beberapa kelebihan yang luar biasa:

Satu lembar gaya dapat mengendalikan banyak halaman: Umumnya, Anda memiliki sejumlah besar halaman berbeda di situs web yang semuanya memiliki gaya umum yang sama. Anda dapat menentukan style sheet dalam satu dokumen dan memiliki semua file HTML yang merujuk ke file CSS.
Perubahan global lebih mudah: Jika Anda menggunakan gaya eksternal, Anda membuat perubahan di satu tempat dan secara otomatis disebarkan ke semua halaman di sistem.
Pemisahan konten dan desain: Dengan CSS eksternal, semua desain ditempatkan di CSS, dan datanya ada dalam HTML.
Kemudahan upgrade: Karena parameter desain dari keseluruhan situs didefinisikan dalam satu file, Anda dapat dengan mudah mengubah situs tanpa harus dipusingkan dengan file HTML individual.

Tag tautan

Tag adalah kunci untuk menambahkan referensi CSS ke dokumen HTML. Tag memiliki karakteristik berikut:

Tag adalah bagian dari halaman HTML. Gunakan tag di dokumen HTML Anda untuk menentukan dokumen CSS mana yang akan digunakan oleh halaman HTML.
Tag hanya terjadi di header. Tidak seperti tag, tag hanya bisa terjadi di header.
Tag tidak memiliki tampilan visual. Pengguna tidak dapat melihat tag, hanya pengaruhnya.
Tag link digunakan untuk menghubungkan dokumen dengan dokumen lain. Anda menggunakan tag untuk menggambarkan hubungan antara dokumen.
Tag memiliki atribut rel , yang mendefinisikan jenis hubungan. Untuk saat ini, satu-satunya hubungan yang akan Anda gunakan adalah atribut stylesheet.
Tag juga memiliki atribut href , yang menggambarkan lokasi dokumen lainnya.

Tag tautan sering digunakan untuk menghubungkan halaman ke dokumen gaya yang ditentukan secara eksternal.

Kebanyakan orang merujuk pada hyperlink yang dibuat oleh anchor () tag sebagai hyperlink atau tautan. Hal ini dapat menyebabkan kebingungan karena, dalam hal ini, tag tautan tidak menciptakan jenis tautan tersebut.

Cara menentukan tautan eksternal

Untuk menggunakan tag tersebut untuk menentukan lembar gaya eksternal, ikuti langkah-langkah ini:

Tentukan style sheet.

Lembar gaya eksternal sangat mirip dengan yang sudah Anda ketahui. Hanya menempatkan semua gaya dalam dokumen teks terpisah tanpa dan tag.
Buat elemen tautan di area kepala HTML untuk menentukan tautan antara halaman HTML dan CSS.

Elemen tautan saya terlihat seperti ini:
Tetapkan hubungan tautan dengan menetapkan atribut rel = "stylesheet".

Jujur, stylesheet hampir merupakan satu-satunya hubungan yang pernah Anda gunakan, jadi ini harus otomatis.
Tentukan jenis gaya dengan menetapkan type = "text / css".
Tentukan lokasi style sheet dengan atribut href.