CSS ( Cascading Style Sheet )


Penerokan- Sudahkah anda siap Belajar CSS pada HTML untuk malam ini,?,Apakah itu CSS ?saya sedikit memberi ilmu untuk belajar pada sebuah CSS di HTML, ada  3 cara untuk memasang dokumen HTML yaitu : > External Style Sheet
                                       > Internal Style Sheet
                                       > Inline Style Sheet

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


  1. Memasang CSS
           Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu : External Style Sheet (file CSS berbeda dari file HTML), internal style sheet ( kode CSS dipasang di dalam tag head HTML ) dan inline style sheet (kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). saya sarankan anda menggunakan cara style External Style sheet karena lebih mudah dalam mengelolahnya.



  • Inline Style
           CSS dideklarasikan sebagai atribut pada elemen, tidak dibangun sebagai aturan, dan tidak ada selector. Properti dan nilainya melekat langsung pada elemen.

Contoh :

<html>
<head>
            <title> Inline Style CSS</title>
</head>
<body>
            <h2 style="text-decoration:underline;">Pandawa</h2>
            <p style="color:blue;">Nakula dan sadewa adalah saudara kembar saya.mereka adalah adik                   tiri yudistira,Bima,arjuna.</p>
</body>
</html>



  • Embedded Style Sheet
          Aturan CSS ditanamkan dalam head dari dokumen. aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.

contoh :

<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 saudara kembar,mereka adalah adik tiri yudistira,bimz,arjuna.</p>
              <p> Namun, <span class="example">kesetiaan</span>mereka pada Pandawa tak pernah goyah.</p>

<body>
</html>



  • External Style Sheet
           Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokument melalui elemen head. file style sheet text disimpan menggunakan ekstensi. css.
Contoh :
h2 { text-decoration:underline;}
.dewi_kunti, .pandhu {background:yellow:color:red;}
#info_bima {color:green;}

<html>
<head>
               <title>external style sheets</title>
               <link rel="stylesheet"type="text/css"href="latihan3css.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>



itulah pelajaran untuk CSS kita malam ini,mudah-mudahan dapat dimengerti, dan mohon maaf bila terdapat kekurangan dalam blog ini dan mengucapkan terima kasih.

dan jangan lupa juga mengunjungi blog saya yang berikutnya di: www.kimia-organik-ii.xyz

0 Response to "CSS ( Cascading Style Sheet )"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel

Iklan Bawah Artikel