diff --git a/CSS/030 CSS Pseudo Elements/README.md b/CSS/030 CSS Pseudo Elements/README.md index 8e1f19e8..6c866b1f 100644 --- a/CSS/030 CSS Pseudo Elements/README.md +++ b/CSS/030 CSS Pseudo Elements/README.md @@ -1,12 +1,12 @@ -## 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 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; } @@ -16,108 +16,110 @@ selector::pseudo-element { > 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..3f8f0f96 --- /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 + + + +

Cara 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..8bc57490 --- /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 ` + +