Styling Text CSS
Pada materi formatting text pada css kali ini, kita akan belajar meliputi:
1. text color
2. text alignment
3. text decoration
4. text transformation
5. text indentation
6. letter spacing
7. line height
8. text direction
9. word spacing
10.text shadow
1. Text Color
Diskripsi : Properti yang digunakan untuk memberi warna.
Value : warna langsung ex.”red”, hexa ex. “#00ff00”, RGB ex. “rgb(0,0,255)”, RGBA ex. “rgba(255, 0, 0, 0.3)”, HSL ex. “hsl(120, 100%, 50%)”, dan HSLA ex. “hsla(120, 100%, 50%, 0.3);”
ex.
<!DOCTYPE html>
<html>
<head>
<title>belajar css</title>
<style>
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p> Ini adalah paragaraf biasa, berwarna merah, karena sudah kita setting default </p>
<p class="ex">This is a paragraph with class="ex". ini berwarna biru.</p>
</body>
</html>
2. Text Alignment
Diskripsi : Properti ini digunakan untuk menentukan apakah text akan rata kiri, rata tengah, rata kanan, atau rata kanan kiri.
Value : left, right, center, justify, initial, inherit.
ex.
<!DOCTYPE html>
<html>
<head>
<title>belajar text alignment</title>
<style type="text/css">
h1 {
text-align: center;
}
p.kiri {
text-align: left;
}
p.kanan {
text-align: right;
}
p.kanankiri {
text-align: justify;
}
</style>
</head>
<body>
<h1>judul ini akan saya tampilkan rata tengah</h1>
<p class="kiri">kalimat ini akan tercetak rata kiri</p>
<p class="kanan">kalimat ini akan tercetak rata kanan</p>
<p class="kanankiri"><strong>kalimat ini akan tercetak rata kanan kiri</strong>,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber </p>
</body>
</html>
3. Text Decoration
Diskripsi : Properti ini digunakan untuk mendekorasi text, apakah bergaris dibawah text, garis diatas text, dan lainya .
Value : none, underline, overline, line-through, initial, inherit.
ex.
<!DOCTYPE html>
<html>
<head>
<title>belajar text decoration</title>
<style type="text/css">
p.a {
text-decoration: none;
}
p.b {
text-decoration: underline;
}
p.c {
text-decoration: overline;
}
p.d {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="a">ini none decoration</p>
<p class="b">ini underline decoration</p>
<p class="c">ini overlline decoration</p>
<p class="d">ini line-through decoration</p>
</body>
</html>
4. Text Transformation
Diskripsi : Properti digunakan untuk menentukan huruf besar atau kecil dalam text.
Value : none, capitalize, uppercase, lowercase, initial, inherit.
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.capitalize {
text-transform: capitalize;
}
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
</style>
<title>properti transformation</title>
</head>
<body>
<p class="capitalize">ini contoh capitalize</p>
<p class="uppercase">ini contoh uppercase</p>
<p class="lowercase">ini contoh lowercase</p>
</body>
</html>
5. Text Indentation
Diskripsi : properti yang digunakan untuk indent baris pertama, kita sering mengenal baris pertama yang menjorok kedalam dalam paragraf
Value : *length (px, pt, em, cm, etc, %), initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-indent: 50px;
}
</style>
<title>properti indent</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
6. Letter Spacing
Diskripsi : Digunakan untuk mengatur Spaci dalam text
value : normal,length, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.a {
letter-spacing: 3px;
}
p.b{
letter-spacing: -2px;
}
</style>
<title>properti letter-spacing</title>
</head>
<body>
<p class="a" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="b" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>
</html>
7. Line Hight
Diskripsi : Digunakan untuk mengatur tinggi antar baris
Value : normal, number, length, %, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.a {
line-height: 3;
}
p.b{
line-height: 25px;
text-decoration: underline;
}
p.c {
line-height: 200%;
}
</style>
<title>properti line-hight</title>
</head>
<body>
<p class="a" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p class="b" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p class="c" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html>
8. Text Direction
Diskripsi : Digunakan untuk menentukan arah text.
Value : rtl, ltr, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.a {
direction: ltr;
}
p.b{
direction: rtl;
}
</style>
<title>properti direction</title>
</head>
<body>
<p class="a" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="b" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
<p class="c" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>
</html>
9. Word Spacing
Diskripsi : Digunakan untuk menentukan jarak antar kata
Value : normal, length, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
word-spacing: 20px;
}
</style>
<title>properti word spacing</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>
</html>
10. Text Shadow
Diskripsi : Digunakan untuk membuat bayangan pada text.
Value : h-shadow, v-shadow, blur-radius, color, initial, inherit.
contoh
text-shadow: 50px 20px blue;
artinya jarak horizontal bayangan 50 px, jarak vertical bayangan 20px, warna bayangan biru
jika contoh lain
text-shadow:2px 5px 5px red;
artinya blur radius 2px,horizontal 5px, vertical 5px, warna merah
ex.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow : 2px 5px 5px blue;
}
</style>
<title>properti text-shadow</title>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>
Semoga bermanfaat.
Written by @akhi_syabab
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency