SlideShare a Scribd company logo
1 of 2
Download to read offline
CSS Tutorial                                                     rosihanari.net


Mengubah Warna Background Text
Apabila Anda ingin mengubah warna background text, maka berikut ini adalah
propertinya:

background : warna;

cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit
warna yang diinginkan maupun kode hexadesimalnya.

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">

body {
           background : green;
      }

p.styled {
                 font-family: "Palatino Linotype";
                 font-size: 20px;
                 color: #FF0000;
                 background: #FFFFFF; /* warna putih */
             }
p {
          color: orange;
          font-weight: bold;
          background: #000000;    /* warna hitam */
  }

</style>
</head>

<body>

<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini
adalah paragraf 1. Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.
Ini adalah paragraf 2. Ini adalah paragraf 2. </p>



Mengubah Warna Background Text                                                   30
CSS Tutorial                                                   rosihanari.net


</body>
</html>

Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun
perkecualian untuk bagian paragraf. Paragraf pertama diberi warna background putih
sedangkan paragraf kedua diberi warna hitam.

Berikut ini tampilan di browser:




Mengubah Warna Background Text                                                 31

More Related Content

Viewers also liked (7)

Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
Css
CssCss
Css
 
CSS Tutorial
CSS TutorialCSS Tutorial
CSS Tutorial
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 

Similar to Css tutorial-12

Similar to Css tutorial-12 (20)

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
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 
Css tutorial-03
Css tutorial-03Css tutorial-03
Css tutorial-03
 
Css tutorial-03
Css tutorial-03Css tutorial-03
Css tutorial-03
 
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-03
Css tutorial-03Css tutorial-03
Css tutorial-03
 
Css tutorial-05
Css tutorial-05Css tutorial-05
Css tutorial-05
 
Css tutorial-05
Css tutorial-05Css tutorial-05
Css tutorial-05
 
Css tutorial-08
Css tutorial-08Css tutorial-08
Css tutorial-08
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
 
Web html
Web htmlWeb html
Web html
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
Css
CssCss
Css
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 

More from Dani Imansyah

More from Dani Imansyah (14)

Tutorial joomla1.5.x
Tutorial joomla1.5.x Tutorial joomla1.5.x
Tutorial joomla1.5.x
 
Tutorial lan
Tutorial lanTutorial lan
Tutorial lan
 
Css tutorial-20
Css tutorial-20Css tutorial-20
Css tutorial-20
 
Css tutorial-19
Css tutorial-19Css tutorial-19
Css tutorial-19
 
Css tutorial-18
Css tutorial-18Css tutorial-18
Css tutorial-18
 
Css tutorial-17
Css tutorial-17Css tutorial-17
Css tutorial-17
 
Css tutorial-15
Css tutorial-15Css tutorial-15
Css tutorial-15
 
Css tutorial-14
Css tutorial-14Css tutorial-14
Css tutorial-14
 
Css tutorial-12 2
Css tutorial-12 2Css tutorial-12 2
Css tutorial-12 2
 
Css tutorial-10
Css tutorial-10Css tutorial-10
Css tutorial-10
 
Css tutorial-07
Css tutorial-07Css tutorial-07
Css tutorial-07
 
Css tutorial-06
Css tutorial-06Css tutorial-06
Css tutorial-06
 
Css tutorial-04
Css tutorial-04Css tutorial-04
Css tutorial-04
 
Css tutorial-02
Css tutorial-02Css tutorial-02
Css tutorial-02
 

Css tutorial-12

  • 1. CSS Tutorial rosihanari.net Mengubah Warna Background Text Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya: background : warna; cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang diinginkan maupun kode hexadesimalnya. 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"> body { background : green; } p.styled { font-family: "Palatino Linotype"; font-size: 20px; color: #FF0000; background: #FFFFFF; /* warna putih */ } p { color: orange; font-weight: bold; background: #000000; /* warna hitam */ } </style> </head> <body> <p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> Mengubah Warna Background Text 30
  • 2. CSS Tutorial rosihanari.net </body> </html> Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun perkecualian untuk bagian paragraf. Paragraf pertama diberi warna background putih sedangkan paragraf kedua diberi warna hitam. Berikut ini tampilan di browser: Mengubah Warna Background Text 31