CSS Pendahuluan

Sebelum Anda melanjutkan, Anda harus memiliki pemahaman dasar sebagai berikut:

* HTML / XHTML

Jika Anda ingin mempelajari mata pelajaran pertama, temukan tutorial kami

Ini lah tampilan CCS Klik

Apa itu CSS?

* CSS singkatan dari Cascading Style Sheets
* Styles mendefinisikan bagaimana menampilkan elemen HTML
* Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah
* External Style Sheets dapat menghemat banyak bekerja
* External Style Sheets disimpan di file CSS

Demo CCS

Sebuah dokumen HTML dapat ditampilkan dengan gaya yang berbeda: Lihat cara kerjanya

Styles Soal Masalah Besar

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.

HTML dimaksudkan untuk menentukan isi dokumen, seperti:

<h1> Ini adalah judul </ h1>

<p> Ini adalah sebuah paragraf </.> p

Ketika tag seperti <font>, dan atribut warna ditambahkan pada spesifikasi 3,2 HTML, itu memulai sebuah mimpi buruk bagi pengembang web. Pengembangan situs web yang besar, di mana informasi font dan warna yang ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) CSS dibuat.

Dalam HTML 4.0, memformat semua bisa dihapus dari dokumen HTML, dan disimpan di file CSS yang terpisah.

Sekarang Semua browser mendukung CSS .
CSS Menyimpan Banyak Kerja!

CARA mendefinisikan CSS elemen HTML harus ditampilkan.

Gaya biasanya disimpan dalam eksternal. Css file. External style sheet memungkinkan Anda untuk mengubah tampilan dan tata letak semua halaman di situs Web, hanya dengan mengedit satu file tunggal!

Sintaks CSS

Contoh

* Lihat Contoh 1
* Lihat Contoh 2

Sintaks CSS

Aturan CSS memiliki dua bagian utama: pemilih, dan satu atau lebih deklarasi:

Pemilih biasanya elemen HTML Anda ingin gaya.

Setiap deklarasi terdiri dari properti dan nilai.

Properti ini gaya atribut yang ingin Anda ubah. Setiap properti memiliki nilai.

Contoh CSS

CSS deklarasi selalu diakhiri dengan titik koma, dan kelompok-kelompok deklarasi dikelilingi oleh kurung keriting:
p {color:red;text-align:center;}

Untuk membuat CSS lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada tiap baris, seperti ini:
Contoh
p
{
color:red;
text-align:center;
}

Lihat Contoh »

CSS Komentar

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan "/*", dan berakhir dengan "*/", seperti ini:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS Id dan Kelas

Id dan kelas Selectors

Selain pengaturan style untuk elemen HTML, CSS memungkinkan Anda untuk menentukan penyeleksi sendiri disebut "id" dan "class".
The Selector id

Id pemilih digunakan untuk menentukan gaya untuk elemen tunggal yang unik.

Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan "#".

Aturan gaya di bawah ini akan diterapkan ke elemen dengan id = "para1":

Contoh

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

Lihat Contoh

Catatan JANGAN memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox.

Kelas Selector

Pemilih kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Tidak seperti id pemilih, pemilih kelas yang paling sering digunakan pada beberapa elemen.

Hal ini memungkinkan Anda untuk mengatur gaya tertentu untuk setiap elemen HTML dengan kelas yang sama.

Pemilih kelas menggunakan atribut class HTML, dan didefinisikan dengan "."

Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan menjadi pusat-blok:
Contoh
center (text-align: center;.)

Lihat Contoh

Anda juga dapat menentukan bahwa hanya spesifik elemen HTML akan terpengaruh oleh kelas.

Pada contoh di bawah ini, elemen p semua dengan class = "center" akan menjadi pusat-blok:
Contoh
p.center (text-align: center;)

Lihat Contoh

Catatan JANGAN memulai nama kelas dengan angka! Ini hanya didukung di Internet Explorer.