Materi Pembelajaran CSS 

Pada episode pembuatan website ini, kita akan belajar tentang Syle halaman website menggunakan CSS. pada blog ini kita akan mempelajari tentang

• Penjelasan CSS
• Konsep Lay Out halaman web
• Jenis-jenis layout halaman web
• Contoh penulisan script code CSS
• Metode StylesSheet
• Contoh-contoh property pada CSS

💎Penjelasan CSS

🎓pengertian CSS

    CSS atau Cascading Style Sheet adalah bahasa pemrograman yang biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML yang berfungsi memisahkan konten dari tampilan visualnya. CSS berfungsi untuk mengatasi keterbatasan HTML dalam mengatur halaman web. karena Apabila hanya menggunakan HTML ketika membangun website dengan beberapa halaman,kita harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut. 

🎓Fungsi CSS

    Setelah kalian mengetahui pengertian CSS. kita akan membahas beberapa fungsi CSS. Selain sebagai penghias halaman web CSS juga memiliki beberapa fungsi lain yaitu

✓ Mempercepat Loading Halaman web

✓ memudahkan pengolaan kode

✓ menawarkan lebih banyak variasi tampilan

✓ membuat website tampil rapi di semua tampilan

🎓Cara Kerja CSS

        CSS bekerja ketika browser memuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah. 
        Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Kemudian, browser mengubah keduanya menjadi document object model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.
        Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses di mana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Anda.

Sumber: MDN Web Docs

kunjungi juga

- Turorial colspan dan rowspan dalam tabel
-5 jenia contoh kodingan HTML

💎Konsep Lay Out Halaman Web

🎓Pengertian Layout

        LayOut halaman web merupakan tata letak elemen halaman situs web. Layout web yang baik akan menjadikan halaman web baik juga. Dengan desain halaman web yang baik dan tepat akan membuat pemgunjung merasa nyaman dengan tampilan(layout) halaman web tersebut dan tetap fokus pada isi(content). 

        Setiap halaman  memiliki posisi dan kesamaan tampilan, yang berbeda hanya isi. Adanya layout yang baik membuat halaman web lebih cantik dan seimbang. Desain Layout suatu halaman web meliputi penyusunan

1. pembagian tempat pada halaman
2. pengaturan jarak spasi
3. pengelompokan teks dan grafik
4. penekanan pada suatu bagian tertentu

💎 Jenis-Jenis Layout

berikut adalah macam-macam jenis layout

▶Static

Layout static pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang statis.
Contoh layout static: Facebook, Twitter.

▶fluid

Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize).
Contoh layout fluid: gmail, yahoo mail.

▶Responsive

Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip ‘if‘, tapi ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau smartphone.

▶Responsive-fluid

Layout responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk ukuran.

▶Horizontal Scrolling

Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk melihat content web tersebut menggunakan scroll horizontal.

▶Parallax Scrolling

Layout parallax scrolling menggunakan beberapa layer dan setiap layer memiliki kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek yang menarik.

💎Contoh penulisan script code CSS

Aturan CSS terdiri dari pemilih dan blok

Selector adalah nama tag html yang kalian pilih, bisa juga diganti dengan mengguanakan id atau class

Blok Declaration berisi satu atau lebih deklarasi yan dipisahkan (;) 

setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.

Beberapa deklarasi CSS dipisahkan dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Contoh

See the Pen Untitled by Andhika Ramaditya (@andika456) on CodePen.

💎Cara-Cara penulisan CSS

🎓Inline

Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.
contoh:        <h1 style="color:blue;text-align:center;">This is a heading</h1>

          <p style="color:red;">This is a paragraph.</p>

🎓Internal

Lembar gaya internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.
Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian kepala.

contoh