Dokumen ini adalah terjemahan dari Chapter 2 CSS dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/LieBos2e/enter/

Penerjemah: Edwin Rene

Bab 2
CSS

Ini adalah bab 2 dari buku berjudul Cascading Style Sheets, designing for the Web, oleh Håkon Wium Lie dan Bert Bos (Edisi kedua, 1999, Addison Wesley, ISBN 0-201-59625-3)

Seperti yang kita jelaskan di bab sebelumnya, elemen HTML memungkinkan para perancang untuk melakukan mark up pada sebuah dokumen seperti halnya pada strukturnya. Pada spesifikasi HTML terdapat daftar bagaimana browser-browser harus menampilkan elemen-elemen tersebut. Sebagai contoh, anda akan yakin bahwa elemen strong akan akan menampilkan huruf tebal. Juga anda pasti percaya bahwa kebanyakan browser akan memunculkan isi dalam elemen h1 mengunakan huruf berukuran besar… setidaknya lebih besar dari elemen p dan lebih besar dari elemen h2. Tetapi diluar semua itu, anda tidak mempunyai kontrol bagaimana teks anda ditampilkan..

CSS mengubah semua itu. CSS menempakan perancang di belakang kursi pengemudi. Kita akan mendedikasikan sisa dari buku ini menjelaskan apa yang dapat anda lakukan dengan CSS. Dalam bab ini, kita mulai dengan memperkenalkan anda ke dasar dari bagaimana menulis style sheet dan bagaimana CSS dan HTML bekerja sama untuk menentukan struktur dan bentuk dari dokumen anda.

Aturan dan Style Sheet

Untuk mulai menggunakan CSS, anda bahkan tidak perlu menulis sebuah style sheet. Bab 16 akan menjelaskan anda bagaimana anda dapat mengarahkan pada style sheets yang ada di Web.

Ada dua cara untuk membuat CSS. Anda dapat menggunakan editor teks biasa dan mulai menulis style sheets "dengan tangan," atau menggunakan perangkat khusus dengan tujuan tertentu - misalnya sebuah aplikasi desain halaman Web - yang mendukung CSS. Tool ini memungkinkan anda untuk membuat style sheets tanpa memperlajari sintaks dari bahasa CSS. Tentu saja, dalam kebanyakan kasus perancang ingin menlakukan perubahan-perubahan kecil nantinya, jadi kami menyarankan anda untuk menulis dan merubah CSS dengan tangan. Mari kita mulai!

H1 { color: green }

Apa yang anda lihat diatas adalah sebuah aturan CSS sederhana yang mengandung sebuah aturan. Sebuah aturan adalah sebuah pernyataan mengenai aspek yang akan memberikan style pada sebuah elemen atau lebih. Sebuah style sheet adalah kumpulan dari aturan aturan yang yang diterapkan pada sebuah dokumen HTML. Aturan diatas menentukan warna dari seluruh heading tingkat satu (h1). Mari kita lihat hasil tampilan dari aturan tersebut:

Gambar 2.1

[image]

Sekarang kita akan mulai memilah aturan tersebut.

Bagian-bagian dari sebuah aturan

Sebuah aturan terdiri dari dua bagian:

  • Selektor (Selector) - bagian sebelum kurung kurawal
  • Deklarasi (Declaration) - bagian yang terdapat ditengah kurung kurawal

    [image]

Selektor adalah penghubung antara dokumen HTML dan style. Selector mendefinisikan elemen apa yang terkena dampak dari deklarasi tersebut. Deklarasi tersebut adalah bagian dari aturan yang menentukan apa efek yang akan diberikan. Pada contoh diatas, selektor adalah h1 dan deklarasi adalah "color: green." Karena itu, seluruh elemen h1 akan terkena dampak dari deklarasi, yaitu, warnanya menjadi hijau. (Properti color hanya berdampak pada warna teks saja, untuk latar belakang, pembatas, dsb. menggunakan properti lain)

Selektor diatas berdasar pada tipe dari elemen: memilih seluruh elemen dengan tipe "h1." Selektor jenis ini dinamakan selektor tipe (type selector). Elemen HTML apapun dapat digunakan sebagai sebuah selektor tipe. Selektor tipe adalah jenis selektor yang paling sederhana. Kita membahas jenis-jenis selektor di Lihat CSS selectors. , "CSS selectors."

Bagian-bagian dari sebuah deklarasi

Sebuah deklarasi terdiri dari dua bagian yang dipisahkan oleh titik dua:

  • Properti - bagian yang ada sebelum titik dua
  • Nilai - bagian setelah titik dua

    [image]

Properti adalah kualitas atau ciri-ciri yang dimiliki sesuatu hal. Pada contoh sebelumnya, ialah color. CSS2 (lihat box terpisah) mendefinisikan sekitar 120 properti dan kita bisa memberikan nilai pada semua porperti tersebut.

Nilai adalah spesifikasi yang tepat dari properti. Dalam contoh tersebut, "(green) hijau," tetapi bisa saja dibuat biru, merah, kuning atau warna lainnya.

Diagram dibawah menunjukkan semua komponen dari sebuah aturan. Tanda kurung kurawal ({ }) dan titik dua (:) memungkinkan browser membedakan antara selektor, properti, dan nilai.

Gambar 2.2 Diagram dari sebuah aturan.

[image]

Pengelompokan selektor dan aturan

Dalam merancang CSS, keringkasan merupakan tujuan awal kami. Dulu kami menganggap bila kita mengurangi ukuran dari style sheet, kami dapat memungkinkan para perancang menulis dan mengedit "dengan tangan." Dan juga, style sheet yang kecil akan di load lebih cepat dari yang panjang. Oleh sebab itu CSS mempunyai beberapa mekanisme untuk memperpendek style sheets dengan mengelompokkan selektor dan deklarasi.

Sebagai contoh pertimbangkan tiga aturan ini:

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }

Seluruh tiga aturan ini mempunyai deklarasi yang sama - mereka menetapkan fonta menjadi bold. (Ini dilakukan dengan menggunakan properti font-weight, yang kita bahas di Lihat Fonts. .) Karena semua deklarasi ini identik, kita dapat mengelompokkan selektor-selektor tadi dalam sebuah daftar yang dipisahkan koma (comma-separated list) dan hanya menuliskan deklarasinya satu kali, seperti ini:

H1, H2, H3 { font-style: bold }

Aturan ini akan menghasilkan hasil yang sama dengan tiga aturan diatas.

Sebuah selektor dapat memiliki lebih dari tiga deklarasi. Sebagai contoh, kita dapat menulis sebuah style sheet dengan dua aturan di bawah:

H1 { color: green }
H1 { text-align: center }

Dalam hal ini, kita menetapkan bahwa seluruh h1 menjadi hijau dan di posisikan ditengah kanvas. (Hal ini dibuat dengan menggunakan properti text-align, yang dibahas di Chapter  5 .)

Tetapi kita dapat mendapatkan hasil yang sama lebih cepat dengan mengelompokkan deklarasi-deklarasi tadi pada selektor yang sama dalam sebuah daftar yang dipisahkan dengan titik koma (semicolon-separated list), seperti ini:

H1 {
color: green;
text-align: center;
}

Seluruh deklarasi harus di taruh diantara kurung kurawal. Sebuah titiak koma memisahkan dan dapat - meski tidak harus - juga muncul di akhir dari deklarasi terakhir. Juga untuk membuatnya lebih mudah dibaca, kami menyarankan anda untuk menempatkan setiap deklarasi di barisnya masing-masing, seperti yang kita lakukan disini. (Browser tidak akan perduli, mereka tidak perduli pada whitespace dan line break.)

Sekarang setelah anda memiliki dasar untuk membuat aturan CSS dan style sheet. Namun, anda masih belum selesai. Agar style sheet memiliki efek anda harus "melekatkannya" pada dokumen HTML anda.

"Melekatkan" Style Sheets pada Dokumen

Agar style sheet dapat berpengaruh pada dokumen HTML, style sheet harus dilekatkan pada dokumen. Dalam lain kata, style sheet dan dokumen HTML harus dikombinasikan sehingga mereka bisa bekerja sama untuk mempresentasikan dokumen tersebut. Ini dapat dicapai dengan salah satu dari empat cara dibawah ini:

  1. Mengaplikasikan yang mendasar, style sheet ke seluruh dokumen menggunakan elemen style.
  2. Mengaplikasikan sebuah style sheet ke sebuah elemen dengan menggunakan atribut style..
  3. Mehubungkan sebuah style sheet eksternal ke dokumen dengan menggunakan elemen link.
  4. Mengimport style sheet menggunakan notasi @import CSS.

Pada bagian berikut kita membahas cara pertama: menggunakan elemen style. Kita menggunakan attribut style di Bab 4 , "Selektor CSS," dan menggunakan link elemen dan notasi @import pada Bab 16 , "Style sheet Eksternal."

Merekatkan menggunakan elemen STYLE

Anda dapat merekatkan style sheet bersama dokumen HTML dengan meletakkan style sheet tersebut dalam elemen style di atas dokumen anda. Elemen style diperkenalkan di HTML khusus untuk memungkinkan style sheets untuk di sisipkan dalam dokumen HTML. Ini adalah sebuah style sheet (ditampilkan dalam huruf tebal) yang direkatkan kesebuah dokumen contoh menggunakan elemen style. Hasilnya dapat dilihat di Gambar 2.3.

<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
H1, H2 { color: green }
</STYLE>
<BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. Among his works are: <UL> <LI>the Goldberg Variations <LI>the Brandenburg Concertos <LI>the Christmas Oratorio </UL> <H2>Historical perspective</H2> <P>Bach composed in what has been referred to as the Baroque period. </BODY> </HTML>

Gambar 2.3 Hasil dari penambahan sebuah style sheet, sebuah aturan merubah h1 menjadi hijau dan merekatkan style sheet tersebut ke dokumen menggunakan elemen style. (cobalah)

[image]

Perhatikan bahwa elemen style ditempakan setelah elemen title dan sebelum elemen body. Judul dari dokumen tidak terdapat pada bagian body jadi tidak terkena dampak dari style CSS.

Isi dari sebuah elemen style adalah sebuah style sheet. Namun, isi dari elemen seperti h1, p, dan ul muncul di kanvas, konten dari style sheet tidak muncul di kanvas. Justru, efek dari isi dari elemen style - style sheet tersebut - yang dimunculkan di kanvas. Jadi anda tidak akan melihat "{ color: green }" muncul di layar anda, sebaliknya anda akan melihat dua elemen h1 yang berwarna hijau. Tidak ada aturan lain yang diberikan pada elemen lainnya, jadi elemen-elemen tersebut akan muncul dengan warna bawaan browser.

Browser dan CSS

Untuk gambaran besar mengenai browser yang tersedia, lihat halaman ikhtisar W3C

Bagi CSS untuk bekerja sebagaimana dijelaskan pada buku ini, anda harus menggunakan browser yang mendukung CSS. Sebuah browser dengan dukungan CSSakan mengenali elemen style sebagai kontainer untuk sebuah style sheet dan mempresentasikan dokumen tersebut sebagaimana mestinya. Kebanyakan browser yang di distribusikan saat ini mendukung CSS, contohnya Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) dan Opera 3.5 (O3.5). Estimasi yang konserfatif mengindikasikan bahwa lebih dari setengah dari seluruh orang di Web menggunakan browser yang dipercanggih dengan CSS, dan angkanya meningkat secaraperlahan . Kemungkinan pihak yang berkomunikasi dengan anda menggunakan browser jenis ini. Bila tidak, berikan alasan bagi mereka untuk upgrade!

Sumber terbaik untuk informasi mengenai browser-browser berbeda mendukung CSS ada di WebReview's charts

Sayangnya, implmentasi CSS tidak semuanya sempurna. Bila anda mulai bereksperimen dengan style sheet, anda akan perhatikan bahwa setiap browser memiliki keterbatasan dan bug-nya masing masing. Pada umumnya, browser-browser yang lebih baru akan lebih baik daripada yang lama. IE4 dan O3.5 adalah salah satu yang terbaik, dan keluaran Netscape yang berikut, - dengan nama sandi Gecko - juga memiliki dukungan yang lebih baik untuk CSS.

Mereka yang tidak menggunakan browser dengan dukungan CSS masih dapat membaca halaman yang menggunakan style sheets. CSS dirancang dengan hati-hati sehingga seluruh isi harus tetap dapat terlihat mesikipun browser tidak tahu apapun mengenai CSS. Beberapa browser seperti Netscape Navigator versi 2 dan 3 tidak mendukung style sheets, mereka cukup tahu mengenai style element untuk benar benar mengacuhkannya. Selain adanya dukungan pada style sheet, ini adalah sikap yang benar.

Namun, browser lain tidak mengetahui elemen style, seperti Netscape's Navigator 1 dan Microsoft Internet Explorer 2, yang akan mengabaikan style tags tetapi tetap memperlihatkan isi dari elemen style element. Sebab itu, Pengguna akan berakhir dengan style sheet di print diatas kanvas. Pada saat buku ini ditulis, hanya beberapa persen dari pengguna yang akan merasakan hal ini. Untuk menghindari hal ini, anda dapat menaruh style sheet anda di dalam sebuah HTML comment, seperti yang kita bahas di Bab 1 . Karena komentar dalam HTML tidak muncul di layar, dengan menempatkan style sheet dalam sebuah dokumen HTML, anda mencegah browser-browser yang lebih lama untuk menampilkan isi dari elemen style. Browser yang dipercanggih dengan CSS mengetahui trik ini, dan akan memperlakukan style elemen sebagai sebuah style sheet.

Kembali pada komentar HTML yang dimulai dengan <!-- dan berakhir dengan -->. Berikut adalah cuplikan dari contoh kode sebelumnya yang menunjukkan bagaimana bagaimana menulis sebuah style sheet dalam sebuah komentar HTML. Komentar hanya menutup isi dari elemen style:

<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
<!-- H1 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>

CSS juga memiliki bentuk komentarnya sendiri yang dapat anda gunakan dalam style sheet. Sebuah komentar CSS dimulai dengan "/*" dan diakhiri dengan "*/." (Mereka yang akrab dengan bahasa pemrograman C akan mengenali hal ini.) Aturan CSS dalam sebuah komentar CSS comment tidak akan mempunyai pengaruh pada tampilan dokumen..

Browser juga perlu diberi tahu bahwa anda sedang berkerja dengan style sheets CSS. CSS saat ini adalah satu satunya bahasa style sheet yang digunakan dengan dokumen HTML dan kami rasa hal ini tidak akan berubah. Untuk XML situasinya mungkin akan berbeda. Tetapi seperti layaknya ada lebih dari satu format gambar (GIF, JPEG dan PNG misalnya), mungkin akan ada lebih dari satu bahasa style sheet. Jadi adalah suatu kebiasaan yang baik untuk memberitahu browser bahwa mereka sedang burhubungan dengan CSS. (Kenyataannya, HTML mengharuskan anda untuk melakukan hal terbut.) Ini dapat dilakukan dengan tipe atribut dari elemen style. Nilai dari tiper terbut menandakan type dari style sheet yang sedang digunakan. Untuk CSS, nilainya adalah "text/css." Berikut adalah cuplikan dari contoh kode sebelumnya yang menunjukkan bagaimana anda dapat menulisnya (dikombinasikan dengan penggunaan komentar HTML):

<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css"> <!-- H1 { color: green } --> </STYLE> <BODY> .. </BODY> </HTML>

Pada saat browser membuka sebuah dokumen, browser tersebut akan memeriksa apakah style sheet tersebut dapat dimengertinya. Bila ya, browser akan berusaha membaca style sheet, selain itu akan dibiarkan. Atribut type (baca Bab  1 untuk sebuah diskusi mengenai atribut HTML) dalam elemen style sheet adalah adalah sebuah cara untuk memberi tahu browser style-sheet apa yang sedang digunakan. Tipe atribut harus termasuk didalamnya.

Agar membuat contoh-contoh lebih mudah dibaca, kita telah memutuskan untuk tidak membungkus style sheet dalam komentar di HTML, tetapi kita akan menggunakan atribut tipe di seluruh buku ini

Struktur pohon dan warisan

Ingat kembali bab  1 mengenai diskusi tentang HTML yang merepresentasikan dokumen dengan sebuah struktur yang mirip dengan pohon dan bagaimana elemen-elemen dalam HTML memiliki turunan dan induk. Ada berbagai alasan untuk memiliki dokumen dengan struktur pohon. Dengan style sheet, ada satu alasan yang sangat tepat: warisan. Seperti turunan mendapat warisan dari induknya, elemen HTML juga. Sebagai ganti gen dan uang, elemen HTML mewariskan properti yang bersifat style.

Mari kita mulai dengan melihat dokumen contoh:

<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a
<STRONG>prolific</STRONG> composer. Among his
works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
</BODY>
</HTML>

Struktur pohon dari dokumen ini adalah:

[image]

Dengan sistim warisan, nilai properti CSS pada sebuah elemen akan diteruskan ke bawah pohon terus ke turunan-turunannya. Sebagai contoh, style sheet kita hingga hingga saat ini menetapkan warna hijau pada elemen h1 dan h2. Sekarang, misalkan, anda ingin memberikan warna yang sama ke seluruh dokumen. Anda dapat melakukannya dengan menuliskan seluruh tipe elemen dalam selektor tersebut:

<STYLE TYPE="text/css">
H1, H2, P, LI { color: green }
</STYLE>

Tetapi, kebanyakan dokumen HTML lebih kompleks dari dokumen contoh kita, dan style sheet anda akan segera bertambah panjang. Ada cara yang lebih baik dan lebih singkat. Daripada menetapkan style pada seluruh tipe elemen, kita menetapkannya pada induk mereka semua, elemen body:

<STYLE TYPE="text/css">
BODY { color: green }
</STYLE>

Karena semua elemen lain mendapatkan warisan dari elemen body, mereka semua akan mendapatkan warna color (Figure  2.4 ).

Gambar 2.4 Hasil dari warisan. (cobalah)

[image]

Seperti yang anda dapat lihat diatas, warisan adalah sarana transportasi yang akan mendistribusikan properti yang sifatnya style pada turunan dari sebuah elemen. Karena elemen body adalah induk dari semua elemen yang dapat dilihat, elemen body adalah sebuah selektor yang tepat bila anda ingin menentukan aturan yang sifatnya style untuk seluruh dokumen.

Menolak Warisan

Pada contoh sebelumnya, semua elemen telah diberikan warna yang sama melalui warisan. Terkadang, turunan tidak tampak seperti induknya. Tak heran, CSS juga bertanggung jawab atas hal ini. Katakanlah anda ingin membuat h1 menjadi biru sedangkan elemen yang lainnya hijau. Hal ini dengan mudah dapt dilakukan di CSS:

<STYLE TYPE="text/css">
BODY { color: green }
H1 { color: navy }
</STYLE>

Karena h1 adalah turunan dari element body (dan oleh sebab itu mendapatkan warisan dari elemen body), kedua aturan pada style sheet diatas saling bertentangan. Yang pertama menentukan warna dari elemen body - dan dikarenakan hal tersebut warna dari h1 juga mendapatkan warisan - sedangkan yang kedua menentukan warna khusus untuk elemen h1. Aturan mana yang akan berlaku? Mari kita lihat:

Alasan mengapa aturan yang kedua yang berlaku adalah karena, aturan tersebut lebih spesifik dari yang pertama. Aturan yang pertama bersifat umum - aturan tersebut berdampak pada seluruh elemen pada kanvas. Aturan yang kedua hanya berdampak pada elemen-elemen h1 dalam dokumen dan oleh sebab itu menjadi lebih spesifik.

Bila CSS merupakan sebuah bahasa pemrograman, maka urutan munculnya aturan akan menentukan urutan mana yang akan berlaku. CSS bukanlah bahasa pemrograman, dan seperti contoh di atas. Urutan tidak berarti. Hasilnya akan sama saja bila kita menggunakan style sheet berikut:

<STYLE TYPE="text/css">
H1 { color: navy }
BODY { color: green }
</STYLE>

CSS telah dirancang untuk menyelesaikan konflik antar peraturan style sheet seperti yang diatas. Kekhususan adalah salah satu aspek tersebut. Anda dapat mengetahuinya lebih detil di Bab 15, "Cascading and inheritance."

Properti yang tidak mewarisi

Sebagai sebuah aturan umum, properti pada CSS diwariskan oleh induk pada elemen turunannya seperti yang kita bahas di contoh-contoh sebelumnya. Namun, beberapa properti, tidak mewarisi dan ada alasan baik dibalik hal tersebut. Kita akan menggunakan properti background (dijelaskan si Bab 11) sebagai contoh dari properti yang tidak mewarisi.

Anggapkah anda ingin memberikan gambar latar belakang untuk sebuah halaman. Pada CSS anda dapat menuliskan:

<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
BODY {
background: url(texture.gif) white;
color: black;
}
</STYLE>
<BODY>
<H1>Bach's <EM>home</EM> page</H1>
<P>Johann Sebastian Bach was a prolific
composer.
</BODY>
</HTML>

Properti Background mempunyai URL ("texture.gif") yang mengarah pada ganbar latar belakang sebagai nilainya. Ketika gambar dibuka, kanvas akan terlihat seperti berikut:

Ada beberapa hal yang patut diperhatikan pada contoh diatas:

Jadi, mengapa property background tidak mendapatkan warisan? Secara visual, efek transparansi mirip dengan warisan: terlihat seperti seluruh elemen memiliki latar belakang yang sama. Ada dua alasan: satu, latar belakang yang transparan lebih mudah ditampilkan (tidak ada yang perlu ditampilkan!) dari latar belakang lainnnya. Kedua, gambat latar belakang disejajarkan secara relatif pada elemen yang memilikinya, jika tidak anda tidak akan mendapatkan hasil gambar latar belakang yang rata.

Tugas umum dengan CSS

Menetapkan warna dan latar belakang - seperti yang dijelaskan diatas - adalah salah satu tugas umum yang dilakukan dengan CSS. Tugas umum lainnya termasuk menetapkan fonta dan jarak antar elemen. Bagian ini menuntun anda pada properti yang paling umum yang digunakan dalam CSS.

Tugas umum: fonta

Mari kita mulai dengan fonta. Bila anda pernah menggunakan aplikasi desktop publishing sebelumnya, anda akan dapat membaca style sheet kecil berikut:

H1 { font: 36pt serif }

Aturan diatas menetapkan fonta untuk elemen h1. Bagian pertama dari nilainya - 36pt - menetapkan ukuran fonta menjadi 36 poin. Sebuah "poin" adalah ukuran unit tipografi yang telah berhasil selamat dan masuk ke era digital. Dalam bab berikutnya kita akam menjelaskan mengapa anda harus menggunakan unit "em" dan bukan "pt" .Tetapi untuk saat ini kita akan tetap menggunakan poin. Bagian kedua dari nilai tersebut- serif - memberi tahu browser untuk menggunakan sebuah huruf dengan (yang memiliki kait kecil dibelakangnya, Bab   5 akan menceritakan semuanya pada anda). Fonta Serif yang lebih memiliki dekorasi akan cocok dengan home page Bach karena fonta modern sans-serif (fonta tanpa serif) tidak digunakan pada jamannya. Berikut hasilnya:

Properti font adalah sebuah properti yang merupakan singkatan untuk menentukan beberapa properti pada satu saat. Dengan menggunakannya, anda dapat mempersingkat style sheets anda dan menentukan nilai dari seluruh properti yang digantikannya. Jika anda memilih untuk menggunakan semua ini untuk menggantikan contoh diatas:

H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}

Terkadang anda hanya ingin menentukan satu diantaranya. Sebagai contoh, anda mungkin ingin membuat miring teks dalam beberapa elemen. Berikut sebuah contoh:

UL { font-style: italic }

Properti font-style tidak akan menggantikan ukuran besar atau jenis keluarga fonta (font family), hal tersebut hanya akan memiringkan font yang sudah ada. Ketika di tetapkan pada elemen ul , elemen li didalamnya akan menjadi miring, karena font-style diwariskan. Berikut adalah hasilnya ketika dipakai pada halaman test yang sudah anda ketahui sekarang:

Seperti sebelumnya, properti font-weight digunakan untuk menggantikan berat - ketebalan - dari huruf. Anda dapat lebih memberi tekanan pada daftar item (list item / li) dengan menetapkan induk mereka jadi bold:

UL { 
font-style: italic;
font-weight: bold;
}

Yang menghasilkan:

Properti yang terakhir, font-variant dan line-height, belum mendapat banyak dukungan dari browser-browser hingga saat ini dan oleh sebab ini belum banyak digunakan.

Tugas umum: margin

Memberikan jarak di sekitar elemen adalah alat utama dalam tipografi. Headline diatas mempunyai jarak di atasnya dan jarak (yang lebih sedikit) dibawahnya. Paragraf ini, seperti yang tercetak di buku, mempunyai jarak di sebelah kiri dan (lebih sedikit) di sebelah kanan. CSS dapat digunakan untuk menentukan berapa banyak jarak yang harus berada di sekeliling elemen.

Pada setelan standar, browser anda mengetahui sedikit mengenai bagaimana menampilkan berbagai jenis elemen di HTML. Misalnya, browser tahu bahwa elemen list dan blockquote harus dimasukkan untuk membedakan mereka dari teks yang lain. Sebagai seorang perancang, anda dapat membuat web dengan setelan tersebut sementara dalam waktu yang sama membuat penyesuian-penyesuaian anda sendiri. Mari menggunakan elemen blockquote sebagai contoh. Ini sebuah dokumen contoh:

<HTML>
<TITLE>Fredrick the Great meets Bach</TITLE>
<BODY>
<P>One evening, just as Fredrick the Great was
getting his flute ready, and his musicians
were assembled, an officer brought him a
list of the strangers who had arrived. With
his flute in his hand he ran over the list,
but immediately turned to the assembled
musicians, and said, with a kind of
agitation:
<BLOCKQUOTE>"Gentlemen, old Bach is come."
</BLOCKQUOTE>
<P>The flute was now laid aside, and old Bach, who
had alighted at his son's lodgings, was immediately
summoned to the Palace.
</BODY>
</HTML>

Gambar berikut menunjukkan bagaimana browser HTML biasa menampilkan dokumen tersebut:

Seperti yang anda dapat lihat, browser telah menambahkan jarak disetiap sisi dari kutipan teks. Dalam CSS, jarak ini disebut sebagai "margin" dan semua elemen memiliki margin di keempat sisi. Properti-properti tersebut dinamakan: margin-top, margin-right, margin-bottom, dan margin-left. Anda dapat mengganti bagaimana elemen blockquote diposisikan dengan menulis sebuah style sheet singkat:

BLOCKQUOTE {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;
}

Unit "em" akan dibahas secara mendetil di bab berikut, tetapi kita dapat mengungkapkan rahasianya sekarang: "em" mempunyai skala  tergantung dari ukuran fonta. Jadi, contoh diatas akan menyebabkan margin vertikal yang sama tingginya dengan ukuran fonta (1em) dari blockquote tersebut, dan margin horizontal yang memiliki lebar nol. Untuk memastikan agar teks yang dikutip masih dapat dibedakan, kita telah membuat hurufnya miring (italic). Hasilnya adalah:

Sama seperti  font yang digunakan sebagai properti, adalah sebuah singkatan untuk menentukan beberapa properti yang berhubungan dengan fonta sekaligus, margin adalah sebuah singkatan untuk menentukan seluruh properti dari margin. Properti diatas dapat ditulis sebagai berikut:

BLOCKQUOTE { 
margin: 1em 0em 1em 0em;
font-style: italic;
}

Bagian pertama dari nilai - 1em - merupakan nilai dari margin-top. Dari sana menurut arah jarum jam: 0em untuk margin-right, 1em untuk margin-bottom, dan 0em untuk margin-left.

Selain margin kiri dijadikan nol, teks yang dikutip perlu diberikan style tambahan untuk membedakannya dari teks yang lainnya. Menetapkan font-style menjadi italic dapat membantu dan menambah warna latar belakang memberdakannya lebih jauh:

BLOCKQUOTE { 
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
}

Hasilnya adalah sebagai berikut:

Seperti yang diharapkan, warna latar belakangnya telah berubah. Tidak seperti contoh sebelumnya, warna dinotasikan dengan komponen merah/hijau/biaru (red/green/blue atau RGB). Warna RGB colors Dijelaskan dengan seksama di Bab  11 .

Satu masalah penggunaan style diatas adalah bahwa warna latar belakang menutupi teks yang dikutip secara pas-pasan. Jarak di sekitap kutipan - area margin - tidak menggunakan warna latar belakang dari elemen tersebut. CSS mempunyai jenis jarak lain, yang disebut padding, yang menggunakan warna latar belakang dari elemen tersebut. Dalam hal lain properti dari padding sama dengan properti margin: menambahkan jarak di sekeliling sebuah elemen. Mari menmbahkan padding di kutipan teresbut

BLOCKQUOTE { 
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
padding: 0.5em;
}

Hasil dari penambahan padding adalah jarak tambahan antara teks dan kotak yang mengelilinginya:

Perhatikan bahwa properti padding hanya memberikan satu nilai (0.5em). Hanya seperti properti margin, padding juga dapat menerima 4 nilai yang diberikan pada padding atas, kanan, bawah dan kiri secara berurutan. Tetapi, bila semuanya memiliki nilai yang sama, menulis semuanya sekali cudah cukup. Ini berlaku untuk keduanya baik untuk padding dan margin (dan juga untuk properti border yang lainnya, seperti yang dijelaskan di  Lihat Jarak disekitar kotak. ).

Tugas umum: links

Untuk memudahkan pengguna untuk menelusuri dokumen hypertext, link seharusnya diberi sebuah style imtuk membedakan mereka dari teks HTML normal. Browser HTML umumnya memberi garis bawah pada hyperlink text. Juga, berbagai skema pewarnaan juga telah digunakan untuk memberikan tanda jika pengguna telah mengunjungi link tersebut ataupun tidak. Karena hyperlinks adalah bagian mendasar dari Web, CSS memiliki dukungan khusus untuk memberikan style pada mereka. Berikut sebuah contoh:

A:link { text-decoration: underline }

Contoh diatas menandakan bahwa link yang belum dikunjungi akan diberi garis bawah:

Link sudah diberi garis bawah, seperti yang kita telah tentukan, tetapi link tersebut juga berwarna biru, dan kita belum menentukan warnanya. Ketika pembuat Web tidak menentukan semua kemungkinan dari style, browser masih menggunakan gaya biasa untuk mengisi kekosongan tersebut. Interaksi antara style pembuat Web, style dasar browser dan style dari pengguna (prferensi pengguna) adalah sebuah contoh dari penyelesaian konflik dari CSS. Oleh sebab itu disebut sebagai cascade (bagian "C" dari CSS). Kita akan membahas cascade dibawah ini.

Selektor (A:link) patut disebut disini. Amda mungkin mengira bahwa "A" adalah sebuah elemen HTML, tetapi bagian terakhir tesebut adalah suatu hal baru. ":link" adalah sebagian dari yang disebut sebagai pseudo-classes dalam CSS. Pseudo-classes digunakan untuk memberikan style pada elemen elemen berdasarkan informasi diluar dokumen itu sendiri. Sebagai contoh, pembuat dokumen tidak mengetahui apakah link tertentu akan dikunjungi atau tidak. Pseudo-classes dijelaskan lebih detil di Bab 4, dan kita hanya akan memberikan sedikit contoh disini:

A:visited { text-decoration: none }

Aturan ini memberikan style pada link yang sudah dikunjungi, sama seperti A:link yang memberikan style pada link yang belum dikunjungi. Berikut adalah contoh yang sedikit lebih rumit:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Aturan terakhir memperkenalkan sebuah pseudo-class baru :hover. Dengan asumsi pengguna sedang menggurakkan alat penunjuk (seperti sebuah mouse), style tersebut akan diterapkan pada elemen tersebut ketika pengguna pointer diarahkan keatas ("hover" diatas ) link. Sebuah efek yang umum adalah untuk mengganti warna latar belakang. Berikut tampilannya:

Pseudo-class :hover memiliki sejarah yang menarik. Pseudo-class ini diperkenalkan di CSS2 setelah efek hover menjadi terkenal di kalangan programmer JavaScript. Solusi JavaScript memiliki kode yang rumit dibandingkan dengan pseudo-class CSS dan ini adalah sebuah contoh dari CSS mengambil efek yang telah populer diantar perancang Web.

Sedikit tambahan mengenai Cascading

Fitur dasar dari CSS adalah bahwa lebih dari satu style sheet dapat memberikan pengaruh pada bagaimana dokumen dipresentasikan. Fitur ini dikenal sebagai cascading karena berbagai style sheet diperkirakan akan berdatangan secara terus menerus. Cascading adalah fitur mendasar dari CSS, karena kami menyadari bahwa sebuah dokumen kemungkinan besar akan berakhir dengan berbagai style sheet dari sumber yang berbeda: browser, pembuat Web, dan kemungkinan pengguna itu sendiri.

Pada contoh terakhir anda dapat melihat warna teks dari link berubah menjadi biru tanpa ditentukan pada style sheet. Juga, browser mengetahui bagaimana membentuk elemen-elemen blockquote dan h1 tanpa harus ditentukan secara khusus. Segala sesuatu yang diketahui browser tentang pembentukan tersebut disimpan dalam default style sheet dari browser dan digabungkan dengan style sheet pembuat Web dan pengguna ketika dokumen di presentasikan.

Selama bertahun-tahun kita mengetahui bahwa para perancang ingin mengembangkan style sheet mereka sendiri. Tetapi kita juga menemukan bahwa pengguna, juga, ingin memiliki opsi untuk menentukan bentuk presentasi dari dokumen mereka. Dengan CSS, mereka dapat melakukan hal ini dengan menyediakan sebuah style sheet mereka sendiri yang digabungkan dengan style sheet dari browser dan perancang Web. Segala pertentangan antara berbagai style sheet akan diselesaikan pada browser tersebut. Biasanya, style sheet perancang akan memiliki efek terkuat pada dokumen, diikuti oleh style sheet pengguna dan bawaan dari browser. Namun, pengguna dapat menentukan bahwa sebuah aturan sangat pentung dan aturan tersebut akan menimpa aturan style dari perancang maupun browser.

Kita membahas membahas cascading secara detil dalam Bab  15, "Cascading dan warisan." Tapi sebelum itu, masih ada banyak yang perlu dipelajari mengenai fonta, jarak dan warna.