DomaiNesia
Cara Mudah Penulisan Kode CSS

2 Bagian Dasar Cara Mudah Penulisan Kode CSS

2 Bagian Dasar Cara Mudah Penulisan Kode CSS. Selamat siang teman dan para pengunjung setia gurudaridesa.com. Kembali lagi bersama saya kak ahan selaku admin dari gurudaridesa.com. Semoga kita semua dalam keadaan sehat dan baik adanya amin.

Pada kesempatan kali ini gurudaridesa.com akan melanjutkan materi tentang CSS, yang sebelumnya sudah pernah dibahas di Tulisan Sebelumnya ini. Pada tulisan sebelumnya gurudaridesa.com sudah membahas CSS mulai dari pengertian, sejarah, dan detail lainnya seperti fungsi dan perbedaannya denga HTML walaupun hanya kulitnya saja tapi saya rasa sudah cukup memberikan gambaran jelas mengenai apa itu CSS kepada teman teman semua.

Pada tulisan kali ini gurudaridesa.com akan membahas CSS secara mendalam mengenai Dasar Cara Mudah Penulisan Kode CSS yang mana sudah sedikit saya jelaskan juga di dalam tulisan saya sebelumya. Jadi buat teman teman semua diharapkan untuk berkenan juga membaca tulisan saya sebelumnya, agar lebih memahami tulisan saya yang akan membahas 2 Bagian Dasar Cara Mudah Penulisan Kode CSS ini. Selain karena untuk memudahkan teman teman dalam memahami CSS juga akan menuntun teman teman dalam memahaminya karena tulisan ataupun pembahasan mengenai CSS ini akan saya kupas secara bertahap yang artinya tulisan saya mengenai CSS akan berkelanjutan dari tulisan saya sebelumnya yang membahas CSS

Baca Juga : Download Modul MySql Lengkap

Pada tulisan saya sebelumnya yang berjudul 3 Langkah Mudah Menguasai dan Belajar CSS, saya sudah membahas sedikit mengenai topik kita kali ini, dan hari ini saya akan membahasnya secara lengkap, jadi buat teman teman sediakan kopi da cemilan ya:D

2 Bagian Dasar Cara Mudah Penulisan Kode CSS. Sebelum kita masuk ke topik pembahasan lebih dalam, saya ingin mengajak teman teman terlebih dahulu memahami bahwa CSS bukanlah sebuah bahasa pemrograman, kenapa? Kok bukan bahasa pemrograman? Mungkin teman teman bertanya seperti itu. Tenang dulu teman teman, saya akan menjelaskan kepada teman teman kenapa saya mengatakan CSS bukanlah sebuah bahasa pemrograman.

CSS bukan bahasa pemrograman karena di dalamnya tidak terdapat syntax logika, tidak ada proses iterasi, dan tidak dapat membuat sebuah variabel layaknya seperti bahasa pemrograman pada umumnya. Umumnya kebanyakan dari kita masih menganggap CSS merupakan bahasa pemrograman (tidak salah juga sih mengingat berkas CSS juga berupa kumpulan syntax), walau kenyataannya CSS hanya merupakan sebuah declarative language yang hanya digunakan untuk mendeklarasikan suatu nilai yang terdapat pada berkas HTML yang nantinya digunakan untuk mengatur seperti apa sebuah elemen HTML ditampilkan pada halaman browser.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS

Dalam penulisan berkas CSS ada 2 Bagian Dasar Cara Mudah Penulisan Kode CSS yang digunakan. 2 Bagian Dasar pada CSS tersebut adalah komponen utama dalam penulisan CSS yaitu Selektor dan Deklarator. Dan berikut adalah adalah format penulisannya.

1. Selector.

Dalam tulisan saya 3 Langkah Mudah Menguasai dan Belajar CSS, saya menjelaskan bahwa Selector adalah Identitas elemen (Ini merupakan elemen dasar yang akan menerapkan rule). Berikut saya berikan contoh pada sebuah berkas HTML biasa terdapat syntax berikut.

Dari kumpulan syntax pada berkas HTML diatas, maka akan tampak seperti gambar dibawah pada halaman web browser.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS
Tampilan Halaman Web Berkas HTML di atas

Pada gambar diatas merupakan halaman web browser dari berkas HTML di atas yang belum di CSS. Terlihat halaman web tersebut sangat polos dan membosankan bila tidak bisa di katakan mengerikan.

Baca Juga : Download Modul Lengkap PHP

Pada syntax berkas HTML diatas terdapat tag tag yang akan di jadikan Selector pada berkas CSS. Adapun tag tag pada syntax berkas HTML di atas seperti body, h1, p.

Pada case kali ini, kita akan membuatkan berkas CSS untuk berkas HTML diatas dengan tag tag pada syntax berkas HTML di atas seperti body, h1, dan p sebagai Selector pada penulisan berkas CSS.

Selector sendiri pada dasarnya terdiri dari beberapa macam seperti berikut:

  • Type Selector
    Type Selector merupakan Selector yang penulisan syntaxnya menggunakan nama elemen pada berkas HTML sebagai target untuk diterapkannya sebuah rule yang diinginkan. Dengan kata lain, ketika teman teman menggunakan Type Selector ini tentu rule akan diterapkan pada seluruh elemen target yang ada pada berkas HTML. Contohnya syntax berkas HTML kita di atas terdiri dari elemen head, body, h1, dan p. Contoh penulisan seperti berikut:

    Maka penulisan Type Selector pada berkas CSS adalah sebagai berikut:
  • Class Selector
    Class Selector merupakan Selector yang dalam penulisan syntaxnya adalah dengan menetapkan target elemen berdasarkan nilai dari atribut class yang diterapkan pada elemennya. Untuk penulisan Class Selector, maka di awali dengan tanda titik (.) kemudian lanjutkan dengan nama class-nya.
    Class Selector ini bersifat shareable, yang artinya Class Selector dapat diterapkan pada banyak elemen dengan tipe elemen yang berbeda-beda. Misalkan sebuah Class Selector StabiloBiru dapat diterapkan pada elemen paragraf dan juga heading untuk menampilkan background teks berwarna Biru. Berikut contoh:

    Maka penulisan Class Selector pada berkas CSS adalah sebagai berikut:
  • ID Selector
    ID selector merupakan Selector yang dalam penulisan syntaxnya menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Sebenarnya ID Selector hampir sama seperti Class Selector, selain itu atribut ID Selector ini dapat diterapkan pada seluruh elemen pada berkas HTML.
    Yang membedakannya dengan Class Selector adalah kebanyakan ID Selector ini digunakan untuk memberikan sebuah arti pada generic element seperti <div> dan <span>. Selain itu ID Selector ini tidak bersifat shareable, yang artinya nilai dari ID Selector ini harus unik dan digunakan pada satu elemen saja.
    Untuk menuliskan syntax ID Selector, maka teman teman harus menggunakan tanda Octothorpe (#) atau lebih familiar disebut dengan Hash. Berikut contohnya:

    Maka penulisan ID Selector pada berkas CSS adalah sebagai berikut:

2. Declaration

Dalam tulisan saya 3 Langkah Mudah Menguasai dan Belajar CSS, saya juga sudah menjelaskan bahwa Declaration adalah Deklarasi atau dalam bahasa pemrogramannya biasa di sebut Declaration (Ini merupakan  elemen dasar yang akan memberikan instruksi yang akan diterapkan pada sebuah selector)

Pada dasarnya Declaration pada berkas CSS juga terdapat 2 bagian dasar dalam penulisannya, yang pertama di sebut Property dan Value.

  • Property
    Property pada Declaration CSS artinya bila disederhanakan ibarat sarana prasarana pada kehidupan nyata. Contoh Property Declaration pada CSS adalah background-color pada Selector Body, color pada Selector h1, dan text-align pada Selector p dan masih banyak lagi.
  • Value
    Sedangkan Value pada Declaration CSS artinya bila disederhanakan ibarat bentuk ataupun corak pada kehidupan nyata. Contoh Value Declaration pada CSS adalah warna merah untuk background-color pada Selector Body, warna biru untuk color pada Selector h1, dan justify untuk text-align pada Selector p dan masih banyak lagi.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS. Setelah memahami penjelasan di atas mengenai Seletor dan Declaration (juga memahami 2 komponen dasar dalam Declaration yaitu Property dan Value), maka untuk memberikan penjelasan yang lebih optimal seperti apa bentuknya Seletor dan Declaration (juga memahami 2 komponen dasar dalam Declaration yaitu Property dan Value) dalam penulisannya ke dalam berkas CSS maka perhatikan gambar berikut.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS
Penjelasan Struktur Penulisan CSS

Dengan memperhatikan gambar di atas, semoga teman teman sudah lebih mengenal ciri ciri CSS dan juga lebih paham dalam penulisan syntax berkas CSS.

Baiklah kita sudah belajar 2 Bagian Dasar Cara Mudah Penulisan Kode CSS, sekarang mari coba kita tuliskan berkas CSS untuk berkas HTML diatas. Berikut syntax berkas CSS yang akan kita buatkan.

Setelah kita mengetikkan syntax berkas CSS diatas (tentunya menggunakan editor seperti sublime, notepad atau editor lainnya dan saya tidak akan membahas hal tersebut lagi) sekarang kita simpan berkas tersebut dengan nama style dan di akhiri .css untuk menyatakan esktensi sebagai CSS. Simpan berkas tersebut ke dalam folder style. Untuk root drive pada komputer, terserah teman teman contoh kalau saya menyimpan di drive c dalam folder belajar, folder assets, kemudian folder style lagi lalu Save. Lebih detailnya silahkan lihat gambar berikut.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS
Contoh Root Penyimpanan Berkas CSS

2 Bagian Dasar Cara Mudah Penulisan Kode CSS. Setelah berkas CSS kita buat dan simpan, langkah selanjutnya adalah menggabungkan berkas CSS kita yang sudah kita buat tadi dengan berkas HTML kita agar berkas CSS kita dapat di terapkan ke dalam berkas HTML sehingga dapat di tampilkan ke halaman web browser.

Untuk penggabungan berkas CSS dengan berkas HTML sendiri ada beberapa cara, sehingga saya tidak akan membahasnya dalam tulisan ini melainkan akan saya bahas dalam tulisan selanjutnya. Jadi anggap saja untuk penggabungannya saat ini sudah kita lakukan, sehingga ketika buka berkas HTML tersebut menggunakan web browser akan menampilkan halaman web seperti gambar berikut.

2 Bagian Dasar Cara Mudah Penulisan Kode CSS
Halaman Web setelah Berkas HTML diberi CSS

2 Bagian Dasar Cara Mudah Penulisan Kode CSS. Seperti yang teman teman lihat, setelah kita berikan CSS maka tampilan halaman web tersebut sudah lebih enak untuk di lihat mata di bandingkan dengan tampilan halaman web yang sebelumnya belum di berikan CSS. Tampilan halaman web di atas tentunya masih terlalu sederhana artinya masih bisa kita berikan Properti dan Value pada Declaration untuk setiap Selector, namun untuk hal itu teman teman bisa bereksplorasi sendiri.

Jadi itulah dia 2 Bagian Dasar Cara Mudah Penulisan Kode CSS teman teman, semoga dapat membantu teman teman dalam belajar CSS. Sebagai tambahan, bagi teman teman yang ingin memvalidasi berkas CSS, teman teman dapat mengunjungi Website W3C. W3C Markup Validation Service adalah alat yang digunakan untuk memeriksa validitas suatu dokumen web. Baiklah sekianlah pembahasan kita mengenai 2 Bagian Dasar Cara Mudah Penulisan Kode CSS, kurang lebihnya penjelasan saya mohon di maklumi, sekian dan terimakasih, see you and keep exploring 😀

Bagikan ini :

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *