Cara Membuat Styles dengan Kelas dan ID Selectors di Dreamweaver - dummies

Penyedia kelas dan ID di Dreamweaver memiliki banyak kesamaan dan satu perbedaan utama. Gaya ID hanya bisa digunakan sekali per halaman namun gaya kelas bisa digunakan berkali-kali pada halaman yang sama dengan yang Anda suka.

Gaya kelas dan ID memiliki kesamaan berikut:

Anda dapat memberi nama gaya yang dibuat dengan pemilih kelas dan ID apa pun yang Anda suka. Anda tidak boleh memasukkan spasi atau karakter khusus dalam nama gaya, meskipun garis bawah dan tanda hubung tidak apa-apa. Penggunaan semua huruf kecil adalah praktik umum tapi tidak diperlukan.

Anda dapat menerapkan gaya kelas dan ID ke elemen apa pun di laman, namun paling sering diterapkan pada tag header, tag div, tag daftar tidak berurutan, tag paragraf, tag gambar, dan HTML5 baru tag.

Menggunakan gaya yang dibuat dengan pemilih kelas dan ID adalah proses dua langkah. Pertama, Anda menciptakan gaya baru menggunakan pemilih kelas atau ID dan memberinya nama; maka Anda menerapkan gaya ke elemen pada halaman.

Untuk menentukan gaya kelas atau ID baru, buat dan simpan dokumen baru atau buka file yang ada, lalu ikuti langkah-langkah ini:

1Jika Anda mendefinisikan gaya baru yang Anda inginkan Berlaku pada elemen yang ada, klik untuk menempatkan kursor Anda di atas elemen yang ingin Anda format dengan gaya baru.

Meskipun langkah ini tidak diperlukan (Anda dapat menciptakan gaya untuk elemen yang belum ada di halaman), Dreamweaver secara otomatis membuat nama pemilih berdasarkan elemen halaman yang saat ini Anda pilih.

2Di panel Selectors pada panel Perancang CSS, pilih nama style sheet yang ingin Anda tambahkan gaya baru.

Jika Anda ingin menargetkan gaya ke jenis media atau ukuran layar tertentu, tentukan kueri media di panel @Media.

Jika Anda tidak menentukan permintaan media, Dreamweaver akan menggunakan properti Global dan gaya Anda akan bekerja di semua format media dan ukuran layar.

3Di panel Selectors, klik tanda tambah (+).

Selektor baru ditambahkan ke panel Selectors. Dreamweaver telah menambahkan nama pemilih majemuk, yang mencakup semua gaya yang sudah diterapkan pada tajuk utama dimana kursor Anda sedang beristirahat saat Anda mulai menentukan gaya.

4Double-klik nama pemilih, dan edit atau ganti dengan nama yang ingin Anda gunakan untuk gaya Anda.

Anda dapat memberi nama gaya kelas dan ID apa pun yang Anda suka, selama Anda tidak menggunakan spasi atau karakter khusus selain tanda hubung (-) atau garis bawah (_).

Jika Anda ingin membuat gaya menggunakan pemilih kelas, Anda harus memulai nama gaya dengan titik, atau titik.Jika Anda ingin menggunakan pemilih ID, nama gaya harus dimulai dengan tanda pon (#).

5Dalam panel Properties, tentukan pengaturan pada aturan gaya Anda.

Penyedia kelas dan ID mudah diterapkan ke konten setelah Anda membuatnya karena Dreamweaver menambahkan gaya ini ke daftar drop-down Kelas dan ID di inspektur Properti, yang terletak di bagian bawah ruang kerja.