Memasukkan Teks Ke dalam Tanda Kutip dengan CSS - Tanda kutip biasa diberikan pada sebuah halaman blog untuk memberikan enanda yang penting, atau juga bisa jadi inti dari suatu artikel. Pada kesempatan kali ini saya akan sedikit berbagi tentang cara membuat teks dengan tanda kutip. Berikut adalah contoh pembuatan kutip teks dengna css.
Buatlah file css dengan nama kitip.css, kemudian copy script dibawah ini ke dalam file kutip.css.
blockquote{
background: url("image/closequote.png") no-repeat right bottom;
font: 1em cursive;
width: 550px;
text-align: justify;
padding-left: 20px;
text-indent: -20px;
}
blockquote:first-letter{
background: url("image/openquote.png") no-repeat left top;
padding-left: 20px;
font: italic 2em cursive;
}
background: url("image/closequote.png") no-repeat right bottom;
font: 1em cursive;
width: 550px;
text-align: justify;
padding-left: 20px;
text-indent: -20px;
}
blockquote:first-letter{
background: url("image/openquote.png") no-repeat left top;
padding-left: 20px;
font: italic 2em cursive;
}
Buatlah file html dengan nama kitip.html, kemudian copy script dibawah ini ke dalam file kutip.html.
<html>
<head>
<title>Kutip CSS</title>
<link rel="stylesheet" type="text/css" href="kutip.css"/>
</head>
<body>
<blockquote>syamadav.com merupakan sebuah web blog yang bertemakan developer.
Penulis ingin memberikan sugesti tentang development,
bahwa mendevolop sebuah aplikasi itu seasik ketika bermain game.
Blog yang dibuat berisikan tutorial-tutorial ringan yang berurutan dari dasar hingga expert.
Penulisan blog dibuat sesingkat mungkin dan semudah mungkin untuk dipahami.</blockquote>
</body>
</html>
<head>
<title>Kutip CSS</title>
<link rel="stylesheet" type="text/css" href="kutip.css"/>
</head>
<body>
<blockquote>syamadav.com merupakan sebuah web blog yang bertemakan developer.
Penulis ingin memberikan sugesti tentang development,
bahwa mendevolop sebuah aplikasi itu seasik ketika bermain game.
Blog yang dibuat berisikan tutorial-tutorial ringan yang berurutan dari dasar hingga expert.
Penulisan blog dibuat sesingkat mungkin dan semudah mungkin untuk dipahami.</blockquote>
</body>
</html>
Bukalah hasilnya dengan browser.
Cukup sekian postingan dari saya tentang Memasukkan Teks Ke dalam Tanda Kutip dengan CSS. Semoga bermanfaat dan terima kasih.
Posting Komentar