Kursus Membuat Web

iklan

Text CSS

Memformat Teks

Teks ini diberi style dengan beberapa dari property pemformatan teks. Heading menggunakan property text-align, text-transform, dan color. Indent paragraf, align, dan spasi antara karakter. Garis bawah dihilangkan pada link ini "Coba Sendiri".

Warna Huruf

Property color digunakan untuk mengatur warna huruf.

Pada CSS, penentuan warna yang paling sering :

  • Menggunakan Nilai HEX seperti : "#ff0000"
  • Menggunakan Nilai RGB seperti : "rgb(255,0,0)"
  • Menggunakan Nama Warna seperti : "red"

Lihat daftar lengkap nilai warna.

Mendefinisikan warna default untuk satu halaman dengan menggunakan selector body.

body {
   color: blue;
}
h1 {
   color: #00ff00;
}
h2 {
   color: rgb(255,0,0);
}
Lihat ...

Text Alignment

Property text-align untuk mengatur horizontal alignment dari teks.

Teks dapat di tengah, atau kanan atau kiri, atau kanan kiri.

Jika text-align diatur ke "justify", masing-masing baris menjadi rata kanan dan kiri.

Contoh
h1 {
 text-align: center;
}

p.date {
 text-align: right;
}

p.main {
 text-align: justify;
}

Lihat ...

Text Decoration

Property text-decoration digunakan untuk menghilangkan dekorasi dari teks.

Property text-decoration umumnya digunakan untuk menghilangkan garis bawah dari link untuk tujuan design:

Contoh
a {
   text-decoration: none;
}
Lihat ...

Tapi juga bisa digunakan untuk mendekorasi teks:

h1 {
   text-decoration: overline;
}
  h2 {
   text-decoration: line-through;
}
  h3 {
   text-decoration: underline;
}
Lihat ...

Catatan: tidak di sarankan untuk membuat garis bawah pada teks yang bukan link, karena hal ini sering membingungkan pengguna.

Text Transformation

Property text-transform digunakan untuk menentukan huruf kapital dan huruf kecil pada teks.

Bisa juga digunakan untuk membuat huruf kapital pada huruf pertama dari masing-masing kata.

Contoh
p.uppercase {
 text-transform: uppercase;
}
p.lowercase {
 text-transform: lowercase;
}
p.capitalize {
 text-transform: capitalize;
}
Lihat ...

Text Indentation

Property text-indent digunakan untuk menentukan indentation dari baris pertama dari teks.

Contoh
p {
 text-indent: 50px;
}
Lihat ...

Beberapa Contoh Untuk di Praktekkan Sendiri

h1 {
  letter-spacing: 3px;
}
 h2 {
  letter-spacing: -3px;
}

Mengatur jarak antara karakter

Contoh ini menunjukkan bagaimana menambahkan atau mengurangi spasi antara karakter.

p.small {
  line-height: 70%;
}
p.big {
  line-height: 200%;
}

Mengatur spasi antara baris

Contoh ini menunjukkan bagaimana mengatur spasi antara baris dalam paragraf.

div.ex1 {
	direction: rtl;
	unicode-bidi: bidi-override;
}

Mengatur arah teks dari sebuah elemen

Contoh ini menunjukkan bagaimana merubah arah teks dari sebuah elemen.

p { 
	word-spacing: 30px;
}

Menambah spasi antara kata

Contoh ini menunjukkan bagaimana menambahkan spasi antara kata dalam paragraf.

p {
	white-space: nowrap;
}

Menonaktifkan pembungkus teks di dalam elemen

Contoh ini menunjukkan bagaimana menonaktifkan pembungkus teks dalam sebuah elemen.

img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}

Alignment vertikal dari gambar

Contoh ini menunjukkan bagaimana mengatur vertikal align dari gambar dalam teks.

h1 {
	text-shadow: 2px 2px #FF0000;
}

Teks berbayang

Contoh ini menunjukkan Teks berbayang.

Semua Property Teks CSS

Property Keterangan
color Mengatur warna teks
direction Menentukan arah teks / arah menulis
letter-spacing Menambah atau mengurangi spasi antara karakter dalam teks
line-height Mengatur spasi baris
text-align Menentukan horizontal alignment dari teks
text-decoration Menentukan dekorasi ditambahkan ke teks
text-shadow Menentukan efek bayangan ditambahkan ke teks
text-transform Kontrol kapitalisasi teks
unicode-bidi Digunakan bersama-sama dengan property direction untuk mengatur atau kembali apakah teks harus diganti untuk mendukung beberapa bahasa dalam dokumen yang sama
vertical-align Mengatur vertical alignment dari elemen
white-space Menentukan bagaimana ruang spasi di dalam elemen ditangani
word-spacing Meningkatkan atau menurunkan ruang spasi antara kata dalam teks

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015