Praktikum 9 : Menambahkan CSS

Assalamu'alaikum warrahmatullahi wabarakatuh

Kembali lagi bertemu dengan saya di postingan terbaru. Kali ini saya akan menjelaskan tentang CSS. Apa sih CSS itu?

CSS adalah singkatan dari Cascading Style Sheet. CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

Sebetulnya pada praktikum sebelumnya, kita sudah menggunakan CSS, yaitu pengkodean secara inline. Yaitu CSS dalam file html yang sama dan dalam tag masing-masing.

Ada 3 cara pengkodean pada CSS yakni inline, embedded dan external. Embedded berada dalam satu file html yang sama. Dan external berada di file lain dengan format ".css"

Anatomi dari CSS sendiri ada 3, yaitu Selctor, Property dan Value.

Misal,

h2 {

         color: #333;
      }

h2 adalah Selector. color adalah Property dan #333 adalah value.

Berikut contoh dari pengkodean CSS secara inline.

See the Pen MWgjrrw by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh dari pengkodean CSS secara embedded yang kesatu:

See the Pen YzKGOmO by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh kedua dari pengkodean CSS secara embedded:

See the Pen JjPRmPM by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Ini adalah contoh dari pengkodean CSS secara external, yaitu file CSS terpisah dengan HTML nya.

See the Pen NWKROPW by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS embedded untuk heading.

See the Pen pozExJb by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS external untuk format spasi pada huruf.

See the Pen qBWaJbY by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS external untuk dekorasi teks dan spasi.

See the Pen KKPgGMM by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Contoh dari CSS embedded indent align upper.

See the Pen xxKEyEW by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Selanjutnya ada tugas untuk membuat auto biografi / cerpen atau apapun itu menggunakan CSS sendiri, ini yang saya buat.

See the Pen QWLKZdN by nis | pdx au📌 (@hamsterrrwonjin) on CodePen.

Sekian postingan dari saya kali ini, sampai bertemu di postingan berikutnya. Terimakasih sudah berkunjung.

Wassalamu'alaikum warrahmatullahi wabarakatuh.