Pengenalan CSS

Apakah itu CSS...?? CSS singkatan dari Cascading Style Sheet yang merupakan suatu bahasa stylesheet untuk mengatur, memformat, mempercantik tampilan suatu dokumen HTML atau halaman website. CSS sangat praktis untuk mengatur tampilan dari banyak dokumen HTML dengan satu file serta merubah tampilan dari dokumen html tersebut secara cepat.

Kenapa menggunakan CSS...?? Sebenarnya dengan tag html pun kita sudah bisa mengatur tampilan halaman html tersebut dan lalu kenapa menggunakan CSS lagi...? Banyak keuntungan dan manfaat jika kita mengatur tampilan menggunakan CSS. 

Dengan menggunakan CSS akan menghemat penggunaan tag html yang berulang-ulang,  memperkecil file html dan juga mempercantik halaman website.

Cara penggunaan CSS...ada 3 cara dalam penempatan kode CSS dalam file HTML, yaitu:

1. internal Stylesheet, adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag < head> dan tag < /head> .

contoh :

< html> < head>   < title>file CSS < /title>    < style type='text/css'>     body{ background-color: red; font-family: Vivaldi; }     p { color: black; }    < /style> < /head>  < body>   < p> test warna text CSS < /p> < /body> < /html>

Ket : yang tulisan merah adalah tag CSS

file CSS

2. Inline Style, Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode css pada file html (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

< html> < head>  < title> file CSS Inline Style < /title> < /head> < body>   < p style=" background: red; color: black;">test warna text CSS < /p> < /body> < /html>

Ket: yang tulisan merah adalah tag CSS

file CSS Inline Style

3. External StyleSheet, External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS. Contoh pemanggilan file CSS sbb:

< html> < head>  < title> file CSS External StyleSheet < /title>  < link rel='stylesheet' type='text/css' href='nama_file.css' /> < /head> < body>   < p> test warna text CSS < /p> < /body> < /html>

Ket: yang tulisan merah link memanggil file CSS dan warna biru nama file dari CSS

file CSS External StyleSheet

  Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengan mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

1. Maintenance kode CSS lebih mudah
2. Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
3. Dapat menghemat bandwidth

Pada Catatan  selanjutnya saya akan jelaskan tentang sintak, ID, Class dan penulisan komentar pada CSS...(*_^)