Belajar Pemrograman Web : Latihan CSS part 1 ~ Ilmu Berlian

Belajar Pemrograman Web : Latihan CSS

Haihai Mina-san ! Nah kali ini saya akan berbagi tentang latihan sederhana yang merupakan pelajaran dasar untuk mengenali CSS mengikuti tampilan seperti dibawah ini :

Lihat juga Seputar Web Lainnya

nah langsung saja ya ke scriptnya pada part ini menggunakan internal style

<html>
  <head>
   <title>
    latihancss
   </title>
  </head>
  <style>
    body{color:blue;}
    h1{color:#00ff00;}
    .red{color:red;
    text-indent:50px;
    }
    h2{
    color:red;
    
    text-decoration: line-through;
    font-style:bold;}
    h3{
     color:red;
     font-style:bold;
     
     text-decoration: underline;}
    .blue{color:blue;
    text-indent:50px;}
    .over  { text-decoration: overline;}
    .under { text-decoration: underline; }
    .blink {text-decoration: blink;}
    .all   { text-decoration: underline overline line-through; }
    a      { text-decoration: none; }
    .besar{text-indent:50px; color:red;text-transform : uppercase;}
    .kecil{text-indent:50px; color:red;text-transform : lowercase;}
    .capital{text-indent:50px; color:red;text-transform : capitalize;}
    .coba{color:red; text-indent:50px; text-align: justify;}
  </style>
  <body>
  <h1 class="over">
Ini adalah Heading 1 (Berwarna Hijau)</h1>
<p class="red">
ini adalah paragraf pertama.Perhatikan bahwa warna tulisan ini adalah merah. Warna default untuk tect,didefinisikan di selector body</p>
<p class="blue">
Ini adalah tulisan pada paragraf dengan kelas="ex.Warna Paragraf ini adalah biru</p>
<p class="red">
Tulisan pada paragraf ini, memiliki indent 50 pixel. Maka definisikanlah pada css untuk tag p. Seorang ulama pernah menyampaikan, bahwa keberhasilan pendidikan/ilmu yang kita miliki, anyak dipengaruhi oleh faktor keimanan dan ketaatan. Sayangnya pada sistem pendidikan dewasa ini, dua hal tersebut diabaikan dan tidak masuk ke dalam kurikulum yang harus diberikan dalam proses pendidikan. </p>
<h1 class="over" align="center">
Heading pada Class align ini diset tengah</h1>
<p class="red" align="right">
Tulisan ini, ditulis dalam tag p dengan kelas 'tanggal', di atur rata kanan. May, 2009</p>
<p class="coba">
Tulisan ini ditulis pada tag p dengan kelas 'main'. Tulisan ini diset alignment justify. sehingga pada paragraf ini akan diatur perataan kanan dan kiri. Hal ini dapat dibuktikan dengan melihat perataan kiri dan kanan paragraf. Bahwa pada batas kanan dan kiri, diatur rata kanan dan kiri. Untuk memberikan ilustrasi yang mudah dilihat maka tulisan pada paragraf ini diperpanjang, untuk melihat batas kanan dan kiri pada banyak baris paragraf ini. Silahkan atur pada CSS untuk membuat tampilan paragraf ini menjadi rata kanan dan kiri. Sehingga setiap tulisan yang ditulis didalam tag p dengan kelas 'main' akan datur rata kanan dan kiri.</p>
<p class="red">
<b>Catatan :</b>Ubah ukuran browser, diperbesar atau diperkecil untuk melihat pengaturan 'justify' bekerja.</p>
<p class="red">
Link to:<a href="#" style="text-decoration:none;">Mat itu aku</a>
  <h1 class="over">
Setiap tulisan Heading 1,diberikan garis atas</h1>
<h2 class="h2">
Tulisan Headig2 dicoret</h2>
<h3 class="h3">
Tulisan Heading 3 diberi garis bawah</h3>
<p class="besar">
text pada HTML, ada huruf uppercase ada huruf LOWERCASE. tapi pada paragraf di kelas ini diatur menjadi uppercase semua</p>
<p class="kecil">
text pada HTML, ADA huruf uppercase pada huruf lowercase tapipada paragraf di kelas ini, diatur menjadi lowercase semua</p>
<p class="capital">
Text pada html ada huruf uppercase ada huruf lowercase. Tapi pada paragraf di kelas ini diatur menjadi capitalize</p>
</body>
</html>

Selesai sudah apa yang ingin saya sampaikan mengenai Belajar Pemrograman Web : Latihan CSS Semoga dapat membantu dan bermanfaat.

Belajar Pemrograman Web : Latihan CSS part 1

Related Post