HTML Styles – CSS

Lihat! Gaya dan warna

Teks ini adalah di Verdana dan merah

Teks ini adalah di Times dan biru

Teks ini adalah 30 piksel tinggi


Cobalah Sendiri – Contoh

Menggunakan gaya dalam HTML
Bagaimana menambahkan informasi gaya dalam bagian <head>.

Link yang tidak digarisbawahi
Cara membuat link yang tidak digarisbawahi, dengan atribut style.

Link ke style sheet eksternal
Cara menggunakan tag <link> untuk link ke style sheet eksternal.


Styling HTML dengan CSS

CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen HTML gaya.

CSS dapat ditambahkan ke HTML dengan cara sebagai berikut:

  • Inline – menggunakan atribut gaya dalam elemen HTML
  • Internal – menggunakan elemen style di bagian <head>
  • Eksternal – menggunakan file CSS eksternal

Cara yang lebih disukai untuk menambahkan CSS untuk HTML, adalah untuk menempatkan sintaks CSS pada file CSS yang terpisah.

Namun, dalam tutorial HTML kita akan belajar CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.


Inline Styles

Sebuah gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan ke satu kejadian tunggal dari sebuah elemen.

Untuk menggunakan gaya inline, gunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri paragraf:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


Contoh HTML Style – Warna Background

background-color property mendefinisikan warna latar belakang untuk elemen:

Contoh

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>


HTML Style Example – Font, Color and Size

font-family, color, dan properti font-size mendefinisikan huruf, warna dan ukuran suatu teks pada elemen:

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Properti font-family, color, and font-size menggantikan tag “<font>”.


Contoh HTML Style – Text Alignment

Properti text-align property menentukan keselarasan horizontal suatu elemen teks:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Properti text-align menggantikan tag <center>


Internal Style Sheet

Sebuah style sheet internal yang dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> halaman HTML, dengan menggunakan tag style, seperti ini:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


Eksternal Style Sheet

Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, kita dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>::

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


Tag HTML Style

Tag

Description

<style>

Mendefinisikan informasi style untuk dokumen

<link>

Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

Iklan

Orang baik akan berkomentar yang baik

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s