Cara Penulisan CSS pada HTML

Pada tutorial ini kita akan membahas tentang Cara Penulisan CSS pada HTML dan juga aturan penulisan CSS itu sendiri. Namun pertama – tama kita akan mempelajari cara memasukan kode CSS ke HTML terlebih dahulu. Jadi ada 3 cara untuk memasukan sintaks CSS ke dalam file HTML yakni dengan cara Internal, Eksternal, dan Inline. Mari kupas dengan tuntas satu per satu….

Memasukan skrip CSS secara Eksternal

Dalam memasukan file namaFile.css secara Eksternal, file tersebut dimasukan di dalam tag <link> dengan atribut href untuk menentukan lokasi file disimpan. Letakan tag <link> ini berada di dalam tag <head>.

Standard penulisannya adalah seperti contoh di bawah ini, dan standar penulisan di bawah ini apabila file *.html, berada dalam satu folder dengan file *.CSS.…

Apabila file *.css berada di dalam folder…

Apabila file *.css berada di luar folder…

Memasukan skrip CSS secara Inline

Skrip CSS ini diletakan di dalam elemen yakni pada saat pendeklarasian tag HTML. Misal ingin merubah elemen tag <p>, menjadi justify…

Namun jika ingin memasukan lebih dari 1 property, pisahkan dengan tanda titik – koma….

Memasukan skrip CSS secara Internal

Skrip CSS diletakan di dalam tag head, dengan menggunakan tag style.

Contoh :

Sekarang coba buat file CSS eksternal lebih dulu, di bawah ini adalah kode sumbernya dan berada 1 folder dengan file html, simpan file CSS tersebut dengan nama fileeksternal.css.

Lalu sekarang buat file HTML-nya :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Cara Penulisan CSS pada HTML

Struktur Penulisan CSS

Struktur CSS terdiri dari 3 bagian, yakni Selector, Properti dan Nilai Properti yang dimana Properti dan Nilai Properti ini dibungkus di dalam tanda kurung kurawal.

Cara Penulisan CSS pada HTML

  • Selector merupakan acuan yang digunakan untuk mengaitkannya dengan objek yang akan di edit. Selector bisa berupa tag – tag HTML, class, id, dan tipe – tipe selector lainnya.
  • Properti, berupa komponen – komponen style yang dimiliki oleh CSS.
  • Nilai Properti, adalah pernyataan untuk menentukan style apa yang akan dipilih dalam merubah objek tersebut. Nilai Properti ini tidak hanya berupa huruf, tetapi terdapat juga angka, dan nilai warna.
  • Titik dua (:), digunakan sebagai pemisah antara Properti dengan Nilai Propertinya.
  • Titik Koma (;), digunakan untuk memisahkan Properti satu dengan Properti lainnya.

Namun, anda juga dapat mendeklarasikannya seperti ini…

pengaplikasian css

Terdapat juga pendeklarasian yang menggunakan elemen dari tag – tag HTML…

penulisan css

Melalui deklarasi di atas, menandakan class .none hanya diperuntukan untuk tag <a>. Dan tidak akan muncul pada tag – tag lainnya.


Demikian tutorial dari cara penulisan CSS pada HTML. Silahkan kunjungi tutorial CSS lainnya seperti apa yang dimaksud outline pada CSS, apa itu konsep box model, dimensi elemen pada CSS.

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Cara Penulisan CSS pada HTML”

× Contact Us