MATERI CSS DASAR

MATERI CSS 

Halo kawan-kawan ku semua, di sini saya akan membagikan beberapa materi CSS. Sebelum kita mengenal lebih dalam mengenai CSS diharapkan kita sudah paham betul materi HTML Dasar dan HTML Form. Untuk teman-teman yang masih sedikit belum paham, boleh tonton tutorial di link bawah ini:

1. Belajar HTML Part 1 

https://youtu.be/1gTzPwhq5HQ

2. Belajar HTML Part 2

https://youtu.be/W8Beqah-jGY

3. Belajar HTML Part 3

4. Belajar HTML Part 4

https://youtu.be/Dz1ZQwA_f1A

5. Belajar HTML Part 5

https://youtu.be/fIW9kQlfg2s

6. Belajar HTML Part 6

https://youtu.be/UpA3vUKJqqc

Selain dari video di atas, kalian juga dapat belajar dari file di bawah ini

https://drive.google.com/file/d/1lnwpdKKirBm1TTJDNaryQsM1TkrMJoXs/view

Dan pastinya bisa belajar langsung dengan membuka link website w3school dengan pencet link ini https://www.w3schools.com/html/

Pertama, aku mau ngenalin CSS dulu nih

Kepanjangan dari CSS adalah Cascading Style Sheet.  Lalu apa hubungan antara HTML dengan CSS? HTML digunakan untuk membuat struktur konten web secara semantic dan CSS digunakan untuk memberi gaya atau style dan layout (tata letak) pada konten HTML. Kita bisa mengubah font, color, size, pada konten di HTML.

Nah CSS sendiri adalah bahasa yang digunakan untuk  bmendeskripsikan 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.

Sama seperti HTML, CSS sendiri memiliki Syntax dasar, aturannya sebagai berikut:

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

h1{

    color: brown;

    font-size: 30px;

}

h2{

    color:aqua;

    font-size: 10px;

}

Keterangan:

h2 merupakan elemen, diikuti kurawal.

Lalu color ialah property

dan "30px" yaitu value atau isi.

Untuk menambah CSS ke HTML sendiri ada tiga cara di antaranya:

a. CSS Internal, CSS disimpan di file yang sama dengan HTML. Yaitu dengan menggunakan tag style

b. CSS Eksternal,  CSS disimpan di file yang berbeda dengan HTML. Yaitu menggunakan tag link

c. Inline, disimpan dalam atribut styles pada tag HTML.

CSS Internal

Code CSS diletakkan di file HTML, menggunakan tag style. Ditaruh sebelum bagian body HTML. Lebih jelasnya, perhatikan gambar di bawah ini.

CSS Eksternal

Kita harus membuat file CSS dengan ekstensi CSS untuk mendesain file HTML.

Siapkan file CSS lebih dulu,

File CSS

File HTML

Di file HTML ini kita memanggil file CSS yang telah kita buat

InLine CSS

Menyisipkan CSS di HTML

Menggunakan tag style, di antara elemen da value di HTML.

Komentar CSS

Komentar adalah kode yang tidak akan berdampak apapun. Untuk membuat komentar kita harus mengawali dengan /* dan diakhiri dengan */.

ID CSS

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

Di atas, saya memberi nama ID judul. Lalu ID tersebut saya panggil menggunakan elemen h1. Untuk hasilnya sebagai berikut:

Baris pertama ialah judul yang elah di style menggunakan ID CSS.

Baris kedua judul biasa tanpa style CSS.

Class CSS

Untuk membuat class di HTML kita harus membuat tag style CSS terlebih dulu di bagian setelah tag tittle. Untuk membuat class nya sendiri harus diawali dengan titik. Mari perhatikan gambar di bawah ini

Jika kita lihat hasilnya

Multiple Class HTML

Mirip dengan Class sebelumnya, hanya saja di multiple ini kita dapat menambahkan dua class ataupun lebih.

Kita bisa menggabungkan beberapa class menjadi satu. Mari kita lihat hasilnya:

Selector

Selector merupakan memilih elemen di CSS.

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.

Dikarenakan di style kita sudah selector h1, maka hasilnya seperti di bawah ini

Judul yang bawah tidak terkena selector dikarenakan menggunakan elemen h2.

ID Selector

Menggunakan ID untuk memanggil selector

Kita membuat ID h1 dan kita menggunakan selector di h1 baris pertama dan tidak menggunakan selector di baris kedua.

Baris pertama terkena selector karena id kita panggil.

 

Class Selector

Cara kerja nya sama seperti ID, tapi ini dengan class.

Saya membuat class dengan nama "contoh" lalu dipanggil di h1 baris pertama. Sedangkan baris kedua tidak terkena selector dikarenakan tidak dipanggil kelas tengah.

Selector List

Seleksi beberapa elemen sekaligus dan menggunakan "," (koma) sebagai pemisah.

Di gambar tersebut saya membuat selector list h1, p, id tittle, class contoh.

Untuk hasilnya seperti di bawah ini

Descendant Selector

Adalah Selector untuk memilih elemen anak dari yang dipilih.

Nah, dikarenakan div sudah diatur selector, hasilnya seperti ini. Namun karena yang dusetting hanya div p, maka untuk h1 yang di dalam div tidak terselector.

Child Selector

Hampir sama seperti Descendant Selector, perbedaannya apabila Descendant Selector akan menyeleksi seluruh yang ada di dalam div. Sedangkan Child Selector sendiri menyeleksi yang mana langsung berhubungan dengan div. Child Selector sendiri ditandai dengan tanda ">". Berikut contohnya

Tag p yang terdapat dalam tag article tidak ter-selector karena ia tidak berhubungan langsung dengan div.

Style selector ditandai dengan div > p{
Berikut hasil dari code Child Selector di atas

Adjacent Sibling Selector

Untuk Adjacent Selector ditandai dengan "+"

div + p{

Artinya setiap tag p yang di antara div dan p akan terena selector.

Untuk contohnya, simak gambar di bawah ini

Artinya, tag p yang tempatnya setelah tag div atau antara tag div dengan p maka akan terkena selector yaitu warna brown. Hasil dari code di atas sebagai berikut:

Untuk baris satu dan dua tidak terkena dikarenakan masih di dalam div.

Baris ketiga ter-selector karena ia bertempat setelah tag div dan sebelum tag p.

General Sibling Selector

Kali ini ditandai dengan "~". Yang artinya semua tag yang diselector ialah tag yang memiliki parent yang sama. Contohnya

Arti dari style yaitu jika tag p di luar tag div akan terselector warna cokelat. Jika dilihat maka hasilnya seperti di bawah ini