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

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

INFORMASI KONTENTAMPILAN DOC HTML FILE CSS BROWSER DIHUBUNGKAN VISUALISASI

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

MENGHUBUNGKAN CSS

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

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

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

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; }

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;}

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

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

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; }

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” }

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