CSS - Cascading Style Sheets

Presentasi berjudul: "CSS - Cascading Style Sheets"— Transcript presentasi:

1 CSS - Cascading Style Sheets
Adam Arif Budiman, S.T, M.Kom

2 Apa itu CSS CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML

3 Bayangkan jika anda memiliki website dengan 100 halaman
Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah

4 Kenapa CSS Pada jaman dulu kala ketika membuat tampilan web yang menarik dan colorfull begitu rumit. Membuat gambar di photoshop, ditempelkan di halaman web, sebagai background, mengganti warna agar menarik atau merubah bentuk tulisan di web

5 Kenapa CSS (lanj) Jaman dulu:
1. Buat desainnya. menggunakan .psd (photoshop ) atau .cdr ( coreldraw ) 2. buat tabelnya. menggunakana tag <table>, <tr> dan <td> 3. potong – potong desain sesuai dengan kolom pada tabel, lalu “selipkan” desain pada kolom tabel menggunakan sebagai elemen image tabel atau background.

6 Kenapa CSS (lanj) Sekarang: buat halaman web buat css
ditempelkan di halaman web → tampilan halaman web sesuai dengan css yang anda buat

7 Penulisan CSS Sebagai file css tersendiri dengan ekstension css (mis: warna.css, bagrond.css) yang akan dipanggil oleh halaman html Ditempelkan di halaman html Inline → hanya tag yang diberi script css saja

8 Cara penulisan--> file tersendiri
halamanku.html ex1.css

9 Cara Penulisan--> ditempelkan pada source html

10 Cara Penulisan-->in line tag html

11 Cara penulisan-syntaks
Selector Declaration

12 Cara penulisan-syntaks

13 Komentar dalam CSS Untuk menjelaskan script
Dapat diabaikan oleh browser asal.....

14 Style - background

15 Style - list

16 Box

17 Box

18 FORM

19 FORM (lanj)

20 Tugas lab Buatlah halaman web sederhana yang berisi elemen CSS

21 Tugas Rumah Buatlah halaman web yang terdiri minimal 3 halaman yang dapat berhubungan/link satu sama lain. Topik halaman web (opsional) Pendidikan Perdagangan Image galery Dan lain lain.

22 pengumpulan Sebelum UTS Dikirim melalui email  ariadam@gmail.com
Kriteria penilaian: Memasukkan semua aspek HTML dan CSS yang sudah dipelajari