Pemrograman Web Dasar ~ CSS

Assalamalaikum warohmatullahi wabarokatu

Kembali lagi dengan sayaa. kali ini saya akan membawakan materi yang sangat berbeda dengan sebelum - sebelumnya . Pada artikel ini saya akan membawakan materi tentang CSS.

Apa itu CSS ?

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

Code CSS ini bermanfaat dalam:

1. Membuat Code HTML menjadi lebih sederhana dan lebih mudah diatur
2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat
3. Mudah untuk mengubah tampilan hanya dengan membuat file CSS saja.
4. Dapat bekolaborasi dengan javaScript
5. Dapat digunakan dalam hampir semua jenis web browser.

Dalam Pengcodingan CSS dapat dilakukan dengan 3 Cara yaitu :

• Inline = Didalam file html yang sama , dalam masing-masing tag

• Embedded = Di dalam file HTML yang sama , hanya dalam satu file html saja
• External = Diluar file html, bisa digunakan dalam berbagai file html dengan dormat file.css

Properti yang digunakan pada CSS yaitu :

CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut:

1. nilai HEX --> misalnya "#ff0000"
2. nlai RGB --> misalnya "rgb(255,0,0)"
3. nama dari warna tersebut --> misalnya "red"
4. Menggunakan Colorin CSS --> misalnya " Thistle,GoldenRod,Salmon"

Format penulisan untuk pemberian warna pad atext menggunkan CSS adalah sebagai berkut :

selector {color : nilai wana;}

Inline CSS

Dalam  pengcodingan CSS terdapat cara yang menggunakan inline CSS pada tag html . Atribut yang digunakan yaitu style. Contohnya :

See the Pen Inlinecss by taufik (@fikmr) on CodePen.

Embedded CSS

Dalam Embedded CSS Atribut yang dipakai sama dengan cara Inline yaitu menggunakan Atribut style. Tetapi penulisannya didalam head  biasanya dibawa tag tittle. Contohnya :

See the Pen EmbeddedClassId1 by taufik (@fikmr) on CodePen.

Contoh kedua :

See the Pen EmbeddedClassId2 by taufik (@fikmr) on CodePen.

Kita juga dapat mengatur warna dengan cara Embedded, Kita bisa mengatur warna dengan HEX , RGB atau nama warna. Contohnya :

See the Pen EmbHeadingcolor by taufik (@fikmr) on CodePen.

External CSS

Cara ini merupakan CSS style yang paling mudah dan tidak meyulitkan . Semua dilakukan secara external pada file.css. Styling dilakukan di file terpisah ,lalu diterapkan CSS ke halaman manapun yang diinginkan dengan menggunakan Atribut link. Contohnya :

See the Pen ExtClassId by taufik (@fikmr) on CodePen.

Pada CSS kita juga dapat mengatur Spasi pada hurufnya. Dengan menggunakan Atribut letter-spacing . Contohnya :

See the Pen CharSpacing by taufik (@fikmr) on CodePen.

Selain mengatur Spasi CSS juga dapat mengatur decoration text. Kita dapat membuat link yang berwarna biru dengan underline menjadi seperti text biasa dan juga dapat membuat pemformatan text lainnya . Contohnya:

See the Pen textdeco by taufik (@fikmr) on CodePen.

Selain text decoration kita juga dapat mengatur Indent & Align dan juga membuat text berubah menjadi huruf besar semua menggunakan uppercase  , membuat text menjadi huruf kecil semua menggunakan lowercase  dan menjadi huruf kapital pada setiap awal kata dengan capitalize. Contohnya :

See the Pen IndentAlign by taufik (@fikmr) on CodePen.

Dari Attribut dan Tag diatas kita dapat membuat halaman web seperti Buku Harian/Cerpen/Auto Biografi menggunakan CSS sebagai styling utama. Contohnya saya membuat Auto Biografi dengan CSS sebagai styling utamanya :

See the Pen Mystyling by taufik (@fikmr) on CodePen.

Image CSS

CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag baik itu tulisan , tabel dan gambar maupun objek lainnya. Kita dapat mengatur mulai dari posisi gambarnya sampai mangatur ukuran gambar. Contohnya Menggunakan Embedded:

See the Pen Embimgcss by taufik (@fikmr) on CodePen.

Contoh menggunakan External:

See the Pen Extimgcss by taufik (@fikmr) on CodePen.

Background CSS

Seperti penambahan warna latar, penambahan gambar backgroundjuga dilakukan dengan menggunakan 2 atribut, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dan alt, relatif terhadap file css. Contohnya :

See the Pen Inlinebgimg by taufik (@fikmr) on CodePen.

Namun, penambahan background dengan cara diatas akan memberikan masalah ketika ukuran gambar tidak sesuai dengan ukuran elemen. Tetapi kita dapat membuat lebih baik dengan cara berikut .
Contoh pertama :

See the Pen Embbgimg by taufik (@fikmr) on CodePen.

Contoh kedua:

See the Pen Embbgimgasimg by taufik (@fikmr) on CodePen.

Video CSS 

Dalam CSS juga pastinya kita dapat menerapkannya pada elemen  video yang dapat ditulis secara inlin,embedded ataupun external. Kita dapat mengatur posisi penempatan videonya . Contohnya :

See the Pen videocss by taufik (@fikmr) on CodePen.

Selain itu kita juga dapat menyajikan video dengan memanfaatkan elemen  iframe/embed  yang dilink an ke alamat video tertentu misalnya video dari youtube. Contohnya :

See the Pen VideoytCss by taufik (@fikmr) on CodePen.

Table CSS

Setelah kita mempelajari bagaimana membuat tabel dengan HTML, selanjutnya kita akan mempelajai bagaimana mendesain tabel tersebut sehingga nyaman untuk dilihat.

Mendesain tabel dengan CSS dapat dilakukan dengan mudah, namun demikian, terdapat hal-hal yang penting untuk diperhatikan , salah satunya dengan penerapan default style yang dilakukan oleh browser.

Atau kita dapat  mengethaui Konsep dasar model box nya :

Contohnya  :

See the Pen Embtablebordercols by taufik (@fikmr) on CodePen.

Kita juga dapat mengubah border tabelnya menjadi titik-titik atau dotted , bergaris-garis atau dashed ,  dan masih banyak lainnya seperti :

Contoh Pengcodingannya :

See the Pen Exttable1 by taufik (@fikmr) on CodePen.

Contoh kedua :

See the Pen Exttable2 by taufik (@fikmr) on CodePen.

Contoh ketiga :

See the Pen dybpLrm by taufik (@fikmr) on CodePen.

Kita juga dapat menggambungkannya dengan elemen image seperti berikut :

See the Pen Lattablecss by taufik (@fikmr) on CodePen.

Sekian dulu untuk materi CSS nya , tunggu Artikel-artikel selanjutnya . Termikasih dan sampai jumpaa...

Wasslamualaikum warohmatullahi wabarokatu