Berbagi Ilmu: CSS

CSS

CSS (Cascading Style Sheet) adalah mekanisme memisahkan antara isi dan presentasi dokumen HTML. CSS menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman. CSS Bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen HTML yang diberikan. Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSS.

1. Aturan Penulisan

Aturan penulisan CSS berisi set intruksi yang memerintahkan browser untuk mengikuti aturan dan mengubah tampilan elemen XHTML berdasarkan pada nilai-nilai yang diberikan.

1.1 Inline Styles
CSS dideklarasikan sebagai atribut pada elemen. Tidak dibangun sebagai aturan, dan tidak ada selector. Properti dan nilainya melekat langsung pada elemen.
01.latihan_ 1 2 .html

<html>
     <head>
          <title>Inline Styles CSS</title>
     </head>
     <body>
          <h2 style="text-decoration:underline;">Pandawa</h2>
          <p style="color:blue;">Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p>
     </body>
</html>

hasilnya seperti ini :

1.2 Embedded Style Sheets
Aturan CSS ditanamkan dalam elemen head dari dokumen. Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.

01.latihan_ 1 3.html

<html>
   <head>
         <style type="text/css">
              h2 { text-decoration:underline; }
              p { color:blue; }
             .example { background:yellow;color:red; }
         </style>
    </head>
     <body>
            <h2>Pandawa</h2>
            <p>Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p>
           <p>Namun, <span class="example">kesetiaan</span> mereka pada Pandawa tak pernah goyah.</p>
      </body>
</html>

hasilnya seperti ini :

1.3 External Style Sheets
Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokumen melalui elemen head. File style sheet text disimpan menggunakan ekstensi .css.

01.latihan_ 1 4 . css

h2 { text-decoration:underline; }
.dewi_kunti, .pandhu { background:yellow;color:red; }
#info_bima { color:green; }

01.latihan_ 1 4 . htm l
<html>
      <head>
            <title>External Style Sheets</title>
            <link rel="stylesheet" type="text/css" href="01.latihan_14.css" />
      </head>
      <body>
            <h2>Bima</h2>
             <p>
Bima adalah anak ke-2 <span class="dewi_kunti">Dewi Kunti</span> dan <span class="pandhu">Pandhu</span>
           </p>
           <p id="info_bima">
Nama lainnya adalah Bimasena dan Werkudara.<br />
Bahasa yang digunakan selalu kasar dan selalu menakutkan musuh,
walaupun hatinya baik.
            </p>
       <body>
</html>

hasilnya seperti ini :

DAFTAR PUSTAKA
1. “Modul Internet dan HTML”, http://uniat.ac.id/files/Modul_Internet_dan_HTML.pdf
2. Ahlihi Masruro, S.Kom. 2010. Modul Pemrograman Web. STMIK AMIKOM
Yogyakarta
3. Rajiv Rajif Agung Yunmar, S.Kom. 2010. Modul Pemrograman Web. STMIK
AMIKOM
Yogyakarta
4. Arif Laksito, S.Kom. 2010. Pemprograman Web HTML, XHTML dan CSS. STMIK
AMIKOM Yogyakarta

Berbagi Ilmu

Dapatkan uang dari internet dengan mudah dan cepat lewat PTC (Paid to Click), selengkapnya klik disini

Minggu, 06 April 2014

CSS

CSS

1. Aturan Penulisan

Tidak ada komentar:

Posting Komentar