Seiring berjalannya rangkaian ini, telah beberapa kali disoroti mengenai stylesheet. Stylesheet ini memungkinkan pemisahan yang ketat antara tata letak dan desain. Karena CSS, elemen HTML bertanggung jawab secara eksklusif untuk deskripsi logis atau semantik dari dokumen web.
Pengalaman menunjukkan bahwa pada awalnya, penting untuk mengetahui bagaimana penampilan sebuah stylesheet. Mari kita lihat contohnya.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Dokumen ini terlihat seperti ini di browser:
Dalam file HTML bagian body, dua elemen telah didefinisikan:
• sebuah judul
• sebuah paragraf
Melalui CSS, kedua elemen ini diformat. Untuk itu, di dalam bagian head, area stylesheeet didefinisikan menggunakan style. Di dalam area ini, elemen diformat.
Sekali lagi, ini adalah definisi bagi judul h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Dengan sintaks yang ditunjukkan, dua hal ditentukan:
• Ditentukan keluarga hurufnya.
• Ditentukan ukuran hurufnya.
Pada titik ini, mari kita fokus pada sintaks yang digunakan. Setiap pernyataan CSS pada dasarnya terdiri dari dua bagian - sebuah selektor dan deklarasi CSS. Melalui selektor, kita menetapkan elemen yang akan diformat. Bagaimana akhirnya formatnya, ditentukan oleh deklarasi CSS. Selektor selalu berada di sebelah kiri, deklarasi CSS di dalam kurung kurawal di sebelah kanan.
Deklarasi CSS sebenarnya terdiri dari dua elemen, yaitu properti dan nilai. Properti dan nilai dipisahkan oleh titik dua. Di belakang nilai, terdapat titik koma.
Selektor {
Eigenschaft: Wert;
}Menyisipkan Stylesheets
Ada banyak cara berbeda untuk menyisipkan stylesheets ke dalam halaman web. Pada awalnya, Anda dapat langsung menetapkan instruksi gaya ke tag HTML. Contoh:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Pada contoh ini, judul ditampilkan dengan warna biru.
Anda juga dapat menambahkan beberapa instruksi gaya ke tag HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Cukup tuliskan instruksi ini secara berurutan, dipisahkan oleh titik koma.
Secara umum, gaya inline ini hanya bermanfaat jika bagian-bagian tertentu dalam sebuah halaman perlu diformat secara individu. Sebenarnya, Anda sebaiknya menghindari jenis format langsung ini, karena kode HTML akan menjadi tidak terstruktur.
Definisi Pusat di bagian head
Anda dapat mendefinisikan sebuah Stylesheet sentral di dalam bagian kepala file HTML. Di sana, semua gaya ditentukan untuk berlaku dalam file tersebut.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Keuntungan dari opsi ini: Berbeda dengan varian inline, format yang telah ditentukan dapat digunakan berkali-kali dalam dokumen. Pada contoh sebelumnya, kelas CSS text didefinisikan. (Informasi rinci tentang selektor seperti kelas yang digunakan di sini akan dijelaskan pada tutorial berikutnya). Kelas ini sekarang dapat digunakan sebanyak yang Anda inginkan dalam dokumen.
<h1 class="text">PSD-Tutorials.de</h1> <p class="txt">dein Grafik-, Web- & Fotoportal</p>
Definisi semacam ini, dibandingkan dengan varian inline, tentu juga memiliki keunggulan dalam melakukan perubahan dengan cepat.
Menyisipkan Instruksi CSS ke luar
Opsi pengaturan CSS yang paling praktis adalah dengan memindahkan gaya ke dalam file eksternal. Dengan begitu, banyak file HTML dapat mengakses file CSS yang sama. Dengan demikian, penataan seragam semua file terkait proyek web menjadi sangat mudah. Perubahan di kemudian hari yang ingin memengaruhi semua halaman, dapat dilakukan tanpa masalah.
<link rel="stylesheet" type="text/css" href="css/styles.css">
Pada kepala file HTML, elemen link didefinisikan. Di dalam link, pertama-tama kita tentukan kombinasi atribut-nilai rel="stylesheet". Kemudian dilanjutkan dengan type="text/css". Atribut href menunjukkan file CSS yang bersangkutan. Perhatikan di sini - mirip dengan saat menyisipkan gambar - untuk menentukan path dengan benar. Pada contoh saat ini, saya mengasumsikan bahwa file CSS styles.css berada di direktori css, yang juga berada pada level yang sama dengan file HTML aslinya.
File CSS yang direferensikan adalah berkas teks biasa dengan akhiran css. Di dalam file CSS eksternal, instruksi CSS berkaitan didefinisikan.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatif dari varian link yang ditunjukkan adalah dengan cara mengimpor stylesheet. Di sini juga, perintah CSS berada dalam file eksternal. Untuk itu, digunakan syntax berikut:
<style type="text/css>
@import url("css/styles.css");
</style>
Di dalam kurung, Anda memberikan path ke file CSS yang akan diimpor. Perlu diketahui bahwa @import adalah syntax CSS. Oleh karena itu, perintah @import juga dapat digunakan di dalam file CSS. Dengan begitu, memungkinkan untuk memanggil stylesheet lain dari dalam sebuah stylesheet, yang memungkinkan pengaturan stylesheet yang lebih baik.
Tentu saja, muncul pertanyaan mengenai apakah sebaiknya menggunakan link atau @import. Secara prinsip, saya lebih memilih link, karena cara ini lebih cepat, sehingga kinerja situs menjadi lebih baik.
Stylesheet untuk Media Tertentu
Seseorang dapat menentukan stylesheet untuk media yang sangat berbeda seperti, misalnya, printer atau layar. Digunakan untuk itu adalah atribut media. Di sini, Anda juga dapat menetapkan stylesheet ke beberapa media yang dipisahkan oleh koma.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Pada kasus ini, dua stylesheet telah dipanggil, satu untuk layar, yang lain untuk saat halaman dicetak. File CSS druck.css akan dimuat ketika fungsi pencetakan browser dipanggil. Secara keseluruhan, nilai-nilai media berikut tersedia:
• all - Berlaku untuk semua media output.
• aural - File CSS digunakan untuk sistem output suara.
• braille - File CSS ditujukan untuk printer braille dengan umpan balik taktil, yang dapat menghasilkan "Braille".
• embossed - Ini memungkinkan untuk mengakses pencetak halaman Braille.
• handheld - Untuk perangkat handheld.
• print - File CSS berlaku untuk pencetakan pada kertas. Browser seharusnya secara otomatis kembali ke file ini saat fungsi pencetakan dipanggil.
• projection - Versi untuk presentasi diproyeksikan.
• screen - Ditujukan untuk tampilan layar.
• tty - File CSS berlaku untuk media yang menggunakan kisi karakter tetap. Ini bisa menjadi, misalnya, teleprinter dan terminal.
• tv - Menyasar perangkat mirip TV. Diasumsikan bahwa perangkat memiliki resolusi rendah dan hanya dapat digulirkan secara terbatas.
Di luar syntax HTML yang diperlihatkan melalui elemen link, masih ada variasi CSS khusus. Di sini @import atau @media digunakan.
<style type="text/css">
@media screen, projection {
/* Format untuk layar */
}
@media print {
/* Format untuk pencetakan */
}
</style>
Di dalam elemen style, Anda dapat mendefinisikan area untuk definisi format melalui @media yang ditujukan untuk media output tertentu. Di sini, setelah @media, mediatype yang sudah dijelaskan sebelumnya harus ditentukan, dipisahkan oleh spasi. Mediatype yang berbeda harus ditulis secara terpisah dengan koma.
