1. Aturan singkatan atribut font CSS

Umumnya, CSS digunakan untuk mengatur atribut font:
berat font: tebal;
gaya font: miring;
font-varient: huruf kecil;
ukuran font:1em;
tinggi garis: 1,5em;
font-family:verdana,sans-serif;
Anda dapat menulis semuanya dalam satu baris:
jenis huruf: huruf kecil miring tebal 1em/1,5em verdana,sans-serif;
Bukankah ini tampak lebih sederhana? Hanya ada satu hal yang perlu diperhatikan: metode steno ini hanya berfungsi ketika properti font-size dan font-family ditentukan pada saat yang bersamaan. Selain itu, jika Anda tidak menyetel bobot font, gaya font, dan varian font, keduanya akan menggunakan nilai default, jadi ingatlah hal ini.

2. Nilai default batas CSS

Anda biasanya dapat mengatur warna, lebar, dan gaya tepinya, seperti:
batas: 3 piksel padat #000;
Hal ini membuat batas tampak lebar 3 piksel, hitam, dan solid. Namun nyatanya, Anda hanya perlu menentukan gayanya di sini.
Jika hanya gaya yang ditentukan, nilai default akan digunakan untuk properti lainnya. Umumnya lebar default Border adalah medium, yang umumnya sama dengan 3 hingga 4 piksel; warna default adalah warna teks. Jika nilai ini sudah pas, tidak perlu menyetel terlalu banyak pengaturan.

3. Gunakan dua kelas untuk elemen secara bersamaan

Umumnya satu elemen diset ke satu kelas (Class), namun bukan berarti dua elemen tidak bisa digunakan. Sebenarnya, Anda bisa melakukan ini:

…

Berikan elemen P dua kelas sekaligus, dipisahkan dengan spasi, sehingga semua atribut kelas teks dan kelas samping akan ditambahkan ke elemen P. Jika terjadi pertentangan antara atribut-atribut pada kedua kelas, maka yang ditetapkan nanti akan berlaku, yaitu atribut-atribut kelas yang ditempatkan kemudian pada file CSS akan berlaku.
Tambahan: Untuk ID tidak boleh ditulis

…

dan tidak boleh ditulis seperti ini

4. CSS untuk pencetakan dokumen

Banyak situs web yang memiliki versi cetak khusus, namun hal ini tidak terlalu diperlukan karena pencetakan dapat ditata menggunakan CSS.
Dengan kata lain, Anda dapat menentukan dua file CSS untuk halaman tersebut, satu untuk tampilan layar dan satu lagi untuk dicetak:


Baris 1 untuk display, baris 2 untuk print, perhatikan atribut media.
Tapi apa yang harus ditulis di CSS pencetakan? Anda dapat mengaturnya dengan cara yang sama seperti Anda mendesain CSS biasa. Saat mendesain, Anda dapat mengatur CSS ini untuk menampilkan CSS untuk memeriksa efeknya. Mungkin Anda akan menggunakan perintah display: none untuk mematikan beberapa gambar dekoratif, mematikan beberapa tombol navigasi, dll.

5. Keterampilan penggantian gambar CSS

Umumnya disarankan untuk menggunakan HTML standar untuk menampilkan teks daripada gambar, yang tidak hanya lebih cepat tetapi juga lebih mudah dibaca. Namun jika ingin menggunakan beberapa font khusus, Anda hanya bisa menggunakan gambar saja.
Misalnya, jika Anda ingin membuat ikon untuk menjual sesuatu, Anda akan menggunakan gambar ini:

Tentu saja hal ini mungkin terjadi, tetapi bagi mesin pencari, dibandingkan dengan teks biasa, mereka kurang tertarik dengan teks pengganti di alt. Hal ini karena banyak desainer yang menaruh banyak kata kunci di sini untuk menipu mesin pencari. Jadi caranya harus seperti ini:

Beli widget

Tapi tidak ada font khusus. Untuk mencapai efek yang sama, Anda dapat mendesain CSS seperti ini:
h1 { latar belakang: url(widget-image.gif) tanpa pengulangan; tinggi: tinggi gambar indentasi teks: -2000px }
Perhatikan penggantian tinggi bayangan dengan tinggi bayangan sebenarnya. Di sini, gambar akan ditampilkan sebagai latar belakang, dan karena lekukan -2000 piksel diatur, teks sebenarnya akan muncul 2000 titik di sisi kiri layar dan tidak terlihat. Namun bagi orang yang mematikan gambarnya, mungkin tidak bisa melihatnya sama sekali, jadi berhati-hatilah.

6. Teknik lain dari model kotak CSS

Penyesuaian model Box ini terutama untuk browser IE sebelum IE6, yang menghitung lebar batas dan spasi ke dalam lebar elemen. Misalnya:
#kotak { lebar: 100 piksel; batas: 5 piksel; bantalan: 20 piksel }
Sebut saja seperti ini:

Lebar penuh kotak sekarang seharusnya menjadi 150 poin, yang berlaku di semua browser kecuali IE sebelum IE6. Namun pada browser seperti IE5, lebar penuhnya masih 100 poin. Perbedaan ini dapat diatasi dengan menggunakan metode penyesuaian Kotak yang ditemukan oleh orang-orang sebelumnya.
Namun tujuan yang sama dapat dicapai dengan CSS untuk membuat tampilannya konsisten.
#kotak { lebar: 150 piksel }
#kotak div { batas: 5 piksel; bantalan: 20 piksel }
Disebut seperti ini:

Dengan cara ini, apa pun browsernya, lebarnya adalah 150 poin.

7. CSS mengatur elemen blok agar sejajar secara horizontal di tengah

Jika Anda ingin membuat halaman web dengan lebar tetap dan ingin halaman web berada di tengah secara horizontal, biasanya tampilannya seperti ini:
#content { lebar: 700 piksel; margin: 0 otomatis }
Anda akan menggunakan