Belajar CSS Part 1 - Universitas Safin Pati

Hola Amigos!

Kembali lagi bersama saya Gina Ferlindawati di blog belajar css untuk mata kuliah pemrograman web 1. Disini kita akan belajar tentang CSS dan bagaimana sih menggabungkan HTML dengan CSS?

Mari kita kulik lebih dalam mengenai CSS ini. Akan tetapi, sebelum kalian belajar tentang CSS sebaiknya kalian harus mengetahui tentang HTML beserta per-syntax-kannya. Berikut ini link video tutorial Belajar HTML yang telah saya buat:

1. Belajar HTML Part 1: https://youtu.be/JD6vZa7qF8w
2. Belajar HTML Part 2: https://youtu.be/ypFN0oo1VaE
3. Belajar HTML Part 4: https://youtu.be/ybsysIV5dbQ
4. Belajar HTML Part 5: https://youtu.be/Afu5_OZB-5Q
5. Belajar HTML Part 6: https://youtu.be/2JxN9ASRwBw

Setelah kalian menguasahi HTML. Yuk kita langsung belajar CSS!

Pengenalan CSS

• CSS singkatan dari Cascading Style Sheets
• HTML digunakan untuk membuat struktur konten web secara semantic, dan CSS digunakan untuk memberi style (gaya) dan layout (tata letak) pada konten HTML
• Contohnya, kita bisa menggunakan CSS untuk mengubah font, color, size, dan lain-lain pada konten yang sudah kita buat menggunakan HTML

Apa itu CSS?

• CSS adalah bahasa yang digunakan untuk mendeskripsikan bagaimana sebuah dokumen yang sudah dibuat menggunakan HTML, ditampilkan ke pengguna
• Setiap browser biasanya punya standar masing-masing ketika menampilkan dokumen HTML
• Dengan menggunakan CSS, kita bisa membuat semua browser menampilkan dokumen HTML dengan cara yang sama

CSS Syntax

• CSS adalah bahasa yang berbasis rule/aturan
• Kita akan mendefinisikan rule/aturan aturan untuk element yang terdapat di dokumen HTML yang kita buat
• Membuat rule di CSS biasanya dimulai dengan menyebutkan element yang akan dipilih, lalu diikuti dengan kurung kurawal buka, dilanjutkan dengan aturan-aturan yang akan kita gunakan, dan diakhiri dengan kurung kurawal tutup
• Aturan dalam CSS disebutkan dengan property: value ;

Okay, setelah kita kenalan dan tahu apa itu CSS, selanjutnya kita akan langsung belajar tentang syntax CSS. Tetapi, sebelumnya kita harus membuat folder belajar CSS, lalu kita buka di VSCode.

Kode : Contoh Syntax

Menambah CSS ke HTML

• Terdapat tiga cara untuk menambah CSS ke HTML
• Cara internal, dimana CSS disimpan di file yang sama dengan HTML. Yaitu dengan menggunakan tag style
• Cara external, dimana CSS disimpan di file yang berbeda dengan HTML. Yaitu menggunakan tag link,
• Cara inline, dimana CSS disimpan dalam atribut styles pada tag html, ini pernah kita lakukan di kelas HTML, dan cara ini tidak direkomendasikan

CSS Internal

CSS Eksternal

    CSS Eksternal membutuhkan tautan link untuk memanggil file style css

    File CSS eksternal

 


CSS Inline

Comment

• Saat membuat kode CSS, kadang kita ingin menyisipkan komentar
• Komentar adalah kode yang tidak akan berdampak apapun
• Untuk membuat komentar kita harus mengawali dengan /* dan diakhiri dengan */
• Komentar bisa multi baris

Kode : Comment

ID

• Selain menggunakan memilih element menggunakan HTML Tag, kita juga bisa memilih element menggunakan ID di CSS
• Untuk menggunakan ID, kita perlu menggunakan # diawal nama ID nya

Kode: ID

Class

• Kadang ada kasus kita ingin menambahkan style CSS ke beberapa element tag yang jenisnya berbeda
• Jika kita harus buat aturan nya per tag, maka akan menyulitkan ketika banyak sekali
• Di HTML, semua tag bisa memiliki atribut class, dan di CSS, kita bisa menambahkan aturan ke class dengan menggunakan awalan . (titik)

Kode: Class

Multiple Class

• Nilai dari atribut class bisa menggunakan beberapa nilai, caranya kita bisa tambahkan pemisah menggunakan spasi

Kode: Multiple Class

Selector

• Sebelumnya kita sudah tahu cara memilih elemen yang akan ditambahkan aturan di CSS, yaitu menggunakan tag, #id atau .class
• Memilih elemen di CSS dinamakan Selector
• Ada banyak jenis Selector, dan kita akan bahas tiap selector di materi masing-masing
• Di materi ini kita akan bahas tentang simple selector

Simple Selector

• Simple selector adalah selector untuk memilih elemen berdasarkan nama (tag), #id atau .class
• Jika kita ingin membuat selector untuk beberapa element, kita bisa gunakan , (koma) sebagai pemisah

Type Selector

• Type Selector melakukan seleksi element berdasarkan tag html
• https://css-tricks.com/almanac/selectors/t/type/

ID Selector

• ID Selector melakukan seleksi element berdasarkan ID
• https://css-tricks.com/almanac/selectors/i/id/

Class Selector

• Class Selector melakukan seleksi element berdasarkan nama class
• https://css-tricks.com/almanac/selectors/c/class/

List Selector

• Selector list melakukan seleksi beberapa element sekaligus, menggunakan pemisah , (koma)
• Gambar dibawahartinya kita melakukan seleksi element untuk tag h1, h2, dan ID title\

Combinator Selector

1. Combinator adalah sesuatu yang menjelaskan relasi antar selector
2. Terdapat 4 selector untuk combinator

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

1. Descendant Selector

• Descendant Selector adalah selector untuk memilih element anak dari element yang dipilih
• Gambar sebelah artinya kita memilih semua tag p yang terdapat di dalam elemen div
• https://css-tricks.com/almanac/selectors/d/descendant/

          

    2. Child Selector

• Child Selector adalah selector untuk memilih child / anak dari element yang dipilih
• Gambar disamping artinya kita memilih semua elemen p yang anak dari div (div adalah parent    element untuk p)
• https://css-tricks.com/almanac/selectors/c/child/