Css Inline HTML

View Categories

Css Inline HTML

CSS Inline adalah atribut style yang digunakan untuk memberikan properti CSS kepada suatu tag di dalam dokumen HTML. Hampir semua tag atau elemen HTML bisa disisipkan atribut style. Atribut style bisa digunakan untuk banyak hal dan didefinisikan dalam bentuk CSS properti. CSS akan dibahas lebih detil pada tutorial selanjutnya. Tutorial ini hanya membahas CSS sebagai atribut suatu tag.

Format atribut style adalah sebagai berikut:

<tagname style="property:value;">

Tagname adalah nama tag atau nama elemen HTML. Property adalah properti css yang akan kita definisikan, sedangkan value adalah nilai dari properti tersebut.

Berikut beberapa properti yang banyak dipakai pada tag.

Warna Latar Belakang

Properti background-color digunakan untuk mengubah warna latar belakang tag.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Jalankan Contoh

Contoh di atas adalah cara mengubah warna latar belakang halaman HTML secara keseluruhan karena atribut style dengan properti background-color diletakkan pada tag body.

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Jalankan Contoh

Contoh di atas adalah cara mengubah warna latar belakang tag h1 dan paragraf.

Warna Huruf

Properti color digunakan untuk mengubah warna tulisan pada suatu tag.

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Jalankan Contoh

Jenis Huruf

Properti font-family digunakan untuk mengubah jenis huruf pada suatu tag.

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Jalankan Contoh

Ukuran Huruf

Properti font-size digunakan untuk mengubah ukuran huruf pada suatu tag.

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Jalankan Contoh

Posisi Huruf

Properti text-align digunakan untuk menentukan posisi text pada suatu tag.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Jalankan Contoh

Tutorial sebelumnya : Atribut HTML
Tutorial setelahnya : Membuat Komentar Di HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan