Cara Mengatur Warna dan Format Teks dengan CSS

Style teks memang tak ada habisnya dan menarik untuk dipelajari. Karena teks adalah komponen dari informasi yang ada dihalaman web yang sangat penting. Maka dari itu kita mencoba mencari tau apa saja yang bisa dilakukan style pada teks.

Jika kita mengingat kebelakang tentang format font pada html maka hampir sama. Tapi pada html atribut-atribut font itu hanya ada di tag font <font> sehingga sangat repot. Dengan css kita diberikan kemudahan untuk melakukan itu. Pada tutorial kali ini kami akan melist format-format font yang sering digunakan.

  • color
    properti color pada css langsung merujuk pada warna teks
  • font-size
    untuk mengatur ukuran teks satuannya bisa px atau pt
  • font-style
    untuk membuat font miring
  • font-family
    untuk memilih jenis huruf, biasanya lebih dari satu agar browser memilih yang tersedia
  • font-weight
    untuk membuat font tebal atau normal

#file html
<!DOCTYPE html>
<html>
<head>
<title>Font</title>
<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
<div class="font1">
Format Font dengan CSS
</div>
</body>
</html>
dsds

#file css (font.css)

font1{
        color: red;
font-size: 32pt;
font-style: italic;
font-family: "Lucida Console", Courier, monospace;
font-weight: bold;
}

#tampilan

Selanjutnya kita kita akan membahas properti tex pada css untuk pengayaan format teks.
  • text-decoration:underline
    untuk membuat teks bergaris bawah
  • text-align
    untuk perataan teks
  • text-transform
    untuk membuat teks uppercase, lowecase dll
  • text-shadow
    untuk membuat bayangan teks
#file html
<!DOCTYPE html>
<html>
<head>
<title>Font</title>
<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
<div class="font1">
Format Font dengan CSS
</div>
</body>
</html>
dsds

#ubah file css (font.css)

.font1{
color: green;
font-size: 32pt;
text-decoration: underline;
text-transform: uppercase;
text-align: center;
text-shadow:2px 2px 4px blue;
}

#tampilan


Catatan: untuk mengatur font atau teks anda dapat mengulik properti font dan text.

Terima kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE