1. Warna teks dan background
Ada 2 cara untuk memberikan style pada sebuah elemen. pertama dengan menggunakan css, untuk lebih lengkap tentang css ada postingan khusus css di sini.
Cara kedua adalah dengan menuliskan langsung di suatu elemen dengan menggunakan attribut style. Teknik ini di kenal dengan istilah inline style.
untuk penulisannya adalah sebagai berikut
<namatag style="properti:value";></namatag>Dimana properti itu sebagai nama style yang akan di terapkan dan value sebagai nilai dari properti.
kita buat contoh saja, untuk menulis 2 properti atau lebih di pisahkan dengan tanda titik koma ";"
<html>
<head>
<title>style</title>
</head>
<body>
<p style="color:white;background:blue;">teks putih bg biru</p>
</body>
</html>
2. Mengubah ukuran dan perataan
untuk mengubah perataan kita mengatur ukuran teks dengan menggunakan properti font-size dan untuk mengatur perataan kita bisa menggunakan text-align dengan nilai left,right,center,justify
<html>
<head>
<title>style</title>
</head>
<body>
<p style="font-size:20px;text-align:center;">ini teks dengan warna putih dan backgroun biru</p>
</body>
</html>
kurang lebih tampilan dari contoh diatas seperti ini
3. Border
Border ini adalah garis tepi, ada banyak macam pengaturan border, ada yang sudutnya melengkung dan ada yang border hanya di atas, bawah, atau hanya di samping kanan kiri, ada border yang putus-putus. untuk lebih lengkapnya silahkan klik disini
untuk penulisannya seperti ini
<html>
<head>
<title>style</title>
</head>
<body>
<p style="border:1px solid purple">untuk border ungu</p>
</body>
</html>untuk tampilannya kurang lebih seperti ini
4. Padding
Padding ini digunakan untuk memberi jarak antara konten dan elemen yang di beri properti padding.
misalnya kita ambil contoh di no 3. kalau kita perhatikan antara teks(konten) dan elemen p yang di beri border itu tidak nampak jarak sama sekali, maka kita beri properti padding agar terlihat lebih rapi
<html>
<head>
<title>style</title>
</head>
<body>
<p style="border:1px solid purple;padding:10px;">untuk border ungu</p>
</body>
</html>
untuk tampilannya kurang lebih seperti ini
5. Margin
Biasanya para programmer pemula banyak yang bingung antara margin dan padding, karena hampir sama, sebenarnya mudah saja. jika padding mengatur jarak elemen dengan konten, margin mengatur jarak antara elemen dengan yang di luarnya. sebagai contoh kita teruskan contoh diatas.
kita masukan elemen p pada contoh 4 kedalam elemen div yang di beri border hijau dengan tebal 2px.
sehingga kodenya menjadi seperti ini
<html>
<head>
<title>style</title>
</head>
<body>
<div style="border:2px solid green">
<p style="border:1px solid purple;padding:10px;">untuk border ungu</p>
</div>
</body>
</html>
kurang lebih hasilnya seperti di bawah ini
untuk border ungu
border milik div dan p ( hijau dan ungu menyatuh. tapi sekarang coba beri properti padding pada elemen p sehingga kodenya menjadi seperti ini
<html>
<head>
<title>style</title>
</head>
<body>
<div style="border:2px solid green">
<p style="border:1px solid purple;padding:10px;margin:5px;">untuk border ungu</p>
</div>
</body>
</html>kurang lebih hasilnya seperti di bawah ini
untuk border ungu
saya rasa sudah jelas perbedaannya buka.
6. Internal/external Style
Coba lihat lagi contoh-contoh coding diatas, nampak berantakan bukan ? hal ini disebabkan karena kita menuliskan style di setiap elemen. nah untuk mengatasinya disarankan untuk membuat internal/external style. cara kerja internal style adalah pertama kita masukan properti class ke elemen yang di maksud dengan nilai terserah saja.
<p class="apalah">
setelah itu buat elemen style diantara <head> dan </head> bisa diatas title bisa di bawah title
<style type="text/css">
</style>
lalu masukan nilai dari atribut class tadi beserta nilai properti yang diinginkan
<style type="text/css">
.class{
color="white";
background="blue";
}
</style>
kurang lebih akan tampil seperti ini
teks putih dan bg biru
sebenarnya ada banyak materi untuk internal/external style ini tapi karna ini hanya untuk pengenalan maka lebih lengkapnya saya buat di artikel yang berbeda
PreviousNext
0 komentar untuk Belajar HTML #part3 style.
Perlihatkan Semua Komentar Tutup Semua Komentar