diff --git a/CSS/030 CSS Pseudo Elements/README.md b/CSS/030 CSS Pseudo Elements/README.md index 8e1f19e8..dd3681d9 100644 --- a/CSS/030 CSS Pseudo Elements/README.md +++ b/CSS/030 CSS Pseudo Elements/README.md @@ -1,123 +1,125 @@ -## CSS Pseudo Element +# CSS Pseudo Element -### Apa itu Pseudo Element? +## Apa itu Pseudo Element? -Pseudo element adalah element semu atau element palsu. Element semu? sebenarnya setiap kita membuat element +Pseudo element adalah element semu atau element palsu. Element semu? Sebenarnya setiap kita membuat element pada HTML, ada element semu yang bisa kita beri style. Pseudo element ditulis menggunakan 2 tanda titik dua (::) setelah selector seperti ini. -``` +```css selector::pseudo-element { property: value; } ``` -> catatan : Pada CSS1 dan CSS2, pseudo element ditulis menggunakan 1 tanda titik dua (:). Tujuan utama +> Catatan : Pada CSS1 dan CSS2, pseudo element ditulis menggunakan 1 tanda titik dua (:). Tujuan utama > perubahan penulisan pseudo element adalah untuk mempermudah membedakan antara pseudo element dan pseudo > class. Jangan heran apabila kalian menemukan penulisan pseudo element menggunakan 1 tanda titik dua (:). -### Macam-macam pseudo element +## Macam-macam pseudo element + +### ::first-line + +Digunakan untuk menambahkan style pada baris pertama dalam sebuah text. + +Contoh : + +```css +p::first-line { + color: lightblue; +} + +/* + Baris pertama pada p + akan berwarna biru muda +*/ +``` + +### ::first-letter + +Digunakan untuk menambahkan style pada huruf pertama dalam sebuah text. + +Contoh : -#### ::first-line - - Digunakan untuk menambahkan style pada baris pertama dalam sebuah text. - - contoh : - - ```css - p::first-line { - color: lightblue; - } - - /* - baris pertama pada p - akan berwarna biru muda - */ - ``` - -#### ::first-letter - - Digunakan untuk menambahkan style pada huruf pertama dalam sebuah text. - - contoh : - - ```css - h1::first-letter { - color: lightgreen; - font-size: 200%; - } - - /* - huruf pertama pada h1 akan berwarna hijau muda - dan berukuran lebih besar - */ - ``` - -#### ::before - - Digunakan untuk menambahkan beberapa konten dan style di belakang/sebelum element. Pseudo element - ini termasuk yang paling sering digunakan karena fungsinya yang cukup unik yaitu bisa menambahkan sesuatu - pada element kita, bahkan kita bisa memasukkan icon pada pseudo element ini. - - contoh : - - ```css - h1::before { - content: "Before"; - background-color: blue; - } - - /* - Akan muncul tulisan "Before" yang memiliki background color berwarna biru - di belakang element h1 - */ - ``` - -#### ::after - - Pseudo element ini kebalikan dari ::before, digunakan untuk menambahkan beberapa - konten dan style di depan/setelah element. Pseudo element ini juga cukup sering digunakan. - - Contoh : - - ```css - h1::after { - content: "After"; - background-color: green; - } - - /* - Akan muncul tulisan "After" yang memiliki background color berwarna biru - di depan element h1 - */ - ``` - -#### ::marker - Pseudo element ini hanya bisa digunakan pada `list-item`, fungsinya untuk memberi style pada penanda dalam list. - - Contoh : - - ```css - ul li::marker { - color: orange; - } - - /* - Warna enanda dalam li akan berubah menjadi warna orange. - */ - ``` - -#### ::selection - Digunakan untuk memberi style pada saat user menyorot suatu element seperti - meng-klik dan menyeret teks. - - ```css - p::selection { - color: green; - background-color: lightblue; - } - - /* - Warna background dan warna font akan berubah saat user menyorot element p. - */ - ``` +```css +h1::first-letter { + color: lightgreen; + font-size: 200%; +} + +/* + Huruf pertama pada h1 akan berwarna hijau muda + dan berukuran lebih besar +*/ +``` + +### ::before + +Digunakan untuk menambahkan beberapa konten dan style di belakang/sebelum element. Pseudo element +ini termasuk yang paling sering digunakan karena fungsinya yang cukup unik yaitu bisa menambahkan sesuatu +pada element kita, bahkan kita bisa memasukkan icon pada pseudo element ini. + +Contoh : + +```css +h1::before { + content: "Before"; + background-color: blue; +} + +/* + Akan muncul tulisan "Before" yang memiliki background color berwarna biru + di belakang element h1 +*/ +``` + +### ::after + +Pseudo element ini kebalikan dari ::before, digunakan untuk menambahkan beberapa +konten dan style di depan/setelah element. Pseudo element ini juga cukup sering digunakan. + +Contoh : + +```css +h1::after { + content: "After"; + background-color: green; +} + +/* + Akan muncul tulisan "After" yang memiliki background color berwarna biru + di depan element h1 +*/ +``` + +### ::marker + +Pseudo element ini hanya bisa digunakan pada `list-item`, fungsinya untuk memberi style pada penanda dalam list. + +Contoh : + +```css +ul li::marker { + color: orange; +} + +/* + Warna penanda dalam li akan berubah menjadi warna orange. +*/ +``` + +### ::selection + +Digunakan untuk memberi style pada saat user menyorot suatu element seperti +meng-klik dan menyeret teks. + +```css +p::selection { + color: green; + background-color: lightblue; +} + +/* + Warna background dan warna font akan berubah saat user menyorot element p. +*/ +``` diff --git a/HTML/021 HTML Id/README.md b/HTML/021 HTML Id/README.md new file mode 100644 index 00000000..2ae86062 --- /dev/null +++ b/HTML/021 HTML Id/README.md @@ -0,0 +1,72 @@ +# HTML ID + +ID adalah attribute pada HTML yang digunakan untuk memberikan tanda pada element HTML yang sifatnya unique. +Unique? Artinya kalian tidak boleh memiliki element dengan ID yang sama di dalam HTML. Cara mengakses +ID di dalam CSS adalah dengan tanda pagar (#), misalnya seperti di bawah ini: + +```html + + + + HTML ID + + + +

memberi style pada id

+ + +``` + +Hasilnya: +![Cara memberi style pada ID](img/cara-memberi-style-pada-id.png) + +## Perbedaan ID dengan class + +- Element HTML boleh memiliki class yang sama, sementara ID tidak. +- ID memiliki `specifity` yang lebih besar dibanding dengan class, apa maksudnya ini? Lihat contoh dibawah agar lebih jelas. + +```html + + + + Contoh Specifity Pada ID + + + +

ID Memiliki Specifity lebih besar dibandingkan class

+ + + + + +``` + +Hasilnya: +![Specificity Pada ID](img/specifity-pada-id.png) + +> Catatan: +> +> - Penulisan ID bersifat case sensitif, berarti `id="test-id"` dengan `id="TEST-ID"` itu berbeda. +> - Penulisan ID harus memiliki setidaknya 1 karakter. +> - Penulisan ID tidak boleh diawali dengan angka. +> - Penulisan ID tidak boleh mengandung spasi, tab, dan sejenisnya. + +Referensi: + +- [W3School](https://www.w3schools.com/html/html_id.asp) +- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) diff --git a/HTML/021 HTML Id/img/cara-memberi-style-pada-id.png b/HTML/021 HTML Id/img/cara-memberi-style-pada-id.png new file mode 100644 index 00000000..9f0ea68f Binary files /dev/null and b/HTML/021 HTML Id/img/cara-memberi-style-pada-id.png differ diff --git a/HTML/021 HTML Id/img/specifity-pada-id.png b/HTML/021 HTML Id/img/specifity-pada-id.png new file mode 100644 index 00000000..a4183db1 Binary files /dev/null and b/HTML/021 HTML Id/img/specifity-pada-id.png differ diff --git a/HTML/023 HTML Script/README.md b/HTML/023 HTML Script/README.md new file mode 100644 index 00000000..f5a90a70 --- /dev/null +++ b/HTML/023 HTML Script/README.md @@ -0,0 +1,51 @@ +# HTML Script + +Dalam HTML, tag ` + + +``` + +Hasilnya: + +- ![Contoh Script](img/contoh-script-1.png) +- ![Contoh Script](img/contoh-script-2.png) + +## Attribute yang ada pada ` + +