Belajar CSS Mengatur Format Text Dengan CSS

Belajar CSS Mengatur Format Text
dengan CSS
Pada tutorial 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 untukmembuat 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
Cara mengubah warna text dengan CSS

untuk mengubah warna text dengan CSS perhatikan contoh berikut ini.
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>format text CSS</title>
5 <link rel="stylesheet" type="text/css" href="style.css">
6 </head>
7 <body>
8 Mengatur format text dengan CSS
9 </body>
10 </html>
style.css
1 .tulisan_warna{
2 color: blue;
3 }
dan hasilnya
Mengatur format text dengan CSS
dapat di lihat pada contoh di atas terdapat sebuah tag paragraf yang mempunyai
class tulisan_warna. kemudian mengatur warna biru dengan css.
Cara menggunakan text align CSS

index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Format text CSS</title>

6 </head>
7 <body>
8 Mengatur format text dengan CSS
9 Mengatur format text dengan CSS
10 Mengatur format text dengan CSS
11 
12 Belajar tutorial CSS dasar di www.malasngoding.com.
13 Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.
14 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
15 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
16 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
17 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
18 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
19 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
20 </body>
21 </html>
style.css
1 .tulisan_kiri{
2 text-align: left;
3 }
4
5 .tulisan_kanan{
6 text-align: right;
7 }
9 .tulisan_tengah{
10 text-align: center;
11 }
12
13 .tulisan_justify{
14 text-align: justify;
15 }
HTML dan CSS Dasar

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web. Sekarang kita akan
langsung masuk dan mencoba membuat dokumen HTML sederhana, agar konsep-konsep yang
telah dijelaskan sebelumnya menjadi lebih jelas.
Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan
antara HTML dan CSS:
 HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks)
struktur dan makna semantik.
 CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda lstinline{p} pada
HTML. Memberikan penanda lstinline{p} pada konten dalam HTML berarti menandakan konten
tersebut berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran
teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal
yang membuat dokumen HTML menjadi, emph{well}, dokumen HTML.
Elemen, Tag, dan Atribut
Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis
HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.
Elemen
Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen,
termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML
ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer
lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke
halaman lain:
<a>
Tag
Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut
dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan
dengan nama elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan
menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk
elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:
<a>Ini adalah sebuah link</a>
Atribut
Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap
elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang
dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk
elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar,
terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan.
Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat
diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class”
untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen
tersebut (href):
<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>
Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk
memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink
reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika
pembahasan dari sebuah elemen dilakukan.
Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang
harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
Apa arti dari struktur tersebut? Mari kita lihat satu per satu.
Elemen DOCTYPE
Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang
digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan
adalah HTML5.
Elemen HTML
Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen
HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir
dokumen.
Elemen head
Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi
yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas
eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman
web hasil tampilan browser.
Elemen title
Memberikan judul dokumen.
Elemen body
Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada
pengguna.
Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode
berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
</head>
<body>
<h1>Berita Utama</h1>

Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.


Paragraf kedua.

</body>
</html>
Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File ->
Open... pada browser).
Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan
dari kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan
tampilan hasil olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa
elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh
browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan
elemen p kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa
terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang
telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda,
tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan
jarak antara h1 dengan p. Hal ini dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki
makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta
memberi jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).
Dasar CSS
Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah
dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna
dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.
Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode
deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan
elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh
dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh
elemen p yang ada pada dokumen HTML:
p {
....
}
Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan
seluruh kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang
ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga
dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai
atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada
bab.
Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen
yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:
p {
color: ...;
font-size: ...;
}
Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”).
Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan,
yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks.
Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil
pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti
baru, penjelasan akan diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.
Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri
berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna,
kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang
biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai
ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya,
kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:
p {
color: #FFFF00;
font-size: 50px;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari
CSS adalah seperti yang ditampilkan pada gambar berikut:
Sintaks CSS
Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property
akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh
property tersebut.
Penyingkatan Nilai dari Property
Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai
yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:
/*
Bentuk Panjang
*/
p {
margin-top : 10px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 20px;
}
/*
Bentuk Singkat (1)
*/
p {
margin: 10px 20px;
}
/*
Bentuk Singkat (2)
*/
p {
margin: 10px;
}
Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per
satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya
property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian
bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat
ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin,
padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property
tersebut silahkan baca dokumentasi property CSS yang bersangkutan.
Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain
yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk
memberikan referensi CSS, yaitu:
Referensi ke File Eksternal
Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara
referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan
web.
Penulisan CSS pada Elemen Head
CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada
bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena
umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada
dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen
yang berulang harus dituliskan ulang pada dokumen lain juga.
CSS di dalam Atribut style pada Elemen
Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua
elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini
akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna
semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk
manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori
kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh
browser).
Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah
dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>

<style type="text/css">
h1 {
color: red;
}
</style>


<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita Utama</h1>

Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.




Paragraf kedua.

</body>
</html>
Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut,
tentunya kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di
atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan
kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama
dengan referensi-css.html. Isikan file style.css dengan kode berikut:
p {
font-size: 50px;
}
Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus
berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika
misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan
direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat
mengisikan style/style.css pada atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan
lihat hasilnya, seperti pada gambar berikut:
Hasil Eksekusi referensi-css.html

Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi
kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak
memiliki CSS:
Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada
gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen h1 berubah
menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks
yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf
kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang
terpisah tersebut berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file
eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang
dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah
file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu
tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan
download berulang kali pada file yang sama).
Belajar CSS Mengatur Format Text

dengan CSS
Pada tutorial 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 untukmembuat 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
Cara mengubah warna text dengan CSS

untuk mengubah warna text dengan CSS perhatikan contoh berikut ini.
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>format text CSS</title>
6 </head>
7 <body>
8 Mengatur format text dengan CSS
9 </body>
10 </html>
style.css
1 .tulisan_warna{
2 color: blue;
3 }
dan hasilnya
Mengatur format text dengan CSS

dapat di lihat pada contoh di atas terdapat sebuah tag paragraf yang mempunyai
class tulisan_warna. kemudian mengatur warna biru dengan css.
Cara menggunakan text align CSS

index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
6 </head>
7 <body>
8 Mengatur format text dengan CSS
9 Mengatur format text dengan CSS
10 Mengatur format text dengan CSS
11 

20 </body>
21 </html>
style.css
1 .tulisan_kiri{
2 text-align: left;
3 }
5 .tulisan_kanan{
7 }
9 .tulisan_tengah{
11 }
12
13 .tulisan_justify{
14 text-align: justify;
15 }
belajar css mengatur format text dengan css
Belajar CSS Mengatur format text dengan

CSS
untuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan
contoh berikut.
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>

6 </head>
7 <body>
8 Mengatur format text dengan CSS
9 Mengatur format text dengan CSS
10 Mengatur format text dengan CSS
11 
20 </body>
21 </html>
style.css
1 .tulisan_satu{
2 color: blue;
3 text-decoration: underline;
4 }
5
6 .tulisan_dua{
8 text-transform: capitalize;
9 text-decoration: overline;
10 }
11
12 .tulisan_tiga{
14 text-transform: lowercase;
15 text-decoration: line-through;
16 word-spacing: 10px;
17 }
18
19 .tulisan_empat{
20 text-transform: uppercase;
21 text-indent: 30px;
22 line-height: 30px;
23 letter-spacing: 5px;
24 }

Belajar CSS Mengatur Format Text Dengan CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar CSS Mengatur Format Text Dengan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Belajar CSS Mengatur Format Text

Cara mengubah warna text dengan CSS

4 <title>format text CSS</title>

5 <link rel="stylesheet" type="text/css" href="style.css">

8 <p class="tulisan_warna">Mengatur format text dengan CSS</p>

Mengatur format text dengan CSS

Cara menggunakan text align CSS

4 <title>Format text CSS</title>

8 <p class="tulisan_kiri">Mengatur format text dengan CSS</p>

9 <p class="tulisan_kanan">Mengatur format text dengan CSS</p>

10 <p class="tulisan_tengah">Mengatur format text dengan CSS</p>

12 Belajar tutorial CSS dasar di www.malasngoding.com.

13 Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com.

15 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

16 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

17 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

HTML dan CSS Dasar

<a>Ini adalah sebuah link</a>

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Struktur Dokumen HTML

Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Mengimplementasikan CSS pada HTML

Hasil Eksekusi referensi-css.html

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS