Cara Penulisan Dasar CSS

CSS ( Cascanding Style Sheet ) merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap komponen dari HTML seperti element dan tag, dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Menggunakan huruf, mengatur margin dan mengatur padding dan banyak lagi yang dapat kita lakukan dengan menggunakan CSS untuk meppercantik atau mendesign halaman website.

CSS menggunakan selector id dan class untuk menentukan element yang akan di modifikasi atau saya bilang akan di beri sentuhan CSS, jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah. 

Ada tiga teknik metode penulisan CSS yaitu :

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

Ketiga teknik metode yang saya jelaskan yaitu ( inline, internal, dan external ) tersebut kita akan bahas dan mempelajari pada tutorial ini

Teknik Penulisan CSS Inline Style

Teknik penulisan syntax CSS dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan sector id dan class, sehingga syntax CSS di letakkan langsung di pada element HTML. Syntax CSS di letakkan di dalam atribut style=””.

Contoh penulisan Inline style :

Contoh belajar css dasar cara penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya kita buat sebuah file HTML yang bernama latihan.html.

Coba kalian perhatikan pada contoh di atas, syntax css di letakkan dalam element h1 menggunakan attribut style=””.

Perintah color adalah printah css yang berfungsi untuk mengatur warna tulisan, jadi pada contoh inline css style ini kita membuat heading h1 dengan warna tulisan yang saya atur menjadi warna merah ( Red ).

Dan saat saya jalankan maka hasilnya sebagai berikut :

Teknik Penulisan CSS Internal Style

Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax CSS yang di letakkan satu file dengan file HTML. Syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>, biasanya tag <style> … </style> di letakkan pada bagian tag <head> pada HTML, berikut contoh saya buat penulisan internal CSS style :

Coba kalian perhatikan contoh penulisan internal css style di atas, syntax css di letakkan satu file dengan file html. Syntax css di letakkan di dalam tag <style>, syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. Pada contoh ini saya memberikan jarak sebesar 10px ( 10 pixel ). Dan CSS memanggil selector class dengan tanda titik ( . ) dan memanggil selector id dengan tanda pagar ( # ).

Hasilnya :

Teknik Penulisan CSS External Style

Teknik penulisan syntax CSS dengan external style adalah teknik penulisan yang memisahkan file css dan html, penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax CSS di simpan pada file CSS. File CSS dan HTML di hubungkan dengan menggunakan :

Contoh penulisan CSS menggunakan External Style : untuk membuat contoh penulisan CSS dengan External Style siapkan satu buat file HTML dan satu buah file CSS di sini saya membuat sebuah file dengan nama latihan.html dan latihan.css

latihan.html saya isi dengan berikut ini :

latihan.css saya isi dengan berikut ini :

Dan jika di jalankan Maka hasilnya :

Oke sedikit saya jelaskan untuk gambar 2 dan gambar 4 tidak ada bedanya, hanya saja kita menggunakan External Style pada bagian gambar 4, dan sedangkan gamar 2 kita menggunakan Internal Style, Oke mungkin sampai disini saja Tutorial CSS Dasar Part 2 nya sampai bertemu di part 3 ya.