Bagaimana membuat CSS

  • Warna akan diserahkan ke atribut warna properti luaran, sedangkan penataan teks (text-alignment) dan ukuran font (font-size) akan digantikan oleh aturan dalam laporan gaya.; Pemilihan Pencabut Klas CSS
  • Halaman Sebelumnya Latar Belakang CSS

Bagaimana memasukkan tabel gaya

Ketika membaca tabel gaya, peramban akan menyesuaikan dokumen HTML berdasarkan itu. Ada tiga cara untuk memasukkan tabel gaya:

Tabel gaya eksternal

Ketika gaya harus diterapkan ke banyak halaman, tabel gaya eksternal adalah pilihan yang ideal. Dalam kasus tabel gaya eksternal, Anda dapat mengubah penampilan seluruh situs hanya dengan mengubah satu file. Setiap halaman menggunakan tag <link> untuk menghubungkan ke tabel gaya.<link> tag di bagian atas (dokumen):

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Peramban akan membaca deklarasi gaya dari file mystyle.css dan menyesuaikan dokumen berdasarkan itu.

Tabel gaya eksternal dapat diedit di editor teks apapun. File ini tidak boleh mengandung tag html apapun. Tabel gaya harus disimpan dengan ekstensi .css. Berikut adalah contoh file tabel gaya:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Jangan tinggalkan spasi di antara nilai atribut dan satuan. Jika Anda menggunakan "margin-left: 20 px" daripada "margin-left: 20px", itu hanya berlaku di IE 6, tetapi tidak akan berfungsi dengan baik di Mozilla/Firefox atau Netscape.

Tabel gaya internal

Ketika dokumen tunggal memerlukan gaya khusus, Anda harus menggunakan tabel gaya internal. Anda dapat menggunakan tag <style> untuk mendefinisikan tabel gaya internal di bagian atas dokumen, seperti ini:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Gaya yang bersamaan

Karena menggabungkan ekspresi dan konten, gaya yang bersamaan akan kehilangan banyak kelebihan tabel gaya. Gunakan metode ini dengan hati-hati, seperti saat gaya hanya diterapkan sekali pada elemen yang sama.

Untuk menggunakan gaya yang bersamaan, Anda harus menggunakan atribut (style) di dalam tag yang relevan. Atribut Style dapat mengandung setiap properti CSS. Contoh ini menunjukkan bagaimana mengubah warna paragraf dan jarak luar kiri:

style<p>
style
="color: sienna; margin-left: 20px">

Ini adalah paragraf

</p>

Gaya Berlekuk

8pt
  Jika beberapa atribut didefinisikan dengan pemilihan yang sama di berbagai laporan gaya, nilai atribut akan diwariskan dari laporan gaya yang lebih khusus.
  color: contoh, laporan gaya luaran memiliki tiga atribut untuk pemilihan h3:font-size:
  text-align: color: merah;font-size:
  Manakala laporan gaya internal memiliki dua atribut untuk pemilihan h3:

kiri

8pt
  color: merahfont-size: 
  text-align: kananfont-size:
  Manakala laporan gaya internal memiliki dua atribut untuk pemilihan h3:

h3 {

} Jika halaman ini yang memiliki laporan gaya internal juga terhubung dengan laporan gaya luaran, gaya yang didapatkan h3 adalah:font-size: 
color: merahfont-size: 
text-align: kananfont-size:

20pt

  • Warna akan diserahkan ke atribut warna properti luaran, sedangkan penataan teks (text-alignment) dan ukuran font (font-size) akan digantikan oleh aturan dalam laporan gaya.; Pemilihan Pencabut Klas CSS
  • Halaman Sebelumnya Latar Belakang CSS