Home

Belajar CSS
Intro
Syntax
How To
Background
Text
Font
Border
Garis Tepi
Penjeda
List
Tabel

Belajar HTML

Link-Link
www.w3schools.com

Penulisan CSS

Sebelumnya -- Berikutnya
--------------------------------------------------------------------------------

Syntax

Syntax CSS terbagi menjadi tiga bagian: selector, property, dan nilai (value):

selector {property: value}

Selector adalah elemen HTML/tag yang kamu tentukan, property adalah atribut yang akan diubah, dan tiap property dapat memiliki nilai. Property dan nilainya dipisahkan tanda titik-dua, dan ditulis diantara tanda kurung kurawal:

body {color: black}

Catatan: Jika nilai berisi lebih dari satu kata, gunakan tanda kutip dua:

p {font-family: "sans serif"}

Catatan: Jika kamu ingin menuliskan selbih dari satu property, kamu harus pisahkan dengan tanda titik-koma. Contoh berikut menunjukkan bagaimana penulisan yang benar:

p {text-align:center;color:red}

Untuk membuat style lebih mudah dibaca, kamu dapat menuliskan tiap property pada tiap baris, seperti ini:

p
{
text-align: center;
color: black;
font-family: arial
}


--------------------------------------------------------------------------------

Grouping

Kamu dapat mengumpulkan selector. Pisahkan tiap selector dengan tanda koma. Pada contoh berikut kami mnyatukan semua elemen header. Semua elemen header akan ditampilkan dengan warna hijau:

h1,h2,h3,h4,h5,h6
{
color: green
}


--------------------------------------------------------------------------------

Selector class

With the class selector you can define different styles for the same type of HTML element.

Katakan kamu ingin dua jenis paragraf di dokumen HTML mu: satu rata-kanan, dan satu rata-tengah. Berikut ini bagaimana kamu melakukannya dengan style:

p.right {text-align: right}
p.center {text-align: center}

Kamu perlu menambahkan atribut class pada dokumen HTML:

<p class="right">
Paragraf akan rata-kanan.
</p><p class="center">
Paragraf akan ditulis di tengah.
</p>

Catatan: Untuk memberikan lebih dari satu class pada satu elemen, penulisannya adalah sebagai berikut:

<p class="center bold">
Ini paragraf.
</p>

Paragraf di atas akan menggunakan style class "center" dan class "bold".

Kamu juga bisa mengabaikan nama tag di selector untuk menentukan style yang akan digunakan oleh semua elemen HTML yang memiliki class tertentu. Pada contoh berikut, semua elemen HTML dengan class="center" akan ditulis di tengah:

.center {text-align: center}

Pada kode berikut, elemen h1 dan elemen p memiliki class="center". Ini berarti kedua elemen akan mengikuti pengaturan yang ditentukan di selector ".center":

<h1 class="center">
Heading ini akan ditulis di tengah
</h1><p class="center">
Paragraf ini juga ditulis di tengah.
</p>

JANGAN AWALI nama class dengan ANGKA! Tidak akan bekerja pada Mozilla/Firefox.


--------------------------------------------------------------------------------

Tambahkan Style pada Elemen dengan Atribut Tertentu

Kamu juga dapat mengaplikasikan style pada elemen HTML dengan atribut tertentu.

Pengaturan style berikut akan cocok dengan semua elemen input yang memiliki atribut "text":

input[type="text"] {background-color: blue}


--------------------------------------------------------------------------------

Id Selector

Kamu juga dapat menentukan style untuk elemen HTML dengan id selector. Id selector ditandai dengan #.

Pengaturan style di bawah ini akan cocok dengan semua elemen yang memiliki atribut id dengan nilai "green":

#green {color: green}

Pengaturan style berikut akan cocok dengan elemen p yang memiliki atribut dengan nilai "para1":

p#para1
{
text-align: center;
color: red
}

JANGAN AWALI nama ID dengan ANGKA! Tidak akan bekerja pada Mozilla/Firefox.


--------------------------------------------------------------------------------

Komentar CSS

Komentar (Comments) digunakan untuk menjelaskan kodemu, dan mungkin membantumu ketika kamu mengedit kode di lain waktu. Sebuah komentar akan diabaikan oleh browser. Sebuah komentar CSS diawali dengan "/*", dan berakhir dengan "*/", Seperti ini:

/* Ini komentar */
p
{
text-align: center;
/* Ini komentar lainnya */
color: black;
font-family: arial
}


--------------------------------------------------------------------------------
Sebelumnya -- Berikutnya
--------------------------------------------------------------------------------