SlideShare a Scribd company logo
1 of 2
Download to read offline
CSS Tutorial rosihanari.net
Membuat Text Decoration 43
Membuat Text Decoration
Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun
blink dengan properti
text-decoration : option;
dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk
melihat perbedaannya, perhatikan contoh berikut.
Contoh:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
#heading1 {
text-decoration : blink; /* membuat teks berkelap kelip */
}
#heading2 {
text-decoration : line-through;
/* membuat garis ditengah text/ dicoret */
}
#heading3 {
text-decoration : underline; /* membuat garis bawah */
}
#heading4 {
text-decoration : overline; /* membuat garis di atas text */
}
</style>
</head>
<body>
<h1 id="heading1">Ini Judul Heading 1</h1>
<h1 id="heading2">Ini Judul Heading 2</h1>
<h1 id="heading3">Ini Judul Heading 3</h1>
<h1 id="heading4">Ini Judul Heading 4</h1>
</body>
</html>
CSS Tutorial rosihanari.net
Membuat Text Decoration 44
Tampilan dari code di atas adalah sebagai berikut, akan tetapi untuk efek blink pada
heading 1 tidak kelihatan ketika di screen shot.

More Related Content

Viewers also liked

Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorialhstryk
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout TechniquesHarshal Patil
 
Adobe photoshop cs6 basic tutorials presentation
Adobe photoshop cs6 basic tutorials   presentationAdobe photoshop cs6 basic tutorials   presentation
Adobe photoshop cs6 basic tutorials presentationRishi Shah
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Plant layout ppt by me
Plant layout ppt by mePlant layout ppt by me
Plant layout ppt by meAnkit Walia
 

Viewers also liked (6)

Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorial
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout Techniques
 
Adobe photoshop cs6 basic tutorials presentation
Adobe photoshop cs6 basic tutorials   presentationAdobe photoshop cs6 basic tutorials   presentation
Adobe photoshop cs6 basic tutorials presentation
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Plant layout ppt by me
Plant layout ppt by mePlant layout ppt by me
Plant layout ppt by me
 

Similar to Css tutorial-18

Similar to Css tutorial-18 (20)

Css tutorial-13
Css tutorial-13Css tutorial-13
Css tutorial-13
 
Css tutorial-16
Css tutorial-16Css tutorial-16
Css tutorial-16
 
Css tutorial-05
Css tutorial-05Css tutorial-05
Css tutorial-05
 
Css tutorial-05
Css tutorial-05Css tutorial-05
Css tutorial-05
 
Css tutorial-17
Css tutorial-17Css tutorial-17
Css tutorial-17
 
Css tutorial-14
Css tutorial-14Css tutorial-14
Css tutorial-14
 
Css tutorial-08
Css tutorial-08Css tutorial-08
Css tutorial-08
 
Css tutorial-12
Css tutorial-12Css tutorial-12
Css tutorial-12
 
Css tutorial-12 2
Css tutorial-12 2Css tutorial-12 2
Css tutorial-12 2
 
Css tutorial-11
Css tutorial-11Css tutorial-11
Css tutorial-11
 
Css tutorial-07
Css tutorial-07Css tutorial-07
Css tutorial-07
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css
CssCss
Css
 
Css tutorial-15
Css tutorial-15Css tutorial-15
Css tutorial-15
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
Webdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSSWebdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSS
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 

More from Karin Novilda

More from Karin Novilda (15)

Css tutorial-09
Css tutorial-09Css tutorial-09
Css tutorial-09
 
Css tutorial-06
Css tutorial-06Css tutorial-06
Css tutorial-06
 
Css tutorial-04
Css tutorial-04Css tutorial-04
Css tutorial-04
 
Css tutorial-03 2
Css tutorial-03 2Css tutorial-03 2
Css tutorial-03 2
 
Css tutorial-03
Css tutorial-03Css tutorial-03
Css tutorial-03
 
Css tutorial-02
Css tutorial-02Css tutorial-02
Css tutorial-02
 
Publikasi 08.11.22082
Publikasi 08.11.22082Publikasi 08.11.22082
Publikasi 08.11.22082
 
Publikasi 08.11.2208
Publikasi 08.11.2208Publikasi 08.11.2208
Publikasi 08.11.2208
 
Jurnal skripsi
Jurnal skripsiJurnal skripsi
Jurnal skripsi
 
Jurnal 13173sma nu maarif
Jurnal 13173sma nu maarifJurnal 13173sma nu maarif
Jurnal 13173sma nu maarif
 
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
Jbptunikompp gdl-rudiramlan-28836-16-sistemi-
 
Bab skripsi
Bab skripsiBab skripsi
Bab skripsi
 
Sistem informasi-pengolahan-nilai-sekolah
Sistem informasi-pengolahan-nilai-sekolahSistem informasi-pengolahan-nilai-sekolah
Sistem informasi-pengolahan-nilai-sekolah
 
Bab iv
Bab ivBab iv
Bab iv
 
5 unikom-s-m
5 unikom-s-m5 unikom-s-m
5 unikom-s-m
 

Css tutorial-18

  • 1. CSS Tutorial rosihanari.net Membuat Text Decoration 43 Membuat Text Decoration Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun blink dengan properti text-decoration : option; dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk melihat perbedaannya, perhatikan contoh berikut. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css"> #heading1 { text-decoration : blink; /* membuat teks berkelap kelip */ } #heading2 { text-decoration : line-through; /* membuat garis ditengah text/ dicoret */ } #heading3 { text-decoration : underline; /* membuat garis bawah */ } #heading4 { text-decoration : overline; /* membuat garis di atas text */ } </style> </head> <body> <h1 id="heading1">Ini Judul Heading 1</h1> <h1 id="heading2">Ini Judul Heading 2</h1> <h1 id="heading3">Ini Judul Heading 3</h1> <h1 id="heading4">Ini Judul Heading 4</h1> </body> </html>
  • 2. CSS Tutorial rosihanari.net Membuat Text Decoration 44 Tampilan dari code di atas adalah sebagai berikut, akan tetapi untuk efek blink pada heading 1 tidak kelihatan ketika di screen shot.