Tutorial CSS (Basic)

Introduction

Sebelum belajar CSS harus mengetahui dasar dari HTML.

Apa itu CSS?

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

Style CSS membereskan masalah besar dalam website.
HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.
HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen, seperti:

Ini adalah heading

Ini adalah sebuah paragraf.
Ketika tag seperti , dan warna atribut yang ditambahkan ke dalam HTML 3.2 , 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) menciptakan CSS.

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

Sekarang ini semua browser telah mendukung CSS.

CSS Menghemat banyak waktu pekerjaan.
CSS Mendefinisikan halaman HTML yang akan ditampilkan.
CSS biasanya disimpan dalam eksternal. Css file. Eksternal style sheet memungkinkan Anda untuk mengubah tampilan dan tata letak semua halaman di situs Web, hanya dengan mengedit satu file saja.

Syntax CSS

Sebuah aturan CSS memiliki dua bagian utama: sebuah selektor, dan satu atau lebih deklarasi:
Selector biasanya adalah elemen HTML ingin Anda gunakan.
Setiap deklarasi terdiri dari properti dan nilai.
Properti adalah atribut gaya yang ingin Anda ubah. Setiap properti mempunyai nilai.

Contoh CSS

CSS deklarasi selalu diakhiri dengan tanda 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 setiap baris, seperti ini:
p
{
color:red;
text-align:center;
}

CSS Comment

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu anda ketika anda mengedit source code di kemudian hari. Komentar akan diabaikan oleh browser.

Sebuah komentar CSS diawali dengan "/*", dan berakhir dengan "*/", seperti ini:
/*Ini adalah komen*/
p
{
text-align:center;
/*Ini komen yang lainnya*/
color:black;
font-family:arial;
}