HTML Styles - CSS
CSS (Cascading Style Sheets) digunakan untuk elemen HTML gaya.
Lihat! Gaya dan warna
Memanipulasi Teks
Warna, box
dan banyak lagi ...
Cobalah Sendiri - Contoh
Menggunakan gaya dalam HTML
Bagaimana menambahkan informasi gaya dalam bagian <head>.
Bagaimana menambahkan informasi gaya dalam bagian <head>.
Link yang tidak digarisbawahi
Cara membuat link yang tidak digarisbawahi, dengan atribut style.
Cara membuat link yang tidak digarisbawahi, dengan atribut style.
Link ke style sheet eksternal
Cara menggunakan tag <link> untuk link ke style sheet eksternal.
Cara menggunakan tag <link> untuk link ke style sheet eksternal.
Styling HTML dengan CSS
CSS diperkenalkan bersama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk gaya elemen HTML.
CSS dapat ditambahkan ke HTML dengan cara berikut:
- Inline - menggunakan gaya atribut dalam elemen HTML
- Internal - menggunakan <style> elemen di bagian <head>
- Eksternal - menggunakan CSS eksternal berkas
Cara yang lebih disukai untuk menambahkan CSS untuk HTML, adalah untuk menempatkan sintaks CSS di file CSS yang terpisah.
Namun, dalam HTML ini tutorial kita akan memperkenalkan Anda kepada CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.
Anda dapat mempelajari segala sesuatu tentang CSS di kami Tutorial CSS .
Inline Styles
Gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan pada satu kejadian tunggal dari suatu 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>
Untuk mempelajari lebih lanjut tentang style sheet, kunjungi kami CSS tutorial .
HTML Style Contoh - Background Color
Properti background-color 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>
<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>
Coba sendiri »
Properti background-color membuat "tua" bgcolor atribut usang.
HTML Style Contoh - Font, Warna dan Ukuran
Font-family, warna, dan font-size sifat mendefinisikan font, warna, dan ukuran teks dalam suatu elemen:
Contoh
<!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>
<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>
Coba sendiri »
Font-family, warna, dan sifat font-size membuat tag <font> lama usang.
HTML Style Contoh - Teks Penyelarasan
Properti text-align menentukan keselarasan horizontal teks dalam suatu elemen:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Coba sendiri »
Properti text-align membuat tag <center> lama usang.
Internal Style Lembar
Sebuah internal style sheet 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>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Gaya eksternal Lembar
Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda 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>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Style HTML Tag
| Tag | Description |
|---|---|
| <style> | Defines style information for a document |
| <link> | Defines the relationship between a document and an external resource |
Usang Tag dan Atribut
Dalam HTML 4, beberapa tag dan atribut yang digunakan untuk dokumen gaya. Tag ini tidak didukung dalam versi terbaru dari HTML.
Hindari menggunakan unsur-unsur: <font>, <center>, dan <strike>, dan atribut: warna dan bgcolor.
