SPEAKER: Ternyata HTML tidak satu-satunya bahasa yang dapat Anda gunakan dalam dari suatu halaman web. Anda dapat menggunakan sesuatu yang disebut CSS, atau Cascading Style Sheets, juga. CSS memungkinkan Anda untuk menentukan lebih tepatnya estetika web halaman, termasuk tata letak dan ukuran dan warna dan font dan banyak lagi. Sebagai contoh, mari kita membuat halaman web di sini disebut CSS0 yang mewakili halaman rumah untuk, katakanlah, John Harvard. 

Pada halaman ini, kita akan memiliki John Harvard nama, di bawah yang akan pesan yang bagus bagi pengunjung nya, di bawah yang akan menjadi footer, dengan mengatakan, beberapa informasi hak cipta. Untuk melakukan hal ini, mari kita definisikan tiga divisi untuk halaman menggunakan tag disebut div. Buka braket div, John Harvard, dekat braket div, lain braket div terbuka, dan sekarang kita akan menentukan sesuatu seperti, selamat datang di halaman rumah saya! Dan mari kita menutup div ini, juga. 

Dan sekarang ketiga dan terakhir div, hak cipta. Hanya untuk menjadi mewah, biarkan aku gunakan sekarang HTML entitas, simbol yang mewakili karakter yang tidak bisa dinyatakan mengetik pada keyboard Anda. Secara khusus, aku akan melakukan ampersand, pound, 169, titik koma. Ternyata itu adalah kode angka untuk simbol hak cipta. Kemudian mari kita tentukan John Harvard di sini di bagian bawah. Mari kita menutup div dan menyimpan file. 

Sekarang, apa tag div ini? Tag div hanya mendefinisikan divisi halaman, yang pada dasarnya adalah wilayah persegi panjang. Jadi pada saat ini dalam waktu, saya memiliki tiga daerah persegi panjang, satu di atas yang lain. Jadi untuk saat ini, efeknya hampir sama meskipun aku punya tiga paragraf. Tapi kita tidak akan melihat cukup banyak spasi di antara mereka. 

Mari kita menyimpan file ini, mengubah nya perizinan, dan melihat untuk saat di Chrome. Chmod a + r CSS0.html. Sekarang mari kita membuka Chrome dan kunjungan http://localhost.CSS0.html. Memang, inilah halaman rumah John Harvard. Mari kita sekarang menyesuaikan dgn mode sedikit lebih justru menggunakan beberapa CSS. 

Kembali di gedit, mari kita pergi ke ini tag div pertama dan menambahkan gaya atribut menentukan bahwa aku ingin ukuran font, katakanlah, 36 piksel, atau px. Dan saya ingin berat font ini menjadi berani daripada default, yang normal. Untuk div kedua, mari kita tentukan atribut gaya lain yang memiliki ukuran 24 pixel, sehingga sedikit lebih kecil. Tutup kutipan setelah titik koma. 

Terakhir, dalam div ketiga ini, mari kita lakukan gaya sama dengan ukuran kutipan, font, dan katakanlah 12 piksel saat ini. Tutup quote setelah titik koma. Perhatikan bahwa aku tampaknya memiliki ditentukan sedikit stilisasi untuk masing-masing tiga divs menggunakan, ternyata, CSS. Bahkan, sintaks yang Anda lihat dalam antara tanda kutip ganda adalah CSS, khusus CSS properti dengan nilai-nilai. Dan untuk itu tag pertama, di mana saya memiliki dua sifat tersebut, ukuran font dan Berat font, saya hanya dipisahkan dengan titik koma. 

Sekarang, hanya demi gaya, aku titik koma juga termasuk di akhir setiap baris. Tapi mereka tidak benar-benar diperlukan, terutama ketika Anda hanya memiliki satu properti yang didefinisikan. Sekarang mari kita menyimpan file dan kembali di Chrome, dan melihat apa efek bersih adalah. Kembali pada Chrome di sini, mari kita klik Reload. 

Sekarang kita memiliki sedikit lebih menarik halaman rumah untuk John Harvard, dimana baris pertama dengan namanya, yang ada di dalam itu div pertama, adalah 36 piksel tinggi dan juga tebal, dimana baris kedua, yang dalam div kedua, adalah 24 piksel tinggi, tapi tidak tebal. Dan dimana baris ketiga dalam ketiga yang div adalah 12 piksel tinggi dan juga tidak tebal. Tapi misalkan sekarang saya ingin bergeser semua teks ini lebih seperti bahwa itu berpusat. 

Aku bisa menyelaraskan masing-masing individu divs sebagai yang berpusat. Tapi yang lebih mudah, bisa saya membungkus mereka tiga divs dalam div keempat, orangtua div, sehingga untuk berbicara, dan menentukan bahwa div dan semua nya keturunan harus teks selaras center? Mari kita lihat. 

Di dalam gedit, mari kita kembali ke saya tubuh dan menambahkan div top up baru dengan div, gaya sama dengan kutipan tanda kutip pusat teks menyelaraskan, dekat penawaran setelah titik koma. Dan sekarang, mari kita pergi ke depan dan indent semua dari garis yang kita ketik sebelumnya. Dan di bawah div ketiga, mari kita menutup div baru ini. 

Dengan kata lain, karena ketiga divs asli sekarang anak-anak, sehingga untuk berbicara, dari orang tua div baru dan saya sudah ditentukan bahwa saya ingin menyelaraskan teks yang div induk di tengah halaman, properti yang akan diwarisi oleh semua anak-anak. Memang, mari kita menyimpan file dan kita lihat di browser. Mari kita ulang di Chrome. Dan ada yang kita miliki, bahkan lebih bagus halaman rumah untuk John Harvard.