CSS 3 Selector yang terdapat dalam css external.pptx

CSS

1. Selector Casecading Style Sheet (CSS) Shaleh Efri Widhabdyo , S.Kom .

2. Apa Itu Selector ? Pada CSS, selector digunakan untuk menargetkan elemen HTML di halaman web yang ingin kita beri style. Ada berbagai macam pemilih CSS yang tersedia dan membuat halus saat memilih elemen untuk ditata . Presentation title 2

3. Jenis Selector 1. Universal 2. Class 4. Tag 5. Atribut 7. Pseudo Elemen Presentation Title 3 6. Pseudo Class 3. Id

4. Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada jangkaua (scope) tertentu . Struktur exs css : * { isi } Selector Universal

5. Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan . Selektor class dibuat dengan tanda titik di depannya . Selector ini dapat di gunakan oleh elemen lain Struktur exs class: .pink { color: white; background: pink; padding: 5px; } Presentation title 5 Class

6. Selektor ID hampir sama dengan class. Bedanya , ID bersifat unik . Hanya boleh digunakan oleh satu elemen saja . Selektor ID ditandai dengan tanda pagar (#) di depannya . Struktur exs css : #header { background: teal; color: white; height: 100px; padding: 50px; } <header id="header"> <h1> Selamat Datang di Website Saya</h1> </header> Selector ID

7. Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag di HTML. Struktur exs class: p { color: blue; } h1, h2, p { text-align: center; color: red; } Presentation title 7 Tag

8. Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut . Selektor ini hampir sama seperti selektor Tag. Struktur exs css : input[type=text] { background: none; color: cyan; padding: 10px; border: 1px solid cyan; } <input type="text" placeholder="ketik sesuatu..." /> Selector atribut

9. Pseudo-class Pseudo-class adalah selektor untuk memilih state pada elemen . Contohnya seperti elemen saat diklik , saat fokus , saat disentuh , dan lain sebagainya . Nah, dengan selektor ini kita bisa menentukan tampilan dari elemen pada state tersebut . Format penulisan pseduo -class menggunakan titik dua setelah elemen . Struktur exs class: a:hover { color: green; } Presentation title 9 Pseudo Class

10. :link untuk memlih link yang belum dikunjungi ; :visited untuk memlih link yang sudah dikunjungi ; :active untuk memilih elemen yang sedang aktif , seperti saat diklik ; :focus untuk memlih elemen yang sedang dalam keadaan fokus , misal teks lagi diinput . :checked untuk memilih elemen yang dicentang pada checkbox. Presentation title 10 Pseudo Class

11. Pseudo-element adalah selektor untuk memilih elemen semu . Elemen semu yang saya maksud di sini adalah elemen yang seolah-olah kita tambahkan di HTML. Tanpa pseudo-element, kita bisa tambahkan elemen <span>. Struktur exs css : p span { color: magenta; } <p> Kopi <span> Kenangan </span></p> p::first-line { color: magenta; } <p>Lorem</p> Pseudo element

12. ::before untuk memilh elemen semu sebelum elemen ; ::after untuk memilh elemen semu setelah elemen ; ::marker untuk memilh marker pada list; ::placeholder untuk memilih teks placeholder pada elemen input teks ; Pseudo element

13. Quarterly performance Presentation title 13

14. Areas of growth Time period B2B Supply chain ROI E-commerce Q1 4.5 2.3 1.7 5.0 Q2 3.2 5.1 4.4 3.0 Q3 2.1 1.7 2.5 2.8 Q4 4.5 2.2 1.7 70 Presentation title 14