You are on page 1of 3

STUDY CLASS HIMSI UIN JAKARTA Type = CSS Pert.

= 1

Pengertian CSS CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web. Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS. Manfaat dari CSS: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, 2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, 3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, 4. Dapat berkolaborasi dengan JavaScript. 5. Digunakan dalam hampir semua web browser. Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: 1. External Style Sheet (file CSS berbeda dari file HTML), 2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) 3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh: <html> <head> <link rel=stylesheet type=text/css href=public.css/> </head> <body> </body> </html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html> <head> </head> <div style="background-color:#999999; text-align:center;">Inline CSS</div> </body> </html>

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh: <html> <head> <style type = "text/css"> .header { width:900px; height:50px; border: 1px solid #640404; } .headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } .headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; } </style> </head> <body> </body> </html>

Selector menggunakan Id dan class

Selector menggunakan Id Jika kita menggunakan selector berupa id maka harus di usahakan menggunakan sebuah nama yang unik untuk penamaan id dan tidak memakainya ber ulang-ulang, artinya 1 id selector hanya di pakai untuk 1 style dalam tag HTML, selector menggunakan id harus di dahului ole tanda "#"(tanpa tanda petik) sebelum memberi nama.

Contoh: #judul{ font-famili:Trebuchet,Time New romans; font-size:25px; color:blue; }

Selector menggunakan Class Intinya sama saja seperti selector menggunakan Id hanya saja selector dengan Class bisa di gunakan berulang-ulang untuk memberi style pada tag HTML, selector menggunakan Class harus di dahului oleh "."(tanpa tanda petik) titik/dot sebelum di beri nama.

Contoh: .sub_judul{ font-famili:Trebuchet,Time New romans; font-size:15px; color:Violet; }

You might also like