Artikel ini menjelaskan cara menggunakan Cascading Style Sheets (CSS) untuk memformat teks pada halaman di Dreamweaver. Anda dapat menggunakan CSS untuk memformat dan memposisikan teks dengan cara yang tidak dapat dilakukan HTML, sehingga memberi Anda lebih banyak fleksibilitas dan kontrol atas tampilan halaman Anda.
Pengertian CSS
Cascading Style Sheets (CSS) adalah seperangkat aturan pemformatan yang mengontrol tampilan konten pada halaman Web. Saat Anda menggunakan CSS untuk memformat halaman, konten dan presentasi dipisahkan. Konten halaman (kode HTML) ada dalam file HTML-nya sendiri, sedangkan aturan CSS yang menentukan representasi kode ada di file lain (style sheet eksternal) atau bagian lain dari dokumen HTML (biasanya bagian). Menggunakan CSS memberi Anda fleksibilitas besar dan kontrol lebih besar atas tampilan halaman Anda, mulai dari posisi tata letak yang tepat hingga font dan gaya tertentu.
CSS memungkinkan Anda mengontrol banyak properti yang tidak dapat Anda kontrol hanya dengan menggunakan HTML. Misalnya, Anda dapat menentukan ukuran dan unit font yang berbeda (piksel, titik, dll.) untuk teks yang dipilih. Dengan menggunakan CSS untuk mengatur ukuran font dalam piksel, Anda juga dapat memastikan pendekatan yang lebih konsisten terhadap tata letak dan tampilan halaman di beberapa browser.
Aturan pemformatan CSS terdiri dari dua bagian: penyeleksi dan deklarasi. Selector adalah istilah yang mengidentifikasi elemen yang diformat (seperti P, H1, nama kelas, atau ID), sedangkan deklarasi digunakan untuk mendefinisikan elemen gaya. Dalam contoh berikut, H1 adalah pemilih dan segala sesuatu di antara kurung kurawal ({}) adalah deklarasi:
Berikut konten yang dikutip:
H1 {
font-size:16 pixel;
font
-family:Helvetica
;
Deklarasi terdiri dari dua bagian: properti (seperti font-family) dan nilai (seperti Helvetica). Contoh di atas membuat gaya untuk tag H1: teks dari semua tag H1 yang ditautkan ke gaya ini akan berukuran 16 piksel dan menggunakan font Helvetica dan tebal.
Istilah "cascading" mengacu pada kemampuan untuk menerapkan beberapa gaya pada elemen atau halaman Web yang sama. Misalnya, Anda bisa membuat satu aturan CSS untuk menerapkan warna, aturan lain untuk menerapkan margin, lalu menerapkan keduanya pada teks yang sama di halaman. Gaya yang ditentukan "mengalir" ke elemen di halaman Web Anda, yang pada akhirnya menciptakan desain yang Anda inginkan.
Keuntungan utama CSS adalah mudah untuk diperbarui; selama satu aturan CSS diperbarui, pemformatan semua dokumen menggunakan gaya yang ditentukan akan secara otomatis diperbarui ke gaya baru.
Jenis aturan berikut dapat didefinisikan dalam Dreamweaver:
Aturan CSS khusus (juga disebut "gaya kelas") memungkinkan Anda menerapkan properti gaya ke rentang teks atau blok teks apa pun. Semua gaya kelas dimulai dengan titik (.). Misalnya, Anda bisa membuat gaya kelas yang disebut .red, mengatur properti warna aturan menjadi merah, lalu menerapkan gaya tersebut ke sebagian teks paragraf yang diberi gaya.
Aturan tag HTML mendefinisikan ulang format tag tertentu (seperti p atau h1). Saat Anda membuat atau mengubah aturan CSS untuk tag h1, semua teks yang diformat dengan tag h1 akan segera diperbarui.
Aturan pemilih CSS (gaya lanjutan) mendefinisikan ulang pemformatan kombinasi elemen tertentu, atau bentuk pemilih lain yang diizinkan oleh CSS (misalnya, menerapkan pemilih td h2 setiap kali judul h2 muncul dalam sel tabel). Gaya tingkat lanjut juga dapat mendefinisikan ulang format tag yang berisi atribut id tertentu (misalnya, gaya yang ditentukan oleh #myStyle dapat diterapkan ke semua tag yang berisi pasangan atribut/nilai id="myStyle").
Buat lembar gaya baru
Pertama, Anda akan membuat style sheet eksternal yang berisi aturan CSS yang menentukan gaya teks paragraf. Saat Anda membuat gaya dalam lembar gaya eksternal, Anda dapat mengontrol tampilan beberapa halaman Web secara bersamaan dari satu lokasi pusat tanpa harus mengatur gaya untuk setiap halaman Web satu per satu.
Aturan CSS dapat ditemukan di lokasi berikut:
Lembar gaya CSS eksternal adalah serangkaian aturan CSS yang disimpan dalam file .css eksternal terpisah (bukan file HTML). File .css ditautkan ke satu atau lebih halaman di situs Web menggunakan link di bagian kepala dokumen.
Lembar gaya CSS internal (atau tertanam) adalah serangkaian aturan CSS yang terdapat dalam tag gaya di bagian kepala dokumen HTML. Misalnya, contoh berikut mendefinisikan ukuran font untuk semua teks dalam dokumen yang tag paragrafnya disetel:
:<head>
<gaya>
P{
ukuran font:80px
}
</gaya>
</kepala>：
Gaya sebaris ditentukan dalam contoh tag tertentu dalam dokumen HTML. Misalnya,
"p style="ukuran font: 9px""
Menentukan ukuran font hanya untuk paragraf yang diformat dengan tag yang berisi gaya sebaris.
Dreamweaver merender sebagian besar properti gaya yang Anda terapkan dan menampilkannya di jendela Dokumen. Anda juga dapat melihat pratinjau dokumen di jendela browser untuk melihat bagaimana gaya diterapkan. Beberapa properti gaya CSS muncul berbeda di Microsoft Internet Explorer, Netscape Navigator, Opera, dan Apple Safari.
Pilih "File">"Baru".
Pada kotak dialog Dokumen Baru, pilih Halaman Dasar di kolom Kategori, pilih CSS di kolom Halaman Dasar, lalu klik Buat.
Style sheet kosong akan muncul di jendela Dokumen. Tombol tampilan Desain dan tampilan Kode telah dinonaktifkan. Lembar gaya CSS adalah file teks biasa dan isinya tidak akan digunakan untuk dilihat di browser.
Simpan ("File">"Simpan") halaman ini sebagai cafe_townsend.css.
Saat Anda menyimpan style sheet Anda, pastikan untuk menyimpannya ke folder cafe_townsend (folder akar situs Web Anda).
Ketik kode berikut di stylesheet:
p{
keluarga font: Verdana, sans-serif;
ukuran font: 11px;
warna: #000000;
tinggi garis: 18 piksel;
bantalan: 3 piksel;
}
Saat Anda mengetik kode, Dreamweaver menggunakan petunjuk kode untuk menyarankan opsi guna membantu Anda menyelesaikan entri Anda. Saat Anda melihat kode yang ingin diselesaikan oleh Dreamweaver, tekan Enter (Windows) atau Return (Macintosh).
Jangan lupa menambahkan titik koma setelah nilai atribut di akhir setiap baris.
Kode yang sudah selesai akan terlihat seperti contoh berikut:
Untuk menampilkan panduan, pilih Bantuan > Referensi, lalu pilih Referensi CSS O'Reilly dari menu pop-up di panel Referensi. Simpan lembar gaya.
Lembar gaya terlampir
Saat Anda melampirkan style sheet ke halaman Web, aturan yang ditentukan dalam style sheet diterapkan ke elemen terkait di halaman tersebut. Misalnya, saat Anda melampirkan style sheet cafe_townsend.css ke halaman index.html, semua teks paragraf (teks yang diformat dengan tag dalam kode HTML) diformat sesuai dengan aturan CSS yang Anda tetapkan.
Di jendela Dokumen, buka file index.html Cafe Townsend. (Jika file sudah terbuka, klik tabnya.)
Pilih teks pertama yang Anda tempelkan ke halaman di Tutorial: Tambahkan konten ke halaman.
Lihat di inspektur Properti dan pastikan paragraf diformat menggunakan tag paragraf.
Jika menu pop-up Format di Inspektur Properti menampilkan Paragraf, paragraf tersebut telah diformat menggunakan tag paragraf. Jika menu pop-up Format di Inspektur Properti menampilkan Tidak Ada atau yang lainnya, pilih Paragraf untuk memformat paragraf.
Ulangi langkah 3 untuk paragraf kedua.
Di panel CSS Styles (Window > CSS Styles), klik tombol Lampirkan Style Sheet di sudut kanan bawah panel.
Di kotak dialog Lampirkan Lembar Gaya Eksternal, klik Telusuri dan telusuri file cafe_townsend.css yang dibuat di bagian sebelumnya.
Klik Oke.
Teks di jendela Dokumen akan diformat sesuai dengan aturan CSS di style sheet eksternal.
Jelajahi panel Gaya CSS
Panel Gaya CSS memungkinkan Anda melacak aturan dan properti CSS yang memengaruhi elemen halaman yang dipilih saat ini, atau memengaruhi keseluruhan dokumen, dan memodifikasi properti CSS tanpa membuka lembar gaya eksternal.
Harap pastikan bahwa halaman index.html terbuka di jendela Dokumen.
Di panel Gaya CSS (Window > Gaya CSS), klik Semua di bagian atas panel, lalu periksa aturan CSS Anda.
Dalam mode "Semua", panel CSS menampilkan semua aturan CSS yang berlaku pada dokumen saat ini, baik aturan tersebut ada di lembar gaya eksternal atau di dokumen sendiri. Anda akan melihat dua kategori utama di panel Semua Aturan: kategori tag dan kategori cafe_townsend.css.
Jika kategori label tidak diperluas, klik tanda plus (+) untuk memperluas kategori.
Klik pada aturan isi.
Properti warna latar belakang dengan nilai #000000 muncul di panel Properti bawah.
Perhatikan bahwa Anda mungkin perlu menutup panel lain, seperti panel File, untuk melihat panel Gaya CSS secara lengkap, dan Anda juga dapat mengubah panjang panel Gaya CSS dengan menyeret batas antar panel.
Anda mengatur warna latar belakang halaman di Tutorial: Membuat Tata Letak Halaman Berbasis Tabel dengan menggunakan kotak dialog Modifikasi Properti Halaman. Saat Anda mengatur properti halaman dengan cara ini, Dreamweaver menulis gaya CSS yang ada di dalam dokumen.
Klik tanda tambah (+) untuk memperluas kategori cafe_townsend.css.
Klik pAturan.
Semua properti dan nilai yang ditentukan dalam style sheet eksternal untuk aturan p akan muncul di panel Properties di bawah.
Di jendela Dokumen, klik sekali di mana saja di dua paragraf yang baru saja Anda format.
Di panel Gaya CSS, klik Saat Ini di bagian atas panel, lalu periksa gaya CSS Anda. Dalam mode Saat Ini, panel CSS menampilkan ringkasan properti pilihan saat ini. Properti yang ditampilkan sesuai dengan properti aturan p di style sheet eksternal.
Di bagian berikutnya, Anda akan menggunakan panel CSS Styles untuk membuat aturan baru. Membuat aturan baru menggunakan panel CSS Styles jauh lebih mudah daripada mengetik aturan secara manual, sama seperti saat Anda pertama kali membuat style sheet eksternal.
Buat aturan CSS baru
Di bagian ini, Anda menggunakan panel Gaya CSS untuk membuat aturan CSS khusus atau gaya kelas. Gaya kelas memungkinkan Anda menyetel properti gaya rentang atau blok teks apa pun dan dapat diterapkan ke tag HTML apa pun. Untuk informasi selengkapnya tentang berbagai jenis aturan CSS, lihat Memahami CSS.
Di panel Gaya CSS, klik Aturan CSS Baru di sudut kanan bawah panel.
Di kotak dialog Aturan CSS Baru, pilih Kelas dari opsi Jenis Pemilih. Opsi ini harus dipilih secara default.
Masukkan .bold di kotak teks Nama.
Pastikan untuk mengetikkan titik (.) sebelum kata "tebal". Semua gaya kelas harus dimulai dengan titik.
Di menu pop-up "Tentukan di", pilih cafe_townsend.css. File ini harus dipilih secara default.
Klik Oke.
Kotak dialog Definisi Aturan CSS muncul, menunjukkan bahwa Anda membuat gaya kelas bernama .bold di file cafe_townsend.css.
Di kotak dialog "Definisi Aturan CSS", lakukan hal berikut:
Di kotak teks "Font", masukkan Verdana, sans-serif.
Di kotak teks Ukuran, masukkan 11 dan pilih Piksel di menu pop-up tepat di sebelah kanan.
Di kotak teks Tinggi Baris, masukkan 18 dan pilih Piksel di menu pop-up tepat di sebelah kanan.
Pilih Tebal dari menu pop-up Berat.
Di kotak teks Warna, masukkan #990000.
Tip Untuk informasi lebih lanjut tentang properti CSS, lihat Panduan Referensi O'Reilly yang disertakan dengan Dreamweaver. Untuk menampilkan panduan, pilih Bantuan > Referensi, lalu pilih Referensi CSS O'Reilly dari menu pop-up di panel Referensi.
Klik Oke.
Klik tombol Semua di bagian atas panel Gaya CSS.
Jika kategori cafe_townsend.css tidak diperluas, klik tombol plus (+) di sebelah kategori.
Anda dapat melihat bahwa Dreamweaver telah menambahkan gaya kelas .bold ke daftar aturan yang ditentukan dalam lembar gaya eksternal. Jika Anda mengklik aturan .bold di panel Semua Aturan, properti untuk aturan tersebut akan muncul di panel Properti. Aturan baru juga muncul di menu pop-up Style pada Inspektur Properti.
Terapkan gaya kelas ke teks
Sekarang Anda telah membuat aturan kelas dan menerapkannya pada beberapa teks paragraf.
Di jendela Dokumen, pilih empat kata pertama dari teks di paragraf pertama: koki visioner Cafe Townsend.
Di Property Inspector (Window > Properties), pilih huruf tebal dari menu pop-up Style.
Gaya gaya "tebal" akan diterapkan pada teks Anda.
Ulangi langkah 2 untuk menerapkan gaya huruf "tebal" pada empat kata pertama paragraf kedua.
Simpan halamannya.
Format teks bilah navigasi
Selanjutnya, Anda akan menggunakan CSS untuk menerapkan gaya pada teks tautan bilah navigasi. Banyak halaman Web menggunakan gambar persegi panjang berwarna dengan teks tertanam untuk membuat bilah navigasi. Namun, jika Anda menggunakan CSS, yang perlu Anda atur hanyalah teks tautan dan beberapa format. Dengan menggunakan properti display: block dan mengatur lebar blok, Anda dapat membuat persegi panjang secara efektif tanpa menggunakan gambar tambahan.
Buat aturan baru untuk navigasi
Buka file cafe_townsend.css jika belum terbuka, atau klik tabnya untuk menampilkan file.
Tentukan aturan baru dengan mengetikkan kode berikut setelah gaya kelas .bold di file:
.navigation {
}
Ini adalah aturan kosong.
Kode dalam file tersebut akan terlihat seperti contoh berikut:
Simpan file cafe_townsend.css.
Selanjutnya, Anda akan menggunakan panel CSS Styles untuk menambahkan properti ke aturan.
Jika file index.html tidak terbuka, buka file tersebut.
Di panel Gaya CSS, pastikan Semua mode dipilih, pilih aturan .navigasi baru, dan klik Edit Gaya di sudut kanan bawah panel.
Di kotak dialog "Definisi Aturan CSS", lakukan hal berikut:
Di kotak teks "Font", masukkan Verdana, sans-serif.
Pilih 16 dari menu pop-up Ukuran, lalu pilih Piksel dari menu pop-up yang berada tepat di sebelah kanannya.
Pilih Normal dari menu pop-up Gaya.
Pilih Tidak Ada dari daftar Modifikasi.
Pilih Tebal dari menu pop-up Berat.
Di kotak teks Warna, masukkan #FFFFFF.
Untuk menampilkan panduan, pilih Bantuan > Referensi, lalu pilih Referensi CSS O'Reilly dari menu pop-up di panel Referensi.
Klik Oke.
Sekarang Anda akan menggunakan panel CSS Styles untuk menambahkan lebih banyak properti ke aturan .navigation.
Di panel Gaya CSS, pastikan aturan .navigation dipilih, lalu klik Tampilkan Tampilan Daftar.
Tampilan daftar menyebabkan panel Properties menampilkan semua properti yang tersedia dalam urutan abjad (berbeda dengan tampilan Set Properties yang hanya menampilkan properti yang telah diatur).
Klik pada kolom di sebelah kanan properti background-color.
Untuk melihat isi properti secara lengkap, arahkan penunjuk mouse ke properti tersebut.
Masukkan nilai heksadesimal #993300 dan tekan Enter (Windows) atau Return (Macintosh).
Tip Untuk melihat dampak pekerjaan Anda pada style sheet eksternal, biarkan file cafe_townsend.css tetap terbuka di jendela Dokumen saat Anda bekerja. Saat Anda membuat pilihan di panel CSS Styles, Anda juga akan melihat Dreamweaver menulis kode CSS di style sheet.
Temukan properti tampilan (Anda mungkin perlu menggulir ke bawah), klik sekali di kolom kanan, dan pilih blok dari menu pop-up.
Temukan properti padding, klik sekali di kolom kanan, masukkan nilai 8px, dan tekan Enter (Windows) atau Return (Macintosh).
Temukan properti lebar, klik sekali di kolom kanan, masukkan 140 di kotak teks pertama, pilih Piksel dari menu pop-up, dan tekan Enter (Windows) atau Return (Macintosh).
Klik Tampilkan Properti Pengaturan untuk hanya menampilkan properti yang Anda atur di panel Properti.
Klik file cafe_townsend.css untuk menampilkannya. Anda akan melihat bahwa Dreamweaver telah menambahkan semua properti yang Anda tentukan ke file.
Simpan dan tutup file cafe_townsend.css.
Sekarang Anda telah membuat aturan yang memformat teks bilah navigasi. Selanjutnya, Anda akan menerapkan aturan tersebut pada link yang dipilih.
Terapkan aturan
Dengan halaman index.html terbuka di jendela Dokumen, klik kata Masakan untuk menempatkan titik penyisipan di suatu tempat di kata tersebut.
Di pemilih label, klik label paling kanan.
Operasi ini akan memilih semua teks untuk label atau link yang ditentukan.
Di Inspektur Properti (Window > Properties), pilih Navigasi dari menu pop-up Style.
Pada jendela Dokumen, tampilan teks Masakan telah berubah total. Teks sekarang diformat sebagai tombol bilah navigasi berdasarkan properti yang Anda tetapkan untuk aturan .navigation di bagian sebelumnya.
Ulangi langkah 1 hingga 3 untuk setiap tautan di bilah navigasi.
Anda harus menetapkan gaya kelas navigasi ke setiap label atau tautan, jadi penting untuk memilih setiap tautan satu per satu menggunakan pemilih label, lalu menetapkan gaya kelas ke setiap tautan satu per satu.
Jika Anda kesulitan memformat teks tautan, pastikan ada spasi (bukan carriage return) di antara setiap (atau kelompok) kata yang ditautkan. Pastikan juga bahwa ruang di antara kedua tautan itu tidak terhubung dengan sendirinya. Jika spasi tertaut, pilih spasi tertaut dengan hati-hati, kosongkan kotak teks Tautan di inspektur Properti, lalu tekan Enter (Windows) atau Return (Macintosh).
Ketika Anda sudah selesai memformat semua kata di bilah navigasi, simpan halaman dan pratinjau pekerjaan Anda di browser (File > Pratinjau di Browser).
Anda dapat mengeklik tautannya untuk memastikannya berfungsi.
Tambahkan efek mouseover
Sekarang Anda akan menambahkan efek rollover yang menyebabkan warna latar belakang bilah navigasi berubah setiap kali penunjuk tetikus melewati tautan. Untuk menambahkan efek mouseover, tambahkan aturan baru yang berisi :hover pseudo-class.
Tentang... Tentang:hover Kelas semu Kelas semu adalah cara untuk memengaruhi elemen tertentu dalam dokumen HTML, bukan berdasarkan kode HTML dokumen itu sendiri, tetapi berdasarkan kondisi eksternal lain yang diterapkan oleh browser Web. Pseudoclass bisa bersifat dinamis, artinya saat pengguna berinteraksi dengan dokumen, elemen pada halaman bisa mendapatkan atau kehilangan pseudoclass.
Kelas semu :hover mempengaruhi perubahan pada elemen halaman yang diformat ketika pengguna mengarahkan penunjuk mouse ke elemen tersebut. Misalnya, saat Anda menambahkan kelas semu :hover ke gaya kelas .navigation (.navigation:hover) untuk membuat aturan baru, semua elemen teks yang diformat dengan aturan .navigation akan berubah berdasarkan properti .navigation: aturan melayang.
Buka file cafe_townsend.css.
Pilih seluruh aturan .navigation.
Salin teks ("Edit">"Salin").
Klik sekali di akhir aturan, lalu tekan Enter (Windows) atau Return (Macintosh) beberapa kali lagi untuk memberi ruang.
Tempel ("Edit" > "Tempel") teks yang disalin ke dalam ruang yang baru saja Anda buat.
Tambahkan :hover pseudo-class ke pemilih .navigation yang ditempelkan sebagai berikut:
Dalam aturan .navigation:hover yang baru, ganti warna latar belakang saat ini (#993300) dengan #D03D03.
Simpan dan tutup file.
Buka file index.html di jendela Dokumen dan pratinjau halaman di browser (File > Pratinjau di Browser).
Saat Anda mengarahkan penunjuk tetikus pada tautan mana pun, Anda dapat melihat efek gerakan tetikus yang baru.