in ,

Belajar CSS Part 1: Macam – Macam CSS dan Cara Penulisan CSS

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-2 dalam sesi belajar CSS. Sebelumnya kita pernah membahas Pengenalan dan Pengertian CSS. Pada pertemuan yang ke-2 saya akan mengulas tentang Cara Penulisan CSS.

CSS singkatan dari Cascading Style Sheet merupakan bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mendesain pada bagian komponen dari HTML seperti tag dan element.

Dengan menggunakan CSS kita dapat mengatur warna, bentuk dan ukuran dari element HTML.

Bukan hanya itu, CSS juga dapat mengganti font, mengatur padding dan margin, tentunya masih banyak lagi yang dilakukan CSS untuk mempercantik halaman website.

Untuk menentukan element yang akan dimodifikasi, CSS menggunakan selector (id dan class). Jika diibaratkan HTML adalah sebuah rumah, maka CSS disini sebagai cat dan dekorasi untuk mempercantik rumah tersebut.

3 Teknik Metode Penulisan CSS

  • Inline CSS Style
  • Internal CSS Style
  • External CSS Style

Teknik Penulisan Inline Style CSS

Teknik penulisan syntax dengan inline style merupakan cara penulisan syntax CSS yang tidak menggunkan selector (id dan class).

Sehingga syntax CSS langsung disisipkan pada element pada element HTML.

Syntax CSS disimpan didalam attribut style=””

Contoh Penulisan Inline Style

Untuk contoh dalam penulisan CSS dengan Inline Style, caranya sediakan file HTML atau PHP. Dalam contoh ini saya menggunakan HTML.

Saya sudah menulis contoh kode program HTML dan diberi nama index.html

index.html

Contoh diatas menunjukkan bahwa syntax css di letakkan pada element h1 menggunakan attribut style=””

color = adalah perintah css yang berfungsi untuk mengatur warna font.

Jadi pada contoh Inline Style kita membuat h1 dengan warna font yang sudah kita atur, menjadi warna orange (oren).

Sehingga saat dijalankan hasilnya akan seperti gambar dibawah ini.

Contoh Inline Style CSS - #IRVANGEN
Contoh Inline Style CSS – #IRVANGEN

Teknik Penulisan CSS Internal Style

Internal Style merupakan css yang diletakkan pada satu file php atau html. Syntax CSS diletakkan didalam tag <style> dan diakhiri dengan tag penutup </style>

Biasanya tag tersebut diletakkan pada bagian tag <head> atau sebelum </head> di HTML.

Contoh CSS Internal Style

Seperti biasa kita buat file baru html atau php, bebas terserah kamu. Untuk contoh ini saya membuat file HTML yang kemudian akan di sisipkan CSS Internal Style.

index.html

Perhatikan kembali contoh diatas, syntax css diletakkan dalam satu file dengan file HTML. Nah css nya diletakkan dalam tag <style>.

syntax css padding berfungsi untuk pengatur jarak pada sisi element. Kita telah mengatur untuk memberi jarak sebesar 10px.

Kemudian css memanggil selector class dengan tanda titik (.) dan memanggil selector id dengan tagar (#)

Pada bagian id kalimat kita memberi warna font dengan warna kuning.

Untuk bagian class box kita memberi warna background hitam.

Contoh CSS Internal Style - #IRVANGEN
Contoh CSS Internal Style – #IRVANGEN

Teknik Penulisan CSS External Style

Terakhir, teknik penulisan css external style.

Teknik external style merupakan teknik penulisan yang memisahkan file css dengan file html. Penggunaan CSS yang baik yaitu, menggunakan teknik ini. Karena dengan external style kode program kita tidak akan berantakan, karena syntax css disimpan pada file terpisah.

Untuk menghubungkan dengan html menggunakan aturan seperti dibawah ini.

Contoh Penggunaan CSS External Style

Untuk membuat contoh penulisan css external style yang pertama siapkan masing – masing file, buat file html dan css.

Disini saya membuat file index.html dan style.css kemudian disatukan dalam satu folder.

index.html

style.css

Untuk file css external style kita buang tag pembuka <style> dan tag penutup </style>

Jika dijalankan hasilnya akan seperti gambar dibawah ini.

Contoh CSS External Style - #IRVANGEN
Contoh CSS External Style – #IRVANGEN

Bagaimana sangat berbeda bukan dari masing – masing teknik CSS diatas.

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Cara Penulisan CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search

  • format perintah css yang benar
  • format penulisan css
  • penulisan css
  • cara penulisan css
  • format penulisan style css
  • tuliskan format penulisan css untuk video menggunakan tag
  • contoh penulisan css
  • Penulisan syntax CSS
  • penulisan syntax css yang benar
Legend

Ditulis oleh Irvan Nurfazri

Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya. Meskipun upaya tak berbuah sempurna.

Menulis apa yang saya suka, berbagi apa yang saya ketahui.

Comments

Tinggalkan Balasan

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

Loading…

0

Comments

comments