cara mengatur teks pada bahasa pemrograman css
Tutorial mengatur teks/ text styling pada bahasa pemrograman CSS
 |
| Tutorial properti text CSS |
Karena sebuah website adalah kumpulan teks sebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. Lalu bagaimana cara mengatur teks di CSS?
Mengatur gaya Teks Pada bahasa pemrrgraman CSS
Di CSS sendiri memiliki beberapa properti yang dapat kita gunakan untuk mengatur teks sesuai yang kita perlukan tentunya. Properti tersebut dapat mengatur antara lain : posisi perataan jarak, memberi komentar, garis bawah, jarak antar paragraf, dan lain-lain.Mengatur warna teks di CSS
Color properti yang digunakan untuk mengubah warna text. Ada tiga satuan pada properti ini yakni nama warna dalam bahasa (inggris), hexadecimal yang diawali dengan tanda (#pagar), dan RGB (red green blue). contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Color : Red;
}
H2 {
Color : #0000FF;
}
H3 {
Color : rgb(165, 42, 42);
}
</style>
</head>
<body>
<H1> Warna merah tulis nama warna </H1>
<H2> Warna dengan hexadecimal <H2>
<H3> Warna dengan RGB (red green blue) </H3>
</body>
</html>
Apabila syntak diatas dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Color : Red;
}
H2 {
Color : #0000FF;
}
H3 {
Color : rgb(165, 42, 42);
}
</style>
</head>
<body>
<H1> Warna merah tulis nama warna </H1>
<H2> Warna dengan hexadecimal <H2>
<H3> Warna dengan RGB (red green blue) </H3>
</body>
</html>
Mengatur perataan teks di CSS
Text-align, properti yang digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat. Properti ini memiliki 4 value yaitu (left, right, center, justify). secara default teks rata kiri. contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
#tulisan1 {
Text-align : right;
}
#tulisan2 {
Text-align : center;
}
#tulisan3 {
Text-align : justify;
}
</style>
</head>
<body>
<p id=”tulisan1”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
<p id=”tulisan2”> Di CSS sendiri memiliki beberapa properti yang dapat kita gunakan untuk mengatur teks sesuai yang kita perlukan tentunya. Properti tersebut dapat mengatur antara lain : posisi perataan jarak, memberi komentar, garis bawah, jarak antar paragraf, dan lain-lain </p> <br>
<p id=”tulisan3”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
</body>
</html>
Dari syntak diatas apabila dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
#tulisan1 {
Text-align : right;
}
#tulisan2 {
Text-align : center;
}
#tulisan3 {
Text-align : justify;
}
</style>
</head>
<body>
<p id=”tulisan1”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
<p id=”tulisan2”> Di CSS sendiri memiliki beberapa properti yang dapat kita gunakan untuk mengatur teks sesuai yang kita perlukan tentunya. Properti tersebut dapat mengatur antara lain : posisi perataan jarak, memberi komentar, garis bawah, jarak antar paragraf, dan lain-lain </p> <br>
<p id=”tulisan3”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
</body>
</html>
Mengatur awal paragraf kalimat di CSS
Text-indent, properti yang digunakan untuk mengatur jarak pada bagian kiri kalimat pertama atau awal paragraf. Satuan value ada 2 yaitu (px dan %).contohFile index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type =”text/css”>
#tulisan1 {
Text-indent : 40px;
}
#tulisan2 {
Text-indent : 10%;
}
</style>
</head>
<body>
<p id=”tulisan1”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
<p id=”tulisan2”> Di CSS sendiri memiliki beberapa properti yang dapat kita gunakan untuk mengatur teks sesuai yang kita perlukan tentunya. Properti tersebut dapat mengatur antara lain : posisi perataan jarak, memberi komentar, garis bawah, jarak antar paragraf, dan lain-lain </p> <br>
</body>
</html>
Apabila syntaks diatas dijalankan maka akan menampilkan sepeerti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type =”text/css”>
#tulisan1 {
Text-indent : 40px;
}
#tulisan2 {
Text-indent : 10%;
}
</style>
</head>
<body>
<p id=”tulisan1”> sebuah website adalah kumpulan tekssebagai informasi untuk pengguna di internet. Jadi pengembang website harus pandai-pandai mengatur gaya teks agar pengguna internet yang membaca website tersebut tidak mudah bosan untuk membacanya. </p> <br>
<p id=”tulisan2”> Di CSS sendiri memiliki beberapa properti yang dapat kita gunakan untuk mengatur teks sesuai yang kita perlukan tentunya. Properti tersebut dapat mengatur antara lain : posisi perataan jarak, memberi komentar, garis bawah, jarak antar paragraf, dan lain-lain </p> <br>
</body>
</html>
Memberi garis pada teks di CSS
Text-decoration, properti yang digunakan untuk menambahkan garis bawah, atas dan tengah-tengah teks. sperti efek coret pada suatu teks. Ada 3 value pada properti ini yaitu underline(garis bawah), overline(garis atas), line-through(garis tengah). Perhatikan contoh berikut :File index.html
<!Doctype html>
<html><head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Text-decoration : underline;
}
H2 {
Text-decoration : overline;
}
H3 {
Text-decoration : line-through;
}
</style>
</head>
<body>
<H1> Garis Bawah </H1>
<H2> Garis Atas <H2>
<H3> Garis Tengah </H3>
</body>
</html>
Mengatur besar kecil huruf di CSS
Text-transform, properti yang digunakan untuk mengatur besar kecilnya huruf di CSS. Value pada properti ini adalah uppercase(seluruh teks menjadi huruf besar), lowercase (seluruh teks menjadi huruf kecil), dan capitalize(huruf awa dari setiap kata akan menjadi huruf besar). contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Text-transform: uppercase;
}
H2 {
Text-transform: lowercase;
}
H3 {
Text-transform: capitalize;
}
</style>
</head>
<body>
<H1> Semua huruf besar </H1>
<H2> Semua huruf kecil <H2>
<H3> Awal kata setiap huruf menjadi besar </H3>
</body>
</html>
Apabila syntaks diatas dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Text-transform: uppercase;
}
H2 {
Text-transform: lowercase;
}
H3 {
Text-transform: capitalize;
}
</style>
</head>
<body>
<H1> Semua huruf besar </H1>
<H2> Semua huruf kecil <H2>
<H3> Awal kata setiap huruf menjadi besar </H3>
</body>
</html>
Mengatur jarak antar huruf di CSS
Letter-spasing, properti yang digunakan untuk mengatur jarak antar huruf pada sebuah kata. Satuan nilai yang dapat digunakan properti ini adalah (px dan normal). contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Letter-spacing : 10px;
}
</style>
</head>
<body>
<H1> contoh letter spacing </H1>
</body>
</html>
Jika syntaks dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
H1 {
Letter-spacing : 10px;
}
</style>
</head>
<body>
<H1> contoh letter spacing </H1>
</body>
</html>
Mengatur jarak antar kata di CSS
Word-spacing, properti yang digunakan untuk mengatur jarak antar kata pada sebuah kalimat. Satuan nilai yang dugunakan oleh properti ini adalah (px dan normal). contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
P {
Word-spacing : 10px;
}
</style>
</head>
<body>
<p> contoh word spacing pada bahasa pemrograman CSS </p>
</body>
</html>
Jika dijalankan maka akan menampilkan seperti gambar berikut :<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
P {
Word-spacing : 10px;
}
</style>
</head>
<body>
<p> contoh word spacing pada bahasa pemrograman CSS </p>
</body>
</html>
Memberi bayangan pada teks di CSS
Text-shadow, properti yang digunakan untuk memberikan bayangan pada suatu teks. Untuk itu kita dapat menyesuaikan besar bayangan yang kita inginkan nantinya. Contoh :File index.html
<!Doctype html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
P {
Text-shadow : 2px 2px 10px black;
}
</style>
</head>
<body>
<p> contoh text shadow pada bahasa pemrograman CSS </p>
</body>
</html>
<html>
<head>
<title> Mengatur teks pada CSS </title>
<style type=”text/css”>
P {
Text-shadow : 2px 2px 10px black;
}
</style>
</head>
<body>
<p> contoh text shadow pada bahasa pemrograman CSS </p>
</body>
</html>
Demikian tutorial Part 4 cara mengatur teks pada bahasa pemrograman CSS. Selanjutnya giliran teman-teman untuk mengkrasikan gaya teks pada halaman website teman sendiri. Dari sekian banyak properti yang dapat digunakan untuk mengatur teks seusai teman-teman inginkan.
Selanjutnya pada artikel tutorial Part 5 kami akan membahas tentang Tutorial property background/mengatur background pada bahasa pemrograman CSS.
0 Response to "cara mengatur teks pada bahasa pemrograman css"
Post a Comment