dalam css ada juga yang namanya properti text, jadi untuk kali ini kita akan mencoba dan memahami apa itu text dan fungsi text itu apa dan bagaimana kita menerapkan text dalam kode css, tapi sebelumnya izinkan saya untuk mengucapkan
salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah diberikan kepada diri ini, dan salah satu nikmat tersebut bisa menulis dan berbagi
dalam tulisan ini dengan kalian. dan sholawat serta salam tetap terpanjatkan untuk baginda sayyidina Muhammad S.A.W.
dalam kesempatan kali ini kita akan mencoba merubah bentuk dan gaya tulisan pada css dengan menggunakan properti text.
properti text ini juga sering sekali digunakan dalam pembuatan web di baris kode css. jadi properti text ini merupakan suatu hal penting juga dalam
pembuatan baris kode css. agar lebih jelas dan lebih mudah memahaminya mari kita langsung saja terapkan dalam baris-baris kode css kita.
untuk kalian yang sudah mengikuti tulisan ini bisa kalian duplikat atau backup dulu file yang kemaren, dan kemudian buka file yang kemaren yang
sudah kita buat. untuk yang baru pertama mengikuti tulisan ini silahkan ketik atau copy paste kode css berikut ini pada notepad++
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;text-align:right;}
dan berikut kode htmlnya
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<br>
</p>
</div>
</body>
</html>
dari kode diatas akan menghasilkan output seperti berikut
dari hasil diatas kita bisa menerka-nerka fungsi dari text-align ini adalah memindah posisi atau letak sebuah tulisan pada right (kanan),
left (kiri), dan center (tengah).
dan selanjutnya adalah text-decoration, text-decoration ini berfungsi untuk menambahi suatu tulisan atau teks dengan garis bawah (underline),
garis atas (overline) dan garis pada tulisan atau teks itu sendiri (line-through) dan menghilangkan tambahan garis tersebut (none).
untuk lebih jelasnya kita lihat kode css berikut
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;text-align:right;text-decoration:line-through;}
dan dari kode diatas akan dieproleh hasil seperti berikut
selain itu yang terakhir dalam properti text ini adalah text-transform yang berfungsi untuk merubah dari kapital ke huruf kecil atau dari kecil
ke huruf kapital semua. sekarang biar lebih jelas kita coba terapkan dalam kode css seperti berikut
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;text-align:right;text-decoration:line-through;text-transform:uppercase;}
dan dari kode diatas itu akan diperoleh hasil seperti berikut
oh ya untuk text-decoration yang nilainya none itu sering digunakan pada tag anchor html. biar lebih jelas kita terapkan pada kode css berikut
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:99.1%;background:#edfa1d ;margin:0px;padding:11px 0px 0px 11px;font-size:14px;font-family:arial;text-align:left;text-transform:uppercase;}.link{text-decoration:none;}
dan pada kode htmlnya kita kasih link tag anchor dengan class link dan jika diterepakan dalam kode html akan menjadi seperti ini
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<br>
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
</div>
</body>
</html>
dan dari kode diatas akan diperoleh hasil seperti berikut
dari hasil diatas kita bisa lihat garis bawah pada tag anchor akan hilang.
nah untuk tulisan tentang properti text css ini saya rasa cukup sekian dulu, jika masih ada tambahan, monggo di cari di tempat lain kawan
dan mudah-mudahan tulisan ini bisa bermanfaat buat kita semua, aamiiin.
dan kita lanjut di next tulisan
salam sobat semua.
#css #text #html #underline #overline #linetrhough #free #share #berbagi #gratis #web #website #websites #decoration #trasnform
Komentar
Posting Komentar