Hallo semua, kali ini kita akan membahas terkait bagaimana Mengatur Format Text dengan CSS, stelah sebelumnya kita belajar bagaimana menghubungkan CSS ke HTML. Mari praktikan bersama.
1. Mengenal Posisition pada CSS
Pada Modul belajar CSS Mengatur Format Text Dengan CSS ini akan di jelaskan tentang penggunaan css dalam mengatur atau memodifikasi text dengan tujuan agar format text dapat menjadi seperti yang kita inginkan dan kita butuhkan. contohnya untuk mengatur text menjadi justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text, mengatur huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga mengatur dekorasi atau design pada text. silahkan simak penjelasan berikut tentang mengatur format text yang dapat di lakukan menggunakan CSS. adapun beberata syntax CSS yang bisa di gunakan untuk mengatur format text diantara nya adalah:
color
Di gunakan untuk mengatur warna text, value yang dapat di isi berupa warna atau kode warna.
text-align
Di gunakan untuk mengatur posisi align pada text atau rata text, value yang bisa di isi diantaranya adalah center untuk membuat text rata tengah, left untuk membuat text menjadi rata kiri, right untuk membuat text menjadi rata kanan dan justify untuk membuat text menjadi rata kanan dan rata kiri.
text-decoration
Di gunakan untuk mengatur dekorasi text, value nya berupa none untuk membuat text tidak memiliki dekorasi, overline untuk membuat text memiliki garis pada bagian atas text, line- through untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis pada bawah text(garis bawah).
text-transform
Digunakan untuk mengatur huruf kapital pada text, value yang bisa di gunakan diantaranya adalah uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text menjadi huruf kecil, dan capitalize untuk membuat huruf awal pada tiap kata menjadi huruf besar.
text-indent
Digunakan untuk mengatur jarak alinea pada text, value yang bisa digunakan berupa nilai pixel dan lainnya sesuai kebutuhan.
text-spacing
Digunakan untuk mengatur jarak antar karakter pada text, value yang di isi berupa nilai pixel dan lain-lain. Mengatur Format Text Dengan CSS.
word-spacing
Digunakan untuk mengatur jarak antar kata pada text, value yang di isi juga berupa nilai pixel.
line-height
Digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai.
text-shadow
Digunakan untuk mengatur efek bayang pada text, value yang di isikan pertama mengisi nilai untuk jarak kiri kanan, dan kedua mengisi jarak atas bawah dan yang ketiga mengisi warna. untuk contoh penulisanya 2px 5px blue.
vertical-align
Digunakan untuk mengatur align dalam bentuk vertikal pada text value yang digunakan adalah left untuk membuat text rata kiri, right untuk rata atas dan center untuk rata tengah. Untuk contoh cara mengatur format text dengan css. buat sebuah file html dan sebuah file css. di sini saya membuat file index.html dan style.css
Untuk lebih memahami, mari kita coba contoh berikut ini.
Langkah pertama kita buat file dengan nama index.html, kemudian kita isi dengan kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_warna">Mengatur format text dengan CSS</p>
</body>
</html>
Langkah selanjutnya yaitu membuat sebuah file dengan nama style.css yang berguna menampung kode CSS.
.tulisan_warna{
color: blue;
}
Bila dijalankan akan menampilkan sebuat text yang berwarna biru, karena pada kode CSS kita membuat atribut color dengan warna blue.
Mengatur Text Align CSS
Untuk mengatur text align pada CSS kita bisa menggunakan attribut text-align .Mari kita coba bersama, kita akan membuat CSS untuk mengatur text.
.tulisan_kiri{
text-align: left;
}
.tulisan_kanan{
text-align: right;
}
.tulisan_tengah{
text-align: center;
}
.tulisan_justify{
text-align: justify;
}
Selanjutnya silahkan berkreasi dengan kode css.
Posting Komentar