Baik pada Kombinasi Element dengan Attribute Style HTML bagian 1 tadi kita telah ngobrolin sekilas tentang CSS.
kenapa memahami CSS penting? Karena kita akan memakainya dalam attribute style, sehingga penting bagi kita memahaminya terlebih dahulu sebelum masuk ke attribute style.
Dalam penulisan attribute secara umum, kita diharuskan mengikuti rule yang ditentukan, Maya sudah tulis dalam tulisan sebelumnya.
Jika lupa silahkan baca terlebih dahulu di subjudul tentang attribute pada tulisan: Memahami Element, Tag dan Attribute dalam HTML.
Warna Background
Untuk membuat background sebuah element menjadi berwarna kita harus menambahkan background-color: nama warna dalam attribute style
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya Tentang Attribute Style Background-color</title>
</head>
<body>
<h1 style="background-color:red">Sebuah Judul atau heading 1 dengan background warna red (merah)</h1>
<p style="background-color:crimson">Paragraf dengan background warna berwarna crimson</p>
</body>
</html>
Hasil
Sebuah Judul atau heading 1 dengan background warna red (merah)
Paragraf dengan background warna berwarna crimson
Tentang kode-kode nama warna untuk css dapat Kawan Maya temukan dalam tulisan Maya tentang Kode Warna CSS
Warna Text
Sedangkan untuk membuat text-nya yang berwarna maka nama attribute style-nya “color” dengan nilai kode warna CSS.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya Tentang Attribute Style color</title>
</head>
<body>
<h1 style="color:red">Sebuah Judul atau heading 1 dengan warna red (merah)</h1>
<p style="color:crimson">Paragraf dengan warna crimson</p>
</body>
</html>
Hasil
Sebuah Judul atau heading 1 dengan background warna red (merah)
Paragraf dengan background warna berwarna crimson
Posisi Text
Untuk memposisikan sebuah text maka nama attribute style-nya “text-align”, dan nilainya ada tiga, yaitu center untuk ditengah, left untuk dikiri dan right untuk dikanan
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya Tentang Attribute Style text-align</title>
</head>
<body>
<h1 style="text-align:center">Sebuah Judul atau heading 1 dengan text-align center</h1>
<p style="text-align:left">Paragraf dengan text-align left</p>
<p style="text-align:right">Paragraf dengan text-align right</p>
</body>
</html>
Hasil:
Sebuah Judul atau heading 1 dengan text-align center
Paragraf dengan text-align left
Paragraf dengan text-align right
Ukuran Text
Untuk ukuran text nama attribute-nya “font-size”, sedangkan nilainya angka, dengan ukuran bisa dalam bentuk pixel (px) atau rem, em, dll.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya Tentang Attribute Style font-size</title>
</head>
<body>
<h1 style="font-size:30px">Sebuah Judul atau heading 1 font-size menggunakan ukuran pixel (px)</h1>
<p style="font-size:2rem">Paragraf dengan ukuran rem</p>
<p style="font-size:150%">Paragraf dengan ukuran persen dari ukuran utama yang diatur css karyamaya.com</p>
</body>
</html>
Hasilnya
Sebuah Judul atau heading 1 font-size menggunakan ukuran pixel (px)
Paragraf dengan ukuran rem
Paragraf dengan ukuran persen dari ukuran utama yang diatur css karyamaya.com
Mengkombinasi antar nama attribute style
Untuk mengkombinasikan nama-nama attribute style dan nilainya dipisah dengan titik koma (;) meski tidak dibutuhkan spasi, tetapi lebih rapih jika memakai spasi
Contoh heading dengan warna putih dan background berwarna merah
<h1 style="color: white; background-color: red;">Sebuah Judul atau heading 1 dengan warna text putih dan background warna merah</h1>
Maka Hasilnya:
Sebuah Judul atau heading 1 dengan warna text putih dan background warna merah
Latihan
- Buat satu file dengan nama attribute-syle.html
- Buat sebuah heading dengan warna cokelat dan background berwarna abu-abu dengan posisi text di tengah
- Buat 1 paragraf yang satu dengan background warna hitam dan warna teks-nya abu-abu, dan posisinya di sebelah kanan.
- Buat 1 paragraf lain tanpa background warna dan warna, dengan posisi sebelah kiri dengan ukuran text menggunakan pixel.
Selamat mencoba, kawan Maya!
