A. A. Bajuadji, S.Kom, M.Eng |

Presentasi berjudul: "A. A. Bajuadji, S.Kom, M.Eng |"— Transcript presentasi:

1 A. A. Bajuadji, S.Kom, M.Eng | aabayuadji@gmail.com

2 Cascading Style Sheets Bahasa pemrograman desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web Berbagai Style – On-screen – In-Print – By-Voice

3 INFORMASI KONTENTAMPILAN DOC HTML FILE CSS BROWSER DIHUBUNGKAN VISUALISASI

4 Declarator 1 -font-color: red; - font-size: 14pt; -Font-family: Arial; Declarator 2 -font-color: blue; - font-size: 18pt; -Font-family: Verdana; SELEKTOR 1 SELEKTOR 4 SELEKTOR 2 SELEKTOR 3 CSS FILE WEB PAGE

5 MENGHUBUNGKAN CSS

6 SELEKTOR ? – Untuk memilih elemen-elemen dalam sebuah halaman web yang kemudian elemen tersebut akan ditampilkan sesuai dengan deklarator yang merujuk pada selektor tersebut

7 Type (Tulisan) Class ID Descendent Link Pseudo Class Pseudo Elemen Dynamic Pseudo Class Language Child First-Child Adjacent (Berdekatan)

8 Mudah, Cara: Menghilangkan tanda <> Contoh Penulisan – Body dari – p dari Contoh Body { color: red; } 3 Tipe tampilan Properti Blok->... Inline-> List Item ->,,

9 Solid ID Class – Sebuah selektor class yang memilih semua elemen yang menggunakan class ini..tanya { font-weight: bold;}.jawab{font-weight:400; color:red;} Relative Selektor Class – Selektor yang hanya mengubah class dari beberapa elemen tertentu p.tanya {font-weight: bold;} p.jawab {font-weight: 400; color:red; }

10 Solid Selektor ID – Diaplikasikan pada setiap selektor dengan ID yang sesuai (dengan tada #). #tanya {font-weight: bold;} #jawab {font-weight: 400; color:green;} Relativie Selektor ID – Selektor yang mengubah dan memformat tampilan sebuah elemen dan menyesuaikannya. p#tanya {font-weight: bold;} p#jawab {font-weight: 400; color:green;}

11 Selektor yang lebih menspesifikasikan pemilihan elemennya dalam sebuah halama HTML Contoh h1 strong { color : red; } H1 Strong H1 tidak strong NOTE STRONG Turunan setelah H1

12 4 jenis – a:link (link belum dikunjungi) – a:visited(sudah dikunjungi) – a:hover(link diarahkan dengan mouse) – a:active(saat link diklik)

13 Aturan First Line & First Letter First Line Menentukan format baris pertama untuk 1 paragraph First Letter Memilih 1 huruf untuk memulai sebuah elemen tersebut H1 : first-line { font-family:”comic sans MS” color: red; }

14 Aturan Before & After Before Aturan CSS yang mengijinkan sebuah konten yang tergenerate (muncul) secara otomatis pada halaman web yang diletakkan pada awalan elemen. After Pada akhir elemen aturan.css.before { content: “tergenerate secara otomatis” }

15 Selektor Lain-Lain Dynamic Pseudo Class Language Child First-Child