Cara Penulisan CSS pada HTML

Cara Penulisan CSS pada HTML

CSS

42

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

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.…

CSS

<link rel="stylesheet" href="namaFile.css" />
Apabila file *.css berada di dalam folder…

CSS

<link rel="stylesheet" href="namaFolder/namaFile.css" />
Apabila file *.css berada di luar folder…

CSS

<link rel="stylesheet" href="../namaFile.css" />

Memasukan skrip CSS secara Inline

Skrip CSS ini diletakan di dalam elemen yakni pada saat pendeklarasian tag HTML. Misal ingin merubah elemen tag

, menjadi justify…

CSS

<p style="text-align: justify;">…Letakan Teks Disini…</p>

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

CSS

<p style="text-align: justify; color: red;">…Letakan Teks Disini…</p>

Memasukan skrip CSS secara Internal

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

CSS

<head>
 <style type="text/css">
  p{text-align: justify;}
 </style>
</head>
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.

CSS

.eks{

color: #557FFF;

font-family: cursive;

}

Lalu sekarang buat file HTML-nya :

CSS

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="fileeksternal.css">
<style>
.inter{
	color: #FF2A55;
}
</style>
</head>
<body>
<p class="eks">Aku didefinisikan secara Eksternal</p>
<p class="inter">Aku didefinisikan secara Internal</p>
<p style="font-size: 130%; color: fuchsia;">Aku didefinisikan secara Inline</p>
</body>
</html>

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 . Dan tidak akan muncul pada tag – tag lainnya.


Demikian tutorial dari cara penulisan CSS pada HTML.

Keywords: penulisan css, cara tulis css di html

Share: